@import "./fonts.css" layer(base);

@import "tailwindcss";
@import "tw-animate-css";

@import "./utilities.css";

@plugin 'tailwind-scrollbar';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';


@source '../../storage/framework/views/*.php';

@custom-variant dark (&:where(.dark, .dark *));


/* MapleDeploy branding: Tailwind's built-in stone scale, copied verbatim so
   dark ladder tokens below can be authored as color-mix() of adjacent stone
   steps (Tailwind only emits --color-stone-* vars for utilities actually
   used, so the tokens cannot reference them directly). Keep in sync with
   Tailwind v4's stone palette. */
:root {
    --md-stone-100: oklch(97% 0.001 106.424);
    --md-stone-200: oklch(92.3% 0.003 48.717);
    --md-stone-300: oklch(86.9% 0.005 56.366);
    --md-stone-400: oklch(70.9% 0.01 56.259);
    --md-stone-500: oklch(55.3% 0.013 58.071);
    --md-stone-600: oklch(44.4% 0.011 73.639);
    --md-stone-700: oklch(37.4% 0.01 67.558);
    --md-stone-800: oklch(26.8% 0.007 34.298);
    --md-stone-900: oklch(21.6% 0.006 56.043);
    --md-stone-950: oklch(14.7% 0.004 49.25);
}

/* MapleDeploy branding: Canadian red accent, stone greys */
@theme {
    --font-sans: Inter, sans-serif;
    --font-display: 'Overlock', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font-logs: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    --color-base: color-mix(in oklab, var(--md-stone-900) 40%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈17.5 (upstream 17.3) */
    --color-warning: #fde047; /* MapleDeploy branding: warning palette */
    --color-warning-50: #fefce8;
    --color-warning-100: #fef9c3;
    --color-warning-200: #fef08a;
    --color-warning-300: #fde047;
    --color-warning-400: #facc15;
    --color-warning-500: #eab308;
    --color-warning-600: #ca8a04;
    --color-warning-700: #a16207;
    --color-warning-800: #854d0e;
    --color-warning-900: #713f12;
    --color-success: oklch(72.27% 0.192 149.58);
    --color-error: #dc281c; /* MapleDeploy branding: red palette hue-normalized */
    --color-coollabs-50: #fef3f1; /* MapleDeploy branding: coollabs -> red */
    --color-coollabs: #d52b1f;
    --color-coollabs-100: #f34d3d;
    --color-coollabs-200: #bc251a;
    --color-coollabs-300: #9c2117;
    --color-coolgray-100: color-mix(in oklab, var(--md-stone-900) 90%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈20.9 */
    --color-coolgray-200: color-mix(in oklab, var(--md-stone-800) 55%, var(--md-stone-900)); /* MapleDeploy branding: stone-800/900 mix, L≈24.5 */
    --color-coolgray-300: color-mix(in oklab, var(--md-stone-800) 85%, var(--md-stone-900)); /* MapleDeploy branding: stone-800/900 mix, L≈26.0 */
    --color-coolgray-400: color-mix(in oklab, var(--md-stone-700) 10%, var(--md-stone-800)); /* MapleDeploy branding: stone-700/800 mix, L≈27.9 */
    --color-coolgray-500: color-mix(in oklab, var(--md-stone-700) 45%, var(--md-stone-800)); /* MapleDeploy branding: stone-700/800 mix, L≈31.6 */

    /* Graphite design language (ported from ref/frontend). Layered neutral
       surfaces + translucent hairlines. See DESIGN.md. */
    /* Content canvas: the darkest shell layer (sRGB ~10). Hex, not oklch:
       oklch lightness compresses to near-black below ~15%, so oklch(7.5%)
       renders as sRGB 1 with no visible step. */
    --color-app: var(--md-stone-950); /* MapleDeploy branding: stone-950 (upstream 14.48 ≈ 14.7) */
    /* Sidebar + topbar chrome (sRGB ~20): a clear step lighter than the content
       canvas so the shell chrome separates from the content area. */
    --color-panel: color-mix(in oklab, var(--md-stone-900) 65%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈19.2 (upstream 19.13) */
    /* Pure neutral (r=g=b). Were cool-tinted (#161618/#1c1c1e/#26262a, b>r),
       which clashed with the neutral panel ladder. */
    --color-surface: color-mix(in oklab, var(--md-stone-900) 75%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈19.9 (upstream 20.02) */
    --color-raised: color-mix(in oklab, var(--md-stone-800) 20%, var(--md-stone-900)); /* MapleDeploy branding: stone-800/900 mix, L≈22.6 */
    --color-selected: var(--md-stone-800); /* MapleDeploy branding: stone-800 (upstream 26.86 ≈ 26.8) */
    --color-fg: var(--md-stone-100); /* MapleDeploy branding: stone-100 (upstream 96.12 ≈ 97) */
    --color-fg-dim: color-mix(in oklab, var(--md-stone-300) 40%, var(--md-stone-400)); /* MapleDeploy branding: stone-300/400 mix, L≈77.3 */
    /* Tertiary text. Raised from #6e6e74 (3.78:1 on base, failed WCAG AA)
       to #7e7e84 so 13-14px text clears 4.5:1 on the dark surface ladder. */
    --color-fg-faint: color-mix(in oklab, var(--md-stone-400) 25%, var(--md-stone-500)); /* MapleDeploy branding: stone-400/500 mix, L≈59.2 */
    --color-accent: #d52b1f; /* MapleDeploy branding: accent -> red-600 */
    --color-accent-foreground: oklch(100.0% 0 0);
    --color-hairline: oklch(100.0% 0 0 / 0.08);
    --color-nav-text: var(--md-stone-600); /* MapleDeploy branding: stone-600 (upstream 43.86 ≈ 44.4) */
    --color-nav-muted: color-mix(in oklab, var(--md-stone-500) 60%, var(--md-stone-600)); /* MapleDeploy branding: stone-500/600 mix, L≈50.9 */
    --color-nav-active: color-mix(in oklab, var(--md-stone-900) 85%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈20.6 */
    --color-log: color-mix(in oklab, var(--md-stone-900) 20%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈16.1 */

    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4);
    /* One restrained lift shared by every dropdown/menu/listbox panel and the
       command palette. Lighter and consistent, replacing the old scattered
       0.45 / 0.35 / shadow-lg / shadow-sm mix. Modals keep --shadow-modal. */
    --shadow-dropdown: 0 4px 12px rgb(0 0 0 / 0.12), 0 2px 4px rgb(0 0 0 / 0.08);

    /* Shared motion curves (stronger than the built-in CSS easings). Use these
       for consistency: --ease-out for UI enter/press, --ease-drawer for
       drawers/sheets, --ease-in-out for on-screen movement. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* MapleDeploy branding: override Tailwind's red scale so red-* utilities match the brand hue */
    --color-red-50: #fef1ef;
    --color-red-100: #ffe3df;
    --color-red-200: #ffcec5;
    --color-red-300: #feaa9d;
    --color-red-400: #fb7968;
    --color-red-500: #f34d3d;
    --color-red-600: #d52b1f;
    --color-red-700: #bc251a;
    --color-red-800: #9c2117;
    --color-red-900: #812219;
    --color-red-950: #460d08;

    /* MapleDeploy branding: remap neutral and gray -> stone for warm tone consistency with marketing/dashboard.
       Upstream uses neutral for text/borders and gray for backgrounds/surfaces. Remapping both to stone
       warms the entire UI to match our design system, covering ~1000 class references without touching
       any Blade templates. */
    --color-neutral-50: oklch(98.5% 0.001 106.423);
    --color-neutral-100: oklch(97% 0.001 106.424);
    --color-neutral-200: oklch(92.3% 0.003 48.717);
    --color-neutral-300: oklch(86.9% 0.005 56.366);
    --color-neutral-400: oklch(70.9% 0.01 56.259);
    --color-neutral-500: oklch(55.3% 0.013 58.071);
    --color-neutral-600: oklch(44.4% 0.011 73.639);
    --color-neutral-700: oklch(37.4% 0.01 67.558);
    --color-neutral-800: oklch(26.8% 0.007 34.298);
    --color-neutral-900: oklch(21.6% 0.006 56.043);
    --color-neutral-950: oklch(14.7% 0.004 49.25);
    --color-gray-50: oklch(98.5% 0.001 106.423);
    --color-gray-100: oklch(97% 0.001 106.424);
    --color-gray-200: oklch(92.3% 0.003 48.717);
    --color-gray-300: oklch(86.9% 0.005 56.366);
    --color-gray-400: oklch(70.9% 0.01 56.259);
    --color-gray-500: oklch(55.3% 0.013 58.071);
    --color-gray-600: oklch(44.4% 0.011 73.639);
    --color-gray-700: oklch(37.4% 0.01 67.558);
    --color-gray-800: oklch(26.8% 0.007 34.298);
    --color-gray-900: oklch(21.6% 0.006 56.043);
    --color-gray-950: oklch(14.7% 0.004 49.25);
}

/* Standard buttons have a compact physical edge. Hover lifts the face by 1px;
   pressing nudges it down while the depth disappears. */
.button:not(:disabled) {
    --button-depth-color: rgb(0 0 0 / 0.22);
    --button-depth: 0 2px 0 var(--button-depth-color);
    --button-depth-hover: 0 3px 0 var(--button-depth-color);

    box-shadow: var(--button-depth);
}

.button.button-highlighted:not(:disabled),
.button[isHighlighted]:not(:disabled) {
    --button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);
}

.dark .button:not(.button-highlighted):not(.button-error):not([isHighlighted]):not(:disabled) {
    --button-depth-color: rgb(255 255 255 / 0.08);
}

.button.button-error:not(:disabled) {
    --button-depth-color: var(--color-red-300);
}

.dark .button.button-error:not(:disabled) {
    --button-depth-color: var(--color-red-800);
}

/* Keep the shared focus indicator when the depth shadow owns box-shadow. */
.button:not(:disabled):focus-visible {
    box-shadow: var(--button-depth), 0 0 0 1px var(--color-accent);
}

.button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--button-depth-hover);
}

.button:not(:disabled):hover:focus-visible {
    box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-accent);
}

/* Other button-like controls retain the lighter scale feedback. */
.button,
.icon-button,
.app-tab,
.split-action-main,
.split-action-caret {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-timing-function: var(--ease-out);
    transition-duration: 120ms;
}

.button {
    transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms;
}

.icon-button:not(:disabled):active,
.app-tab:active,
.split-action-main:not(:disabled):active,
.split-action-caret:not(:disabled):active {
    transform: scale(0.97);
}

.button:not(:disabled):active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Focus border/ring on any form control should ease, not snap. The accent
   focus indicator is a border-color and/or box-shadow (ring) change, which the
   utilities' `transition-colors` did not fully animate. Target the elements
   themselves (covers bespoke search fields too) plus the div-based controls. */
input,
textarea,
select,
.listbox-trigger,
.chip-input {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: var(--ease-out);
    transition-duration: 120ms;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/

@layer components {
    .terminal-mobile-key {
        @apply min-h-8 shrink-0 rounded-full border bg-transparent px-3 py-1 text-sm font-medium text-neutral-300 active:text-white;
        border-color: color-mix(in srgb, var(--terminal-scrollbar, #fff) 24%, transparent);
    }

    .terminal-key-row {
        border: 1px solid color-mix(in srgb, var(--terminal-scrollbar, #fff) 22%, transparent);
        background: transparent;
    }

    /* Active state is a solid fill only (no accent rail / border). */
    .menu-item-active .menu-item-icon,
    .menu-subitem-active .menu-item-icon {
        opacity: 1;
    }

    /* Kill any legacy accent wash or rail; fill is solid via menu-item-active utility. */
    .menu-item-active,
    .menu-subitem-active,
    .dark .menu-item-active,
    .dark .menu-subitem-active {
        background-image: none;
    }

    .menu-item-active::before,
    .menu-subitem-active::before {
        content: none;
        display: none;
    }

    /* vertical connector line for a nested nav group */
    .nav-children {
        position: relative;
        margin-left: 1.1rem;
        padding-left: 0.25rem;
        border-left: 1px solid var(--color-hairline);
    }
}

@layer base {

    html {
        color-scheme: light;
    }

    html.dark {
        color-scheme: dark;
    }

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-coolgray-200, currentcolor);
    }
}

@keyframes lds-heart {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.2);
    }

    39% {
        transform: scale(0.85);
    }

    45% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes coolbox-border-track {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-size: 35% 2px, 0 0, 0 0, 0 0;
    }

    33% {
        background-position: 100% 0, 100% 0, 100% 100%, 0 100%;
        background-size: 35% 2px, 0 0, 0 0, 0 0;
    }

    34% {
        background-position: 100% 0, 100% 0, 100% 100%, 0 100%;
        background-size: 0 0, 2px 35%, 0 0, 0 0;
    }

    50% {
        background-position: 100% 0, 100% 100%, 100% 100%, 0 100%;
        background-size: 0 0, 2px 35%, 0 0, 0 0;
    }

    51% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-size: 0 0, 0 0, 35% 2px, 0 0;
    }

    84% {
        background-position: 0 0, 100% 0, 0 100%, 0 100%;
        background-size: 0 0, 0 0, 35% 2px, 0 0;
    }

    85% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-size: 0 0, 0 0, 0 0, 2px 35%;
    }

    100% {
        background-position: 0 0, 100% 0, 100% 100%, 0 0;
        background-size: 0 0, 0 0, 0 0, 2px 35%;
    }
}

@layer components {
    .coolbox-loading {
        @apply overflow-hidden border-transparent;
        isolation: isolate;
    }

    .coolbox-loading::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
            linear-gradient(var(--color-warning), var(--color-warning)),
            linear-gradient(var(--color-warning), var(--color-warning)),
            linear-gradient(var(--color-warning), var(--color-warning)),
            linear-gradient(var(--color-warning), var(--color-warning));
        background-repeat: no-repeat;
        animation: coolbox-border-track 2400ms linear infinite;
        pointer-events: none;
        z-index: 0;
    }

    .coolbox-loading::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: calc(0.25rem - 2px);
        background: white;
        pointer-events: none;
        z-index: 1;
    }

    .dark .coolbox-loading::after {
        background: var(--color-coolgray-100);
    }

    .coolbox-loading > * {
        position: relative;
        z-index: 2;
    }

    @media (max-width: 767px) {
        :root input,
        :root textarea,
        :root select {
            font-size: 16px !important;
        }
    }
}

/*
* Base styles
*/
html,
body {
    /* MapleDeploy branding: text-stone-800 body text matches marketing/dashboard */
    @apply w-full min-h-full text-stone-800 bg-neutral-50 dark:bg-app dark:text-fg-dim;
}

body {
    /* overflow-x: clip (not hidden) — hidden creates a scroll containment that
       breaks position:sticky on settings sidebars and other in-page pins. */
    min-height: 100dvh;
    @apply text-sm font-sans antialiased scrollbar overflow-x-clip;
}

.coolify-monaco-editor {
    @apply min-w-0 w-full;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--coollabs-line, #e5e5e5);
}

.coolify-monaco-editor .monaco-editor,
.coolify-monaco-editor .overflow-guard {
    max-width: 100%;
}

option {
    @apply dark:text-white dark:bg-coolgray-100;
}

.button.button-error {
    @apply text-red-800 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-800;
}

.button.button-error:disabled {
    @apply text-red-800 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-800;
}

.button-error:not(:disabled) {
    @apply hover:bg-red-100 hover:text-red-900 dark:hover:bg-red-700 dark:hover:text-white;
}

button[isHighlighted]:not(:disabled) {
    @apply button-highlighted;
}

h1 {
    /* MapleDeploy branding: font-display (Overlock) on large semantic headings.
       h4 (16px, body size) deliberately stays on the body font. */
    @apply text-[24px] leading-7 font-semibold tracking-tight font-display dark:text-white;
}

h2 {
    @apply text-xl font-bold font-display dark:text-white;
}

h3 {
    @apply text-lg font-bold font-display dark:text-white;
}

h4 {
    @apply text-base font-bold dark:text-white;
}

/* MapleDeploy branding: Overlock is a display face and only reads well at
   heading sizes (>= 18px). Headings downsized below that via text-size
   utilities (e.g. 13-15px card and section titles) fall back to the body
   font instead of inheriting font-display from the base heading styles. */
:is(h1, h2, h3):is(
    [class*="text-[10"], [class*="text-[11"], [class*="text-[12"],
    [class*="text-[13"], [class*="text-[14"], [class*="text-[15"],
    [class*="text-[16"], [class*="text-[17"],
    [class*="text-xs"], [class*="text-sm"], [class*="text-base"]) {
    font-family: var(--font-sans);
}

a {
    @apply hover:text-black dark:hover:text-white;
}

button:focus-visible,
a:focus-visible {
    @apply outline-none ring-2 ring-coollabs dark:ring-1 dark:ring-warning ring-offset-2 dark:ring-offset-coolgray-100;
}

label {
    @apply dark:text-neutral-400;
}

table {
    @apply min-w-full divide-y dark:divide-coolgray-200 divide-neutral-300;
}

thead {
    @apply uppercase;
}

tbody {
    @apply divide-y dark:divide-coolgray-200 divide-neutral-300;
}

tr {
    @apply text-black dark:text-neutral-400 dark:hover:bg-coolgray-300 hover:bg-neutral-100;
}

tr th {
    @apply px-3 py-3.5 text-left text-black dark:text-white;
}

tr th:first-child {
    @apply py-3.5 pr-3 pl-4 sm:pl-6;
}

tr td {
    @apply px-3 py-4 whitespace-nowrap;
}

tr td:first-child {
    @apply pr-3 pl-4 font-bold sm:pl-6;
}

/*
* Utility classes
*/
/* Reserve space for the visibility toggle. Use a class (not [type=password]) so padding
   remains when Alpine reveals the value as type=text, and so settings-workspace input
   padding-right overrides cannot collapse the field into the eye icon. */
.input.input-with-password-toggle,
.input[type="password"] {
    padding-right: 2.5rem;
}

/* Same durable clearance for copy-affordance inputs (utility pr-* loses to settings CSS). */
.input.input-with-copy-button {
    padding-right: 2.5rem;
}

.lds-heart {
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Loading feedback uses the higher-contrast warning accent in dark mode. */
.dark .animate-spin {
    color: var(--color-warning) !important;
}

.dark #nprogress .bar {
    background: var(--color-warning) !important;
}

.dark #nprogress .peg {
    box-shadow:
        0 0 10px var(--color-warning),
        0 0 5px var(--color-warning) !important;
}

.dark #nprogress .spinner-icon {
    border-top-color: var(--color-warning) !important;
    border-left-color: var(--color-warning) !important;
}

html[data-theme="custom"] .loading-indicator,
html[data-theme="custom"] .animate-spin {
    color: var(--theme-bright-color) !important;
}

/* Opt out of the brand spinner when the surrounding surface is a selected/neutral control
   or a highlighted button, whose accent surface would camouflage a brand-colored spinner. */
.dark .animate-spin.spinner-current,
html[data-theme="custom"] .animate-spin.spinner-current,
html[data-theme="custom"] .button-highlighted .animate-spin,
html[data-theme="custom"] button[isHighlighted] .animate-spin {
    color: inherit !important;
}

html[data-theme="custom"] #nprogress .bar {
    background: var(--theme-bright-color) !important;
}

html[data-theme="custom"] #nprogress .peg {
    box-shadow:
        0 0 10px var(--theme-bright-color),
        0 0 5px var(--theme-bright-color) !important;
}

html[data-theme="custom"] #nprogress .spinner-icon {
    border-top-color: var(--theme-bright-color) !important;
    border-left-color: var(--theme-bright-color) !important;
}

.log-highlight {
    background-color: rgba(234, 179, 8, 0.4);
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.dark .log-highlight {
    background-color: rgba(234, 179, 8, 0.3);
}

/* Wave-style application console: transparent viewport and an overlay
   scrollbar that stays out of the terminal content until it is used. */
#terminal.terminal-host,
#terminal.terminal-host .xterm {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

#terminal.terminal-host .xterm {
    padding: 0;
}

#terminal.terminal-host .xterm-viewport {
    overflow-y: auto !important;
}

#terminal[data-terminal-style="application"] .xterm-viewport {
    background-color: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

#terminal[data-terminal-style="application"] .xterm-viewport::-webkit-scrollbar {
    width: 4px;
}

#terminal[data-terminal-style="application"] .xterm-viewport::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
}

#terminal[data-terminal-style="application"] .xterm-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.application-console-shell,
.terminal-fullscreen-shell {
    position: relative;
    isolation: isolate;
    color: var(--md-stone-100); /* MapleDeploy branding: stone-100 (was #f2f2f2) */
    background-color: color-mix(in oklab, var(--md-stone-900) 50%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix (was #121214) */
}

.application-console-shell {
    box-shadow:
        inset 0 0 0 1px var(--console-theme-border, rgb(255 255 255 / 0.08)),
        0 18px 50px rgb(0 0 0 / 0.18);
}

/* Fullscreen is portaled to body — keep position:fixed from utilities. */
.terminal-fullscreen-shell {
    position: fixed;
}

.application-console-shell::before,
.terminal-fullscreen-shell::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: var(--console-theme-background);
    opacity: var(--console-theme-opacity);
    content: "";
    pointer-events: none;
    transition:
        background 220ms ease,
        opacity 220ms ease;
}

.application-console-shell[data-console-theme="system"],
.terminal-fullscreen-shell[data-console-theme="system"] {
    --console-theme-background: oklch(100.0% 0 0);
    --console-theme-border: oklch(87.11% 0.0055 286.29);
    --console-theme-opacity: 1;
}

/* Session toolbar (selected-target trigger + label) sits over the white
   system console in light mode. Without this its text-white/* stayed white on
   white and the selected server was invisible (issue #11532). */
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-toolbar[class*="text-white"],
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-toolbar [class*="text-white"],
html:not(.dark) .terminal-fullscreen-shell[data-console-theme="system"] .terminal-session-toolbar[class*="text-white"],
html:not(.dark) .terminal-fullscreen-shell[data-console-theme="system"] .terminal-session-toolbar [class*="text-white"] {
    color: #52525b !important;
}

html.dark .application-console-shell[data-console-theme="system"],
html.dark .terminal-fullscreen-shell[data-console-theme="system"] {
    --console-theme-background: color-mix(in oklab, var(--md-stone-900) 50%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈18.2 (upstream 18.31) */
    --console-theme-border: rgb(255 255 255 / 0.08);
}

html[data-theme="custom"] .application-console-shell[data-console-theme="system"],
html[data-theme="custom"] .terminal-fullscreen-shell[data-console-theme="system"] {
    --console-theme-background: var(--color-log);
    --console-theme-border: var(--coollabs-line);
}

/* Docked System console only: the fill behind the terminal panel is the
   elevated (header) surface, so the panel's rounded-corner notch reads as the
   header colour — the card's figure/ground. The panel paints its own base
   surface over this fill, so only the notch shows it. The fullscreen shell has
   no panel, so it is intentionally excluded and keeps its plain terminal fill. */
.application-console-shell[data-console-theme="system"] {
    --console-theme-background: var(--coollabs-elevated);
}

html.dark .application-console-shell[data-console-theme="system"] {
    --console-theme-background: var(--coollabs-elevated);
}

.console-theme-selector {
    scrollbar-color: rgb(161 161 170) transparent;
    scrollbar-width: thin;
}

.console-theme-selector::-webkit-scrollbar {
    width: 8px;
}

.console-theme-selector::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 9999px;
    background: rgb(161 161 170);
    background-clip: padding-box;
}

.console-theme-selector::-webkit-scrollbar-track {
    background: transparent;
}

html.dark .console-theme-selector {
    scrollbar-color: rgb(255 255 255 / 0.28) transparent;
}

html.dark .console-theme-selector::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.28);
    background-clip: padding-box;
}

.application-console-shell[data-console-theme="shadows-midnight"],
.terminal-fullscreen-shell[data-console-theme="shadows-midnight"] {
    --console-theme-background: linear-gradient(135deg, #2a3b4c, rgb(42 59 76 / 0.4));
    --console-theme-opacity: 0.9;
}

.application-console-shell[data-console-theme="shadows-golden-hour"],
.terminal-fullscreen-shell[data-console-theme="shadows-golden-hour"] {
    --console-theme-background: linear-gradient(135deg, #d58a42, rgb(213 138 66 / 0.4));
    --console-theme-opacity: 0.4;
}

.application-console-shell[data-console-theme="shadows-cosmic-purple"],
.terminal-fullscreen-shell[data-console-theme="shadows-cosmic-purple"] {
    --console-theme-background: linear-gradient(135deg, #5d3e66, rgb(93 62 102 / 0.4));
    --console-theme-opacity: 0.8;
}

.application-console-shell[data-console-theme="shadows-neon-glow"],
.terminal-fullscreen-shell[data-console-theme="shadows-neon-glow"] {
    --console-theme-background: linear-gradient(135deg, #f300a6, rgb(243 0 166 / 0.3));
    --console-theme-opacity: 0.45;
}

.application-console-shell[data-console-theme="shadows-icy-mist"],
.terminal-fullscreen-shell[data-console-theme="shadows-icy-mist"] {
    --console-theme-background: linear-gradient(135deg, #d0d8e2, rgb(208 216 226 / 0.2));
    --console-theme-opacity: 0.5;
}

.application-console-shell[data-console-theme="shadows-tropical-storm"],
.terminal-fullscreen-shell[data-console-theme="shadows-tropical-storm"] {
    --console-theme-background: linear-gradient(135deg, #00b894, #1fa771, #2ecc71, #27ae60);
    --console-theme-opacity: 0.3;
}

.application-console-shell[data-console-theme="shadows-golden-nebula"],
.terminal-fullscreen-shell[data-console-theme="shadows-golden-nebula"] {
    --console-theme-background: linear-gradient(135deg, #ffd700, #ff6347, #d4a20e, #ffcc00, #1f3d6f);
    --console-theme-opacity: 0.44;
}

.application-console-shell[data-console-theme="shadows-cosmic-lagoon"],
.terminal-fullscreen-shell[data-console-theme="shadows-cosmic-lagoon"] {
    --console-theme-background: linear-gradient(135deg, #1d2b64, #2f4f96, #00b5b8, #9c27b0, #8e24aa);
    --console-theme-opacity: 0.59;
}

.application-console-shell[data-console-theme="shadows-neon-nebula"],
.terminal-fullscreen-shell[data-console-theme="shadows-neon-nebula"] {
    --console-theme-background: linear-gradient(135deg, #00d9d9, #ff55aa, #1e1e2f, #2f3b57, #ff99ff);
    --console-theme-opacity: 0.6;
}

.application-console-shell[data-console-theme="shadows-transparent"],
.terminal-fullscreen-shell[data-console-theme="shadows-transparent"] {
    --console-theme-background: rgb(0 0 0 / 0.7);
    --console-theme-opacity: 0.7;
}

/*
 * Terminal page: lock to the viewport so the shell fills remaining height
 * without document scroll. Offsets match layouts/app.blade.php chrome:
 *  mobile sticky top bar (~3.5rem) + main py-6 (3rem)
 *  desktop fixed top bar accounted in main lg:pt-[calc(3rem+1.75rem)] + lg:pb-10
 */
.terminal-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    height: calc(100dvh - 6.75rem);
    max-height: calc(100dvh - 6.75rem);
}

@media (min-width: 1024px) {
    .terminal-page {
        height: calc(100dvh - 7.25rem);
        max-height: calc(100dvh - 7.25rem);
    }
}

.terminal-page-header {
    margin-bottom: 1rem;
}

.terminal-page-console {
    display: flex;
    min-height: 0;
    flex: 1 1 0%;
    flex-direction: column;
    overflow: hidden;
    /* Breathing room so the console's box-shadow ring + lift are not clipped by
       this overflow-hidden, viewport-height container (the card gets this from
       the scrollable page around it). */
    padding: 6px;
}

.terminal-page-console > .application-console-shell {
    min-height: 0;
    flex: 1 1 0%;
}

/* Fullscreen: freeze the page; only xterm scrollback may move. */
html.terminal-is-fullscreen,
html.terminal-is-fullscreen body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
    height: 100% !important;
    max-height: 100% !important;
}

html.terminal-is-fullscreen body {
    /* position:fixed is also applied inline for scroll-lock */
    width: 100% !important;
}

html.terminal-is-fullscreen main {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Fullscreen terminal must win against layout chrome (header z-50, sidebar z-40). */
html.terminal-is-fullscreen .terminal-fullscreen-shell,
body.terminal-is-fullscreen .terminal-fullscreen-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100vw !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
}

/* Re-enable pan/scroll only inside the xterm buffer viewport. */
html.terminal-is-fullscreen .terminal-fullscreen-shell .xterm-viewport,
body.terminal-is-fullscreen .terminal-fullscreen-shell .xterm-viewport {
    overscroll-behavior: contain !important;
    touch-action: pan-y;
}

html.terminal-is-fullscreen .terminal-fullscreen-shell .terminal-fullscreen-btn,
html.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-toolbar],
body.terminal-is-fullscreen .terminal-fullscreen-shell .terminal-fullscreen-btn,
body.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-toolbar] {
    touch-action: manipulation;
}

/* Session header band: an attached card-style header on top of the console,
   mirroring the page card header (elevated surface + hairline divider). The
   System theme uses the neutral card surface in both modes; colorful themes
   fall back to a translucent dark band so the white controls stay legible. */
.terminal-session-toolbar {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    min-height: 3rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    /* No border-radius: the shell is overflow-hidden + rounded and clips the
       header's top corners, so rounding here only risks a sub-pixel seam. */
    border-bottom: 1px solid var(--terminal-header-border, rgb(255 255 255 / 0.1));
    background: var(--terminal-header-bg, rgb(0 0 0 / 0.28));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* System header has no bottom border: the body panel's ring is the divider, and
   its rounded top corners tuck under the header — the same merge the
   target-picker card uses (elevated header meeting a base body panel). */
.application-console-shell[data-console-theme="system"] .terminal-session-toolbar {
    --terminal-header-bg: var(--coollabs-elevated);
    --terminal-header-border: transparent;
    /* Shell no longer clips (overflow: visible), so the header rounds its own
       top corners — matching the card header. */
    border-radius: 8px 8px 0 0;
    /* Drop the z-index:2 stacking context: it painted the header OVER the body
       panel, hiding the panel's ring (the divider). The header only had z-2 to
       beat ::before, but its dropdowns sit in their own .relative wrappers, so
       z:auto is safe and lets the body panel's ring paint over the header —
       exactly how the card body overlaps the card header. */
    z-index: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* System console body: the terminal panel, a full rounded box-shadow ring like
   the card body. Its base surface is the terminal fill; the elevated surface
   behind it (::before) shows only through the rounded-corner notch, reading as
   the header colour — the card's figure/ground. */
.application-console-shell[data-console-theme="system"] .terminal-session-panel {
    background: var(--coollabs-base);
    /* The body panel is a full rounded ring (like the card body). position:
       relative puts it (and its ring) above ::before AND, because it comes
       after the now-z:auto header in the DOM, above the header — so the ring's
       top edge is the divider and its rounded top corners connect down into the
       side ring, which coincides with the shell's ring (one hairline, no
       doubling). A box-shadow ring rounds and connects cleanly; a border-top
       cannot (square corners, or a disconnected transparent edge). */
    position: relative;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--coollabs-hairline);
}

/* Connected System console frame = the target-picker card recipe: a hairline
   box-shadow ring + a restrained lift. overflow stays visible so the ring is
   not clipped (the .terminal-page-console padding gives it room inside the
   viewport-locked, overflow-hidden page). Colorful themes keep the themed,
   overflow-hidden shell. */
.application-console-shell[data-console-theme="system"] {
    overflow: visible;
    box-shadow:
        0 0 0 1px var(--coollabs-hairline),
        0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.terminal-loading-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.75);
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-loading-label {
    color: #52525b;
}

.terminal-target-picker {
    color: rgb(255 255 255 / 0.75);
    background: rgb(0 0 0 / 0.18);
    border-color: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(16px);
}

/* Pre-session target list: a normal page card, not the themed console canvas. */
.terminal-target-card .application-settings-section-body {
    overflow: hidden;
}

/* The header inset is tuned for 32px buttons. A full-width filter needs the
   same gutter on both sides once the actions row wraps below the title.
   Matches the base header selector's specificity so the shorthand cannot win. */
@media (max-width: 640px) {
    .application-settings-section.terminal-target-card > :is(header, .application-settings-section-header) {
        padding-right: 1rem;
    }
}

.terminal-target-card-list {
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--coollabs-fill) transparent;
}

.terminal-target-card-list::-webkit-scrollbar {
    width: 8px;
}

.terminal-target-card-list::-webkit-scrollbar-track {
    background: transparent;
}

.terminal-target-card-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 9999px;
    background-color: var(--coollabs-fill);
    background-clip: padding-box;
}

/* Group headers stay readable while scrolling long container lists. */
.terminal-target-group-label {
    display: flex;
    position: sticky;
    z-index: 1;
    top: 0;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.5rem 0.375rem;
    background: var(--coollabs-base);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--coollabs-subtle);
}

.terminal-target-group-count {
    border-radius: 9999px;
    background: var(--coollabs-fill);
    padding: 0 0.375rem;
    font-size: 0.625rem;
    line-height: 1rem;
    font-variant-numeric: tabular-nums;
}

/* The server column only earns its space once the row is wide enough. */
.terminal-target-item-server {
    display: none;
    max-width: 14rem;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--coollabs-subtle);
}

@media (min-width: 640px) {
    .terminal-target-item-server {
        display: block;
    }
}

.terminal-session-panel {
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    box-shadow: none;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-panel {
    background: var(--coollabs-base);
}

.terminal-target-list {
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-scrollbar, rgb(255 255 255 / 0.3)) transparent;
}

.terminal-target-list::-webkit-scrollbar {
    width: 8px;
}

.terminal-target-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 9999px;
    background: var(--terminal-scrollbar, rgb(255 255 255 / 0.3));
    background-clip: padding-box;
}

.terminal-target-list::-webkit-scrollbar-track {
    background: transparent;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker {
    color: #52525b;
    background: #fff;
    border-color: #d4d4d8;
    box-shadow: var(--shadow-dropdown);
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker [class*="text-white"] {
    color: #52525b !important;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker input {
    color: #27272a !important;
    background: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker input::placeholder {
    color: #71717a !important;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker button:hover {
    color: #18181b !important;
    background: #f4f4f5;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-theme-trigger {
    color: #52525b;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-target-trigger {
    color: #52525b;
}

html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-theme-trigger:hover,
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-target-trigger:hover {
    color: #18181b;
    background: rgb(0 0 0 / 0.06);
}

.application-console-block {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.terminal-fullscreen-btn {
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 0;
    background: transparent;
    color: var(--terminal-scrollbar, rgb(255 255 255 / 0.65));
    transition:
        background-color 150ms ease,
        color 150ms ease,
        opacity 150ms ease;
}

.terminal-fullscreen-btn:hover {
    background: color-mix(in srgb, var(--terminal-scrollbar, #fff) 18%, transparent);
    color: var(--terminal-scrollbar, #fff);
}

/*
* Coollabs layer-card settings surfaces.
* Anatomy: root shell = elevated bg + hairline ring; the header is a compact
* strip on the shell; the body is a nested rounded panel with base bg + fill
* ring. Depth comes from the neutral oklch surface ladder below.
* Deliberately unlayered plain CSS: the global element rules above (h3, h4,
* section, label) and the .input/.button utilities would otherwise override
* utility classes placed in the card markup.
*/
:root {
    /* Page canvas is a faint off-white so white/elevated cards lift off it
       (shadcn pattern), instead of card and page reading as one flat color. */
    --coollabs-canvas: oklch(97% 0 0);
    --coollabs-elevated: oklch(98% 0 0);
    --coollabs-recessed: oklch(96% 0 0);
    --coollabs-base: oklch(100.0% 0 0);
    --coollabs-fill: oklch(92.2% 0 0);
    --coollabs-line: oklch(14.5% 0 0 / 0.1);
    /* Card/table edge ring. Crisped from 93.5% (1.17:1 on canvas, invisible)
       to 85.5% (1.51:1) so surfaces read as bordered cards, not flat fills. */
    --coollabs-hairline: oklch(85.5% 0 0);
    /* Muted labels/titles. Darkened from 55.6% (failed WCAG AA on elevated
       4.46, recessed 4.24, fill 3.76) to 50% so muted text clears 4.5:1 on
       every light surface above white. Dark stays 70.8% (already passes). */
    --coollabs-subtle: oklch(50% 0 0);
}

.dark {
    --color-accent: #fde047; /* MapleDeploy branding: dark-mode accent -> warning */
    /* Dark surface ladder in hex (sRGB), not oklch: oklch lightness compresses
       to near-black below ~15%, so oklch(15%) rendered as sRGB 11 and cards
       could not lift off the content canvas (sRGB 10). These give clear,
       visible steps: content 10 -> elevated 22 -> base 28 -> recessed 34.
       Pure neutral (r=g=b), matching the neutral borders/text and the light
       ladder, so every panel shares one temperature (no blue cast). */
    --coollabs-canvas: var(--md-stone-950); /* MapleDeploy branding: stone-950 */
    --coollabs-elevated: color-mix(in oklab, var(--md-stone-900) 75%, var(--md-stone-950)); /* MapleDeploy branding: stone-900/950 mix, L≈19.9 */
    --coollabs-recessed: color-mix(in oklab, var(--md-stone-800) 70%, var(--md-stone-900)); /* MapleDeploy branding: stone-800/900 mix, L≈25.2 */
    --coollabs-base: color-mix(in oklab, var(--md-stone-800) 20%, var(--md-stone-900)); /* MapleDeploy branding: stone-800/900 mix, L≈22.6 */
    --coollabs-fill: color-mix(in oklab, var(--md-stone-700) 25%, var(--md-stone-800)); /* MapleDeploy branding: stone-700/800 mix, L≈29.5 */
    --coollabs-line: color-mix(in oklab, var(--md-stone-700) 50%, var(--md-stone-800)); /* MapleDeploy branding: stone-700/800 mix, L≈32.1 */
    /* Crisped from 26.9% (1.36:1 on canvas) to 32% (1.63:1) so dark cards
       and tables show a visible edge instead of blending into the canvas. */
    --coollabs-hairline: color-mix(in oklab, var(--md-stone-700) 50%, var(--md-stone-800)); /* MapleDeploy branding: stone-700/800 mix, L≈32.1 */
    --coollabs-subtle: var(--md-stone-400); /* MapleDeploy branding: stone-400 (upstream 70.8 ≈ 70.9) */
    /* Neutral (was #a8a8b0 / #7a7a84, both cool-tinted). Sidebar text now shares
       the same neutral temperature as the content text, so the sidebar no longer
       reads cooler than the panels/cards. */
    --color-nav-text: color-mix(in oklab, var(--md-stone-300) 20%, var(--md-stone-400)); /* MapleDeploy branding: stone-300/400 mix, L≈74.1 */
    /* Raised from 58.97% (4.47:1 on panel, just under AA) to 61% (4.86:1) so the
       11px sidebar section labels clear 4.5:1. */
    --color-nav-muted: color-mix(in oklab, var(--md-stone-400) 35%, var(--md-stone-500)); /* MapleDeploy branding: stone-400/500 mix, L≈60.8 */
    --color-nav-active: var(--md-stone-100); /* MapleDeploy branding: stone-100 */
    /* Tertiary text. Base token (59.31%) only clears 4.5:1 on app/panel; it
       failed on surface/raised/selected (4.46/4.20/3.73). Raised to 64% so the
       313 dark:text-fg-faint usages clear AA across the whole surface ladder,
       while staying clearly dimmer than fg-dim (76.99%). */
    --color-fg-faint: color-mix(in oklab, var(--md-stone-400) 60%, var(--md-stone-500)); /* MapleDeploy branding: stone-400/500 mix, L≈64.7 */
    /* Error text. The base error red (57.71%) failed on every dark surface
       (4.10/3.75/3.53). Brightened for dark mode so text-error clears AA on the
       card ladder while staying unmistakably red. */
    --color-error: oklch(66% 0.2 29.38); /* MapleDeploy branding: brand red hue */
}

/* Light-mode semantic text.
   warning / success / error double as the bright brand accent and as solid
   fills, which only appear under `dark:` — so in light mode these tokens are
   used almost entirely as text, translucent tints (bg-warning/10) and borders.
   The bright values (yellow 88%, green 72%) and the base red (57.71%) fail AA
   as text on white and the light surface ladder (warning 1.43, success 2.28,
   error 4.43 on canvas). Scoped to `:not(.dark)` so dark keeps the brand
   colors and the custom theme keeps its own overrides. Every value clears
   4.5:1 on white, canvas, elevated, recessed and fill, and is in sRGB gamut. */
html:not(.dark) {
    --color-warning: oklch(50% 0.105 80);
    --color-success: oklch(48% 0.135 149.58);
    --color-error: oklch(52% 0.2 29.38); /* MapleDeploy branding: brand red hue */
}

/* Theme surfaces are derived from one brand color. Changing
   --theme-base-color is enough to generate a complete dark surface ladder. */
html[data-theme="custom"] {
    --theme-base-color: #d52b1f; /* MapleDeploy branding: default custom-theme base -> red-600 */
    --theme-bright-color: color-mix(in srgb, var(--theme-base-color) 85%, oklch(100% 0 0));
    --theme-scrollbar-thumb: color-mix(in srgb, var(--theme-bright-color) 70%, var(--theme-accent-foreground));
    --theme-border-color: color-mix(in oklab, var(--theme-base-color) 42%, oklch(44.19% 0.0146 285.79));
    /* Accent text/icons sit directly on dark surfaces. Force the lightness into a
       readable band (and tame chroma) so any picked hue keeps enough contrast. */
    --theme-fg-on-surface: oklch(from var(--theme-base-color) clamp(0.72, l, 0.86) min(c, 0.13) h);
    /* Placeholders read as a light, near-neutral hint of the hue - never the raw
       (possibly dark) base color, which is invisible on the dark input. */
    --theme-placeholder-color: oklch(from var(--theme-base-color) 0.62 min(c, 0.03) h);
    --color-accent: var(--theme-bright-color);
    --color-coollabs: var(--theme-bright-color);
    --color-coollabs-100: color-mix(in oklab, var(--theme-bright-color) 88%, oklch(100% 0 0));
    --color-coollabs-200: color-mix(in oklab, var(--theme-bright-color) 88%, oklch(0% 0 0));
    --color-coollabs-300: color-mix(in oklab, var(--theme-bright-color) 72%, oklch(0% 0 0));
    /* Legacy dark-theme accent utilities use warning as the brand color. */
    --color-warning: var(--theme-bright-color);
    --color-accent-foreground: var(--theme-accent-foreground);
    --color-app: color-mix(in oklab, var(--theme-base-color) 12%, oklch(14.03% 0.0022 286.11));
    --color-panel: color-mix(in oklab, var(--theme-base-color) 14%, oklch(15.48% 0.0021 286.15));
    --color-surface: color-mix(in oklab, var(--theme-base-color) 18%, oklch(17.35% 0.0020 286.18));
    --color-raised: color-mix(in oklab, var(--theme-base-color) 24%, oklch(19.21% 0.0040 286.02));
    --color-selected: color-mix(in oklab, var(--theme-base-color) 32%, oklch(20.99% 0.0039 286.06));
    --color-coolgray-100: var(--color-surface);
    --color-coolgray-200: var(--color-raised);
    --color-coolgray-300: var(--color-selected);
    --color-coolgray-400: color-mix(in oklab, var(--theme-base-color) 28%, oklch(22.34% 0.0058 285.92));
    --color-coolgray-500: color-mix(in oklab, var(--theme-base-color) 32%, oklch(24.52% 0.0075 285.83));
    --coollabs-canvas: var(--color-app);
    --coollabs-elevated: var(--color-surface);
    --coollabs-recessed: var(--color-raised);
    --coollabs-base: color-mix(in oklab, var(--theme-base-color) 22%, oklch(17.81% 0.0020 286.19));
    --color-content-surface: var(--coollabs-base);
    --coollabs-fill: color-mix(in oklab, var(--theme-base-color) 32%, oklch(20.99% 0.0039 286.06));
    --coollabs-line: var(--theme-border-color);
    --coollabs-hairline: color-mix(in srgb, var(--theme-border-color) 55%, var(--color-panel));
    --color-nav-text: oklch(91.08% 0.0157 306.4);
    --color-nav-muted: oklch(87.24% 0.0188 306.63);
    --color-nav-active: oklch(100.0% 0 0);
    --color-log: color-mix(in oklab, var(--theme-base-color) 20%, oklch(13.49% 0.0024 286.07));
    --color-log-toolbar: color-mix(in oklab, var(--theme-base-color) 26%, oklch(17.35% 0.0020 286.18));
    --color-fg-dim: oklch(91.08% 0.0157 306.4);
    --color-fg-faint: oklch(87.24% 0.0188 306.63);
    --coollabs-subtle: oklch(87.24% 0.0188 306.63);
}

/* Light custom theme: the same single brand color, but surfaces tint toward
   white and every foreground token flips to a dark, readable band. This selector
   outranks the plain html:not(.dark) light palette, so it wins where they meet.
   Accent fills (--theme-bright-color, --color-warning/coollabs) are inherited from
   the block above so the JS-computed --theme-accent-foreground stays consistent. */
html[data-theme="custom"]:not(.dark) {
    --theme-scrollbar-thumb: color-mix(in srgb, var(--theme-base-color) 45%, oklch(60% 0 0));
    /* Accent text/icons on light surfaces: force lightness into a dark band. */
    --theme-fg-on-surface: oklch(from var(--theme-base-color) clamp(0.30, l, 0.48) min(c, 0.16) h);
    /* Placeholder: medium-dark, near-neutral hint of the hue. */
    --theme-placeholder-color: oklch(from var(--theme-base-color) 0.50 min(c, 0.03) h);
    /* Surfaces hold a fixed high lightness (stays light, keeps dark text readable)
       while injecting the base hue's chroma, so the tint is actually visible.
       color-mix into white coupled lightness to the base and washed the tint out
       (a 4% mix of any color into near-white is imperceptible). */
    --color-app: oklch(from var(--theme-base-color) 96.5% min(c, 0.035) h);
    --color-panel: oklch(from var(--theme-base-color) 98.5% min(c, 0.025) h);
    --color-surface: oklch(from var(--theme-base-color) 98% min(c, 0.03) h);
    --color-raised: oklch(from var(--theme-base-color) 95.5% min(c, 0.04) h);
    --color-selected: oklch(from var(--theme-base-color) 92% min(c, 0.05) h);
    --color-coolgray-100: var(--color-surface);
    --color-coolgray-200: var(--color-raised);
    --color-coolgray-300: var(--color-selected);
    --color-coolgray-400: oklch(from var(--theme-base-color) 90% min(c, 0.05) h);
    --color-coolgray-500: oklch(from var(--theme-base-color) 87% min(c, 0.055) h);
    --coollabs-canvas: var(--color-app);
    --coollabs-elevated: oklch(from var(--theme-base-color) 98.5% min(c, 0.025) h);
    --coollabs-recessed: var(--color-raised);
    --coollabs-base: oklch(from var(--theme-base-color) 99.3% min(c, 0.018) h);
    --color-content-surface: var(--coollabs-base);
    --coollabs-fill: oklch(from var(--theme-base-color) 91% min(c, 0.05) h);
    --coollabs-line: oklch(from var(--theme-base-color) 82% min(c, 0.055) h);
    --coollabs-hairline: oklch(from var(--theme-base-color) 88% min(c, 0.04) h);
    --color-nav-text: oklch(from var(--theme-base-color) 0.40 min(c, 0.04) h);
    --color-nav-muted: oklch(from var(--theme-base-color) 0.50 min(c, 0.03) h);
    --color-nav-active: oklch(from var(--theme-base-color) 0.22 min(c, 0.05) h);
    --color-log: oklch(from var(--theme-base-color) 96.5% min(c, 0.035) h);
    --color-log-toolbar: oklch(from var(--theme-base-color) 93% min(c, 0.045) h);
    --color-fg: oklch(from var(--theme-base-color) 0.22 min(c, 0.04) h);
    --color-fg-dim: oklch(from var(--theme-base-color) 0.40 min(c, 0.04) h);
    --color-fg-faint: oklch(from var(--theme-base-color) 0.50 min(c, 0.03) h);
    --coollabs-subtle: oklch(from var(--theme-base-color) 0.50 min(c, 0.03) h);
}

html[data-theme="custom"] .control-selected,
html[data-theme="custom"] .logs-viewer-btn-active {
    color: var(--color-accent-foreground);
}

html[data-theme="custom"] * {
    scrollbar-color: var(--theme-scrollbar-thumb) var(--color-panel);
}

html[data-theme="custom"] *::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: var(--theme-scrollbar-thumb);
}

html[data-theme="custom"] *::-webkit-scrollbar-thumb:hover {
    background: var(--theme-bright-color);
}

html[data-theme="custom"] *::-webkit-scrollbar-track {
    background: var(--color-panel);
}

html[data-theme="custom"] .application-settings-navigation {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

html[data-theme="custom"] .application-settings-navigation::-webkit-scrollbar {
    width: 8px;
}

/* Use the same surface recipe as application settings cards for legacy
   translucent cards and tables across the application. */
html[data-theme="custom"] .data-table,
html[data-theme="custom"] .box,
html[data-theme="custom"] .coolbox,
html[data-theme="custom"] .resource-view,
html[data-theme="custom"] [class~="bg-surface"],
html[data-theme="custom"] [class~="dark:bg-surface"],
html[data-theme="custom"] [class~="dark:bg-white/[0.025]"] {
    background-color: var(--color-content-surface) !important;
}

.dark [class~="dark:border-white/[0.07]"],
.dark [class~="dark:border-white/[0.08]"] {
    border-color: var(--coollabs-line) !important;
}

.dark [class~="dark:border-white/[0.06]"] {
    border-color: var(--coollabs-hairline) !important;
}

html[data-theme="custom"] input::placeholder,
html[data-theme="custom"] textarea::placeholder {
    color: var(--theme-placeholder-color) !important;
    /* The token is already a readable light tone; no extra opacity dampening,
       which would drop it back below the contrast floor. */
    opacity: 1;
}

/* Accent text/icons (links, badges, "update available" pill, check marks) use the
   brand color as foreground on dark surfaces. Route them to the clamped, always
   readable token; fills (bg-*) keep the brighter accent + its computed foreground. */
html[data-theme="custom"] :is(
    [class~="text-coollabs"],
    [class~="text-warning"],
    [class~="text-accent"],
    [class~="dark:text-coollabs"],
    [class~="dark:text-warning"]
) {
    color: var(--theme-fg-on-surface) !important;
}

html[data-theme="custom"] [class~="hover:text-coollabs"]:hover,
html[data-theme="custom"] [class~="hover:text-warning"]:hover,
html[data-theme="custom"] [class~="dark:hover:text-warning"]:hover,
html[data-theme="custom"] [class~="dark:hover:text-coollabs"]:hover {
    color: var(--theme-fg-on-surface) !important;
}

/* Light custom theme reaches raw neutral utilities too. Dark mode tints
   everything through the pervasive dark:bg-*/dark:border-* utilities (which
   resolve to --color-* vars the block overrides); light mode has no equivalent,
   so components fall back to hardcoded neutrals. Remap the dominant light
   surface/border utilities to the tinted custom vars so the color reaches the
   whole UI, not just design-system classes. */
html[data-theme="custom"]:not(.dark) :is([class~="bg-white"], [class~="bg-white/95"], [class~="bg-white/80"]) {
    background-color: var(--coollabs-elevated) !important;
}

html[data-theme="custom"]:not(.dark) [class~="bg-neutral-50"] {
    background-color: var(--coollabs-canvas) !important;
}

html[data-theme="custom"]:not(.dark) :is([class~="bg-neutral-100"], [class~="bg-neutral-200"]) {
    background-color: var(--coollabs-fill) !important;
}

html[data-theme="custom"]:not(.dark) [class~="border-neutral-200"] {
    border-color: var(--coollabs-hairline) !important;
}

html[data-theme="custom"]:not(.dark) :is([class~="border-neutral-300"], [class~="border-neutral-100"]) {
    border-color: var(--coollabs-line) !important;
}

html[data-theme="custom"] input:read-only,
html[data-theme="custom"] textarea:read-only,
html[data-theme="custom"] input:disabled,
html[data-theme="custom"] textarea:disabled {
    color: var(--color-fg-dim) !important;
}

/* Public authentication surfaces */
.auth-shell {
    min-height: 100dvh;
    display: flex;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--color-coollabs) 9%, transparent), transparent 34rem),
        var(--coollabs-canvas);
    color: #171717;
}

.dark .auth-shell {
    color: var(--color-fg);
}

.auth-shell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    width: 100%;
    padding: 2rem 1rem;
}

.auth-card {
    width: min(100%, 27rem);
    overflow: hidden;
    border-radius: 10px;
    background: var(--coollabs-elevated);
    box-shadow: 0 0 0 1px var(--coollabs-hairline), 0 20px 60px rgb(0 0 0 / 0.14);
}

.auth-card-heading {
    padding: 1.25rem 1.25rem 1rem;
}

.auth-card-heading h1 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #171717;
}

.dark .auth-card-heading h1 {
    color: var(--color-fg);
}

.auth-card-heading p {
    margin-top: 0.25rem;
    max-width: 38ch;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--coollabs-subtle);
}

.auth-card-body {
    border-radius: 10px;
    padding: 1.25rem;
    background: var(--coollabs-base);
    box-shadow: 0 0 0 1px var(--coollabs-fill);
}

.auth-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--coollabs-subtle);
}

.auth-text-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #525252;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.dark .auth-text-link {
    color: var(--color-fg-dim);
}

.auth-text-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--coollabs-subtle);
    font-size: 0.75rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--coollabs-fill);
}

.auth-guidance {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    background: var(--coollabs-recessed);
    color: var(--coollabs-subtle);
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Public error surfaces (401/404/500/…). Match auth shell canvas + accent. */
.error-page-body {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

.error-shell {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--color-coollabs) 9%, transparent), transparent 34rem),
        var(--coollabs-canvas);
    color: #171717;
}

.dark .error-shell {
    color: var(--color-fg);
}

.error-shell-content {
    width: min(100%, 32rem);
}

.error-code {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-coollabs);
}

.dark .error-code {
    color: var(--color-warning);
}

.error-code-danger {
    color: var(--color-error);
}

.dark .error-code-danger {
    color: var(--color-error);
}

.error-title {
    margin: 1rem 0 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #171717;
}

.dark .error-title {
    color: var(--color-fg);
}

.error-description {
    margin: 0.375rem 0 0;
    max-width: 42ch;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--coollabs-subtle);
}

.error-extra {
    margin-top: 1.25rem;
}

.error-extra .error-message {
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    background: color-mix(in oklab, var(--color-error) 8%, transparent);
    color: var(--color-error);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    word-break: break-word;
}

.error-extra details {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--coollabs-subtle);
}

.error-extra details summary {
    cursor: pointer;
    font-weight: 500;
    color: #525252;
    list-style: none;
}

.dark .error-extra details summary {
    color: var(--color-fg-dim);
}

.error-extra details summary::-webkit-details-marker {
    display: none;
}

.error-extra details summary:hover {
    color: var(--color-accent);
}

.error-extra details ul,
.error-proxy-help ul {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.error-extra details code,
.error-proxy-help code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--coollabs-recessed);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
}

/* Layer card root: elevated shell with a hairline ring. overflow stays
   visible so floating panels (listbox, tooltips) can escape the card. */
.application-settings-section {
    margin: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: 8px;
    border: none;
    background: var(--coollabs-elevated);
    /* crisp ring + a restrained lift so the card separates from the canvas
       (shadcn-style), not a heavy floating shadow */
    box-shadow: 0 0 0 1px var(--coollabs-hairline), 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* keep anchored scrolls (scrollIntoView) clear of the fixed topbar + layer-2 nav */
    scroll-margin-top: 7rem;
}

/* Brief accent ring when a settings nav sub-item scrolls a section into view.
   Use a real border on ::after (not animated multi-layer box-shadow) so the
   ring is the same weight on every side — box-shadow rings look thicker on
   the header edge next to the elevated strip. */
@keyframes application-settings-section-highlight {
    0% {
        opacity: 0;
    }

    15%,
    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.application-settings-section.is-section-highlight {
    position: relative;
}

.application-settings-section.is-section-highlight::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    border: 0.5px solid var(--color-accent);
    pointer-events: none;
    animation: application-settings-section-highlight 500ms ease-out forwards;
}

/* Modals reuse the layer-card shell but size to content on large screens */
@media (min-width: 1024px) {
    .application-settings-section.application-settings-form {
        width: auto;
    }
}

/* Layer card header: compact strip on the shell, subtle title color */
.application-settings-section > :is(header, .application-settings-section-header) {
    display: flex;
    min-height: 3rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 8px 8px 0 0;
    background: var(--coollabs-elevated);
    font-weight: 500;
    color: var(--coollabs-subtle);
}

.application-settings-section > :is(header, .application-settings-section-header) :is(h2, h3) {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0;
    /* Card title is a heading, so give it a readable strength instead of the
       muted --coollabs-subtle (5.66:1 light / 6.98:1 dark). ~8.7:1 in both
       modes (comfortable AAA) while descriptions/labels stay muted. */
    color: oklch(40% 0 0);
}

.dark .application-settings-section > :is(header, .application-settings-section-header) :is(h2, h3) {
    color: var(--color-fg-dim);
}

.application-settings-section > .application-settings-section-header p {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--coollabs-subtle);
}

/* Layer card body: nested rounded panel with base bg. Ring uses the same
   --coollabs-hairline as the card shell (line ~1456) so the body edge and the
   header edge read as one continuous border instead of two different grays
   (fill was lighter than hairline, so the header sides and body sides did not
   match). */
.application-settings-section-body {
    position: relative;
    border-radius: 8px;
    background: var(--coollabs-base);
    box-shadow: 0 0 0 1px var(--coollabs-hairline);
    padding: 1rem;
}

.settings-mobile-header {
    margin-bottom: 1.25rem;
}

.settings-mobile-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.75rem;
    letter-spacing: -0.025em;
    color: #000000;
}

.dark .settings-mobile-title {
    color: #ffffff;
}

.settings-mobile-description {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: #737373;
}

.dark .settings-mobile-description {
    color: var(--coollabs-subtle);
}

/* All settings sidebars share one alignment rule. Keep the sticky offset equal
   to the desktop main-content top padding so the menu does not jump upward
   when it changes from its natural position to sticky positioning. */
.server-settings-workspace > :not(.application-settings-navigation) {
    min-width: 0;
}

@media (min-width: 1280px) {
    /* Fixed like the main sidebar (3rem → bottom); left tracks its width (--sidebar-w).
       Fixed leaves the grid, so the content sibling is pinned to column 2 below. */
    .application-settings-navigation {
        position: fixed;
        top: 3rem;
        left: var(--sidebar-w, 14rem);
        width: calc(210px + 2.5rem);
        height: calc(100dvh - 3rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--coollabs-fill) transparent;
        scrollbar-gutter: stable;
        --rail-fill: var(--coollabs-elevated);
        padding: 0.5rem;
        background: var(--rail-fill);
        border-right: 1px solid var(--coollabs-hairline);
        transition: left 200ms ease;
    }

    .application-settings-navigation ~ * {
        grid-column: 2;
    }

    html:not(.dark) .application-settings-navigation {
        --rail-fill: var(--coollabs-base);
    }

    .application-settings-navigation::-webkit-scrollbar {
        width: 6px;
    }

    .application-settings-navigation::-webkit-scrollbar-track {
        background: transparent;
    }

    .application-settings-navigation::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: var(--coollabs-fill);
    }

    .application-settings-navigation::-webkit-scrollbar-thumb:hover {
        background: var(--coollabs-line);
    }

    /* Embeds: keep the surface, drop the fixed positioning. */
    .application-settings-navigation.is-flush {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        overflow: visible;
        transition: none;
    }
}

/* Honor reduced-motion for the settings nav disclosure/accordion and the mobile
   sidebar sheet: keep open/close functional but drop the height/slide/fade. */
@media (prefers-reduced-motion: reduce) {
    .application-settings-navigation,
    .application-settings-navigation *,
    .mobile-sidebar-sheet * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Field labels */
.application-settings-workspace label,
.application-settings-form label {
    margin-bottom: 0.375rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--coollabs-subtle);
}

/*
 * Labels that sit in a fixed-height control row (with optional helper icon) must not
 * add their own bottom margin — the row wrapper owns spacing so side-by-side inputs align.
 */
.application-settings-workspace .mb-0\!,
.application-settings-form .mb-0\!,
.application-settings-workspace label.mb-0\!,
.application-settings-form label.mb-0\! {
    margin-bottom: 0 !important;
}

/* Inputs & selects: recessed fill + line border (surface hierarchy) */
.application-settings-workspace .input,
.application-settings-workspace .select,
.application-settings-workspace .listbox-trigger,
.application-settings-form .input,
.application-settings-form .select,
.application-settings-form .listbox-trigger {
    height: 2rem;
    border-radius: 8px;
    border-color: var(--coollabs-line);
    background-color: var(--coollabs-recessed);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    box-shadow: none !important;
}

/* Reserve the trailing area used by the native select chevron. */
.application-settings-workspace .select,
.application-settings-form .select {
    padding-right: 2.5rem;
}

@media (max-width: 767px) {
    .application-settings-workspace .select,
    .application-settings-form .select {
        font-size: 0.75rem !important;
        line-height: 1.25rem;
    }
}

/* Keep password toggle / copy button clear of the value inside denser settings inputs */
.application-settings-workspace .input.input-with-password-toggle,
.application-settings-workspace .input[type="password"],
.application-settings-workspace .input.input-with-copy-button,
.application-settings-form .input.input-with-password-toggle,
.application-settings-form .input[type="password"],
.application-settings-form .input.input-with-copy-button {
    padding-right: 2.5rem;
}

.application-settings-workspace .input:focus-visible,
.application-settings-workspace .select:focus-visible,
.application-settings-form .input:focus-visible,
.application-settings-form .select:focus-visible {
    border-color: var(--color-accent);
    box-shadow: none !important;
}

.application-settings-workspace textarea.input,
.application-settings-form textarea.input {
    height: auto;
    min-height: 5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.25rem;
}

.application-settings-workspace .form-control,
.application-settings-form .form-control {
    border-radius: 8px;
}

.dark .application-settings-workspace .form-control:hover,
.dark .application-settings-form .form-control:hover {
    background: transparent;
}

/* Unified resource heading bar: hide tab-strip scrollbars; menus/actions stay overflow-visible for dropdowns */
.resource-heading-navbar {
    overflow: visible;
}

.resource-heading-tabs {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/legacy Edge */
}

.resource-heading-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
    width: 0;
    height: 0;
}

/*
 * Kumo-style overflow controls for resource heading tabs.
 * Circular chevrons sit over gradient fades when more tabs are off-screen.
 */
.resource-heading-tabs-scroller {
    --resource-heading-tabs-fade: oklch(97.02% 0 0); /* neutral-100, matches pill track */
}

.dark .resource-heading-tabs-scroller {
    /* Matches dark:bg-white/[0.035] pill track + panel so fade blends */
    --resource-heading-tabs-fade: color-mix(in srgb, var(--color-panel, var(--md-stone-950)) 96.5%, white); /* MapleDeploy branding: stone remap */
}

.resource-heading-tabs-control {
    position: absolute;
    inset-block: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.resource-heading-tabs-control.is-visible {
    pointer-events: auto;
    opacity: 1;
}

.resource-heading-tabs-control.is-start {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(
        to right,
        var(--resource-heading-tabs-fade) 35%,
        color-mix(in srgb, var(--resource-heading-tabs-fade) 85%, transparent) 70%,
        transparent
    );
}

.resource-heading-tabs-control.is-end {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(
        to left,
        var(--resource-heading-tabs-fade) 35%,
        color-mix(in srgb, var(--resource-heading-tabs-fade) 85%, transparent) 70%,
        transparent
    );
}

.resource-heading-tabs-control-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline: 0.25rem;
    border-radius: 9999px;
    color: #737373;
    background: var(--coollabs-base);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.08);
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.dark .resource-heading-tabs-control-icon {
    color: var(--color-fg-dim, #a8a29e); /* MapleDeploy branding: stone remap */
    background: var(--color-raised, #191615); /* MapleDeploy branding: stone remap */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.resource-heading-tabs-control:hover .resource-heading-tabs-control-icon,
.resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon {
    color: #000000;
    background: #ffffff;
}

.dark .resource-heading-tabs-control:hover .resource-heading-tabs-control-icon,
.dark .resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon {
    color: var(--color-fg, #fafaf9); /* MapleDeploy branding: stone remap */
    background: var(--color-raised, #191615); /* MapleDeploy branding: stone remap */
}

.resource-heading-tabs-control:focus {
    outline: none;
}

.resource-heading-tabs-control:focus-visible .resource-heading-tabs-control-icon {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--color-coollabs, #d52b1f) 45%, transparent), /* MapleDeploy branding */
        0 0 0 1px rgba(0, 0, 0, 0.08);
}

.resource-heading-menus,
.resource-heading-actions {
    overflow: visible;
}

.resource-heading-overflow {
    display: inline-flex;
    align-items: center;
}

.resource-heading-overflow-items {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.resource-heading-overflow-items.is-measuring {
    display: flex !important;
    visibility: hidden !important;
    position: absolute !important;
    inset: auto auto 0 0 !important;
    flex-direction: row !important;
    width: max-content !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.resource-heading-overflow.is-collapsed .resource-heading-overflow-items > .button,
.resource-heading-overflow.is-collapsed .resource-heading-overflow-items > a.button {
    width: 100%;
    justify-content: flex-start;
    height: auto;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
}

/* Heading action group: buttons + dropdown triggers styled like the tabs */
.application-heading-actions .button,
.application-heading-actions .app-tab,
.application-heading-actions .relative > button[x-ref='trigger'] {
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0.625rem;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #737373;
    min-width: 0;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.dark .application-heading-actions .button,
.dark .application-heading-actions .app-tab,
.dark .application-heading-actions .relative > button[x-ref='trigger'] {
    color: var(--color-fg-dim);
}

.application-heading-actions .button:hover:not(:disabled),
.application-heading-actions .app-tab:hover,
.application-heading-actions .relative > button[x-ref='trigger']:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

.dark .application-heading-actions .button:hover:not(:disabled),
.dark .application-heading-actions .app-tab:hover,
.dark .application-heading-actions .relative > button[x-ref='trigger']:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-fg);
}

.application-heading-actions .button-highlighted,
.dark .application-heading-actions .button-highlighted,
.application-heading-actions .button-highlighted:hover:not(:disabled),
.dark .application-heading-actions .button-highlighted:hover:not(:disabled) {
    @apply button-highlighted;
}

/*
 * Active primary tab styles.
 * The base rules above set background/color/box-shadow with higher specificity
 * than Tailwind utilities (bg-warning/15, text-warning, ring-*), so active
 * tabs need an explicit override or they look identical to inactive ones.
 */
.application-heading-actions .app-tab[aria-current='page'],
.application-heading-actions .app-tab.app-tab-active {
    background: color-mix(in srgb, var(--color-coollabs) 10%, transparent);
    color: var(--color-coollabs);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-coollabs) 25%, transparent);
}

.application-heading-actions .app-tab[aria-current='page']:hover,
.application-heading-actions .app-tab.app-tab-active:hover {
    background: color-mix(in srgb, var(--color-coollabs) 15%, transparent);
    color: var(--color-coollabs);
}

.dark .application-heading-actions .app-tab[aria-current='page'],
.dark .application-heading-actions .app-tab.app-tab-active {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 25%, transparent);
}

.dark .application-heading-actions .app-tab[aria-current='page']:hover,
.dark .application-heading-actions .app-tab.app-tab-active:hover {
    background: color-mix(in srgb, var(--color-warning) 20%, transparent);
    color: var(--color-warning);
}

.application-heading-actions .relative > button[x-ref='trigger'] {
    padding-right: 0.625rem;
}

/* dropdown chevron: inline instead of absolutely positioned */
.application-heading-actions .relative > button[x-ref='trigger'] > svg {
    position: static;
    margin: 0;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.6;
}

/* dropdown label: kill the h-full/flex-col title wrapper so text centers
   on the same baseline as the sibling buttons */
.application-heading-actions .relative > button[x-ref='trigger'] > span {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    line-height: 1.25;
}

.application-heading-actions .button svg,
.application-heading-actions .app-tab svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.split-action {
    display: inline-flex;
}

.split-action-main,
.split-action-caret {
    @apply button-highlighted;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2rem;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.split-action-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0.625rem;
    border-radius: 6px 0 0 6px;
}

.split-action-caret {
    flex-shrink: 0;
    width: 1.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0 6px 6px 0;
}

.split-action > .split-action-main:only-of-type {
    border-radius: 6px;
}

.split-action-main:disabled,
.split-action-caret:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.split-action-main:focus-visible,
.split-action-caret:focus-visible {
    outline: none;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 40%, transparent);
}

.application-heading-actions .split-action-main,
.application-heading-actions .split-action-caret {
    height: 1.75rem;
}

/* Custom listbox (replaces native <select>) */
.listbox-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    height: 2.25rem;
    padding: 0 0.625rem 0 0.75rem;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--coollabs-line);
    background: var(--coollabs-recessed);
    font-size: 0.875rem;
    color: #000000;
    text-align: left;
    cursor: pointer;
}

/* Selected value: fill remaining space and ellipsize long labels
   (multi-select summaries, long option names, timezone paths, etc.). */
.listbox-trigger-label {
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.dark .listbox-trigger {
    color: var(--color-fg);
}

.listbox-trigger:disabled {
    cursor: not-allowed;
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-400);
}

.dark .listbox-trigger:disabled {
    background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    color: var(--color-fg-faint);
}

.listbox-trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: none;
}

.listbox-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* At least as wide as the trigger, but never narrower than a readable
       menu. Unlayered so it wins over layered Tailwind min-w-* utilities —
       floating action menus should still set an explicit width with ! when
       they need a fixed size (e.g. w-52!). */
    min-width: max(100%, 13rem);
    width: max-content;
    max-width: min(24rem, calc(100vw - 1.5rem));
    max-height: 16rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--coollabs-line);
    background: var(--coollabs-recessed);
    box-shadow: var(--shadow-dropdown);
}

@media (max-width: 767px) {
    /* The mobile top bar's backdrop filter makes it the containing block for
       fixed descendants. Keep this menu anchored below its trigger instead
       of centering it within the short top bar. */
    .listbox-panel.top-user-menu-panel {
        position: absolute !important;
        top: calc(100% + 0.25rem) !important;
        right: 0 !important;
        left: auto !important;
        max-height: calc(100dvh - 4.5rem) !important;
        overflow-y: auto !important;
        transform: none !important;
    }
}

.listbox-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 2rem;
    height: auto;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #000000;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.dark .listbox-option {
    color: var(--color-fg);
}

.listbox-option:hover {
    background: var(--coollabs-fill);
}

.data-table-row-active {
    background: var(--coollabs-fill);
    color: var(--coollabs-fg);
}

.listbox-option-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.listbox-option-disabled:hover {
    background: transparent;
}

/* Searchable listbox: sticky search field + scrollable options */
.searchable-listbox-panel {
    max-height: 18rem;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.searchable-listbox-search {
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid var(--coollabs-line);
    padding: 0.375rem;
}

.searchable-listbox-search-input {
    width: 100%;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid var(--coollabs-line);
    background: var(--coollabs-recessed);
    padding: 0 0.5rem 0 2rem;
    font-size: 0.8125rem;
    color: #000000;
    box-shadow: none;
}

.dark .searchable-listbox-search-input {
    color: var(--color-fg);
}

.searchable-listbox-search-input::placeholder {
    color: var(--color-fg-faint, #78716c); /* MapleDeploy branding: stone remap */
}

.searchable-listbox-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: none;
}

/* Hide native WebKit search clear so custom clear buttons are not doubled */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.searchable-listbox-options {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 14rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem;
}

.searchable-listbox-empty {
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-fg-dim, #78716c); /* MapleDeploy branding: stone remap */
}

/* Flush layer-card body (tables and other full-bleed content) */
.application-settings-section-body.is-flush {
    padding: 0;
}

/* Empty states inside cards keep the same inset as other card content. */
.application-settings-section-body:has(> .empty-state:only-child),
.application-settings-section-body.is-flush:has(> .empty-state:only-child),
.application-settings-section-body.is-flush > div:has(> .empty-state:only-child) {
    padding: 1rem;
}

.empty-state {
    background: var(--coollabs-base);
}

.loading-state-card {
    border: 1px dashed var(--coollabs-line);
    border-radius: 12px;
    background: var(--coollabs-base);
}

.application-settings-section-body.is-flush .empty-state,
.application-settings-section-body:has(> .empty-state:only-child) .empty-state,
.application-settings-section > .empty-state {
    margin: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Centered process dialog (startup / activity logs) — full-height log body.
   Override application-settings-form's `width: auto` so empty/waiting states
   keep a usable panel instead of shrinking to the title. */
.process-dialog {
    width: 100% !important;
    min-height: min(70dvh, 28rem);
}

.process-dialog-body {
    border-radius: 0 0 8px 8px;
    min-height: 0;
    flex: 1 1 auto;
}

.process-dialog-body > * {
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}

.validation-installation-logs {
    border: 1px solid var(--coollabs-fill);
}

.checkpoint-scroll-fade::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 2rem;
    background: linear-gradient(to left, var(--coollabs-base), transparent);
    pointer-events: none;
}

@media (max-width: 639px) {
    .process-dialog-mobile-fullscreen {
        height: 100dvh !important;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: inset 0 0 0 1px var(--coollabs-hairline) !important;
    }

    .process-dialog-mobile-fullscreen .process-dialog-body {
        border-radius: 0;
    }
}

/* Data table (layer-card body, full-bleed) */
.data-table {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.data-table-header {
    display: grid;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    height: 2.5rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--coollabs-subtle);
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--coollabs-fill);
    border-radius: 8px 8px 0 0;
}

.dark .data-table-header {
    background: rgba(255, 255, 255, 0.02);
}

.data-table > .env-table-item {
    border-bottom: 1px solid var(--coollabs-fill);
}

.data-table > .env-table-item:last-child {
    border-bottom: none;
}

.data-table-row {
    display: grid;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    min-height: 3rem;
    transition: background-color 0.15s;
}

.data-table-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .data-table-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.env-table-grid {
    grid-template-columns: minmax(14rem, 2.5fr) 4.8rem 6rem 4rem 4.5rem 4.8rem 4.2rem 3rem;
}

.environment-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.environment-table-scroll .env-table-grid {
    min-width: 53rem;
}

.env-table-grid.env-table-grid-no-type {
    grid-template-columns: minmax(14rem, 2.5fr) 4.8rem 4rem 4.5rem 4.8rem 4.2rem 3rem;
}

@media (max-width: 768px) {
    .environment-table-scroll .env-table-grid {
        min-width: 0;
    }

    .data-table-header.env-table-grid {
        display: none;
    }

    .data-table-row.env-table-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .data-table-row.env-table-grid > :not(:first-child):not(:last-child) {
        display: none;
    }

    .data-table-row.env-table-grid > :last-child {
        display: block;
        justify-self: end;
    }
}

/* Shared variables only store value shape (multiline), not per-resource flags. */
.env-table-grid-shared {
    grid-template-columns: minmax(0, 1.6fr) 6rem minmax(0, 1fr) 4.5rem 3rem;
}

/* Shared env vars collapse secondary columns on tablet and use cards on phone. */
@media (max-width: 1100px) {
    .env-table-grid-shared {
        grid-template-columns: minmax(0, 1.4fr) 6rem minmax(0, 1fr) 3rem;
        gap: 0.75rem;
    }

    /* Hide Multiline (4 of 5) */
    .env-table-grid-shared > :nth-child(4) {
        display: none;
    }
}

@media (max-width: 900px) {
    .env-table-grid-shared {
        grid-template-columns: minmax(0, 1fr) 6rem 3rem;
    }

    .env-table-grid-shared > :nth-child(3) {
        display: none;
    }
}

@media (max-width: 640px) {
    .data-table-header.env-table-grid-shared {
        display: none;
    }

    .data-table-row.env-table-grid-shared {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'name actions'
            'meta actions';
        gap: 0.35rem 0.75rem;
        align-items: start;
        padding: 0.875rem 1rem;
        min-height: 0;
    }

    /* Name */
    .data-table-row.env-table-grid-shared > :nth-child(1) {
        grid-area: name;
        min-width: 0;
        flex-wrap: wrap;
    }

    .data-table-row.env-table-grid-shared > :nth-child(1) .env-key-label {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Type column */
    .data-table-row.env-table-grid-shared > :nth-child(2) {
        display: none !important;
    }

    /* Comment / flags already hidden; keep meta area for optional second line */
    .data-table-row.env-table-grid-shared > :nth-child(3),
    .data-table-row.env-table-grid-shared > :nth-child(4) {
        display: none !important;
    }

    /* Actions */
    .data-table-row.env-table-grid-shared > :nth-child(5) {
        grid-area: actions;
        align-self: center;
        justify-self: end;
    }

}

.env-managed-desktop {
    display: flex;
}

.domains-table-grid {
    grid-template-columns: minmax(0, 1.8fr) 8.5rem 10rem 11rem 6.5rem;
}

.domains-table-grid-service {
    grid-template-columns: minmax(0, 1.8fr) 8.5rem 10rem 6.5rem;
}

.domains-table-grid-compose {
    grid-template-columns: minmax(0, 1.6fr) minmax(6rem, 0.8fr) 8.5rem 10rem 11rem 6.5rem;
}

.domains-mobile-label {
    display: none;
}

/* Domains table: collapse secondary columns on tablet/phone */
@media (max-width: 900px) {
    .domains-table-grid {
        grid-template-columns: minmax(0, 1fr) 8.25rem 9rem 10rem 5.5rem;
        gap: 0.75rem;
    }

    .domains-table-grid-service {
        grid-template-columns: minmax(0, 1fr) 8.25rem 9rem 5.5rem;
        gap: 0.75rem;
    }

    .domains-table-grid-compose {
        grid-template-columns: minmax(0, 1fr) 8.25rem 9rem 10rem 5.5rem;
        gap: 0.75rem;
    }

    /* Hide "Service" */
    .domains-table-grid-compose > :nth-child(2) {
        display: none;
    }
}

@media (max-width: 768px) {
    .data-table-header.domains-table-grid,
    .data-table-header.domains-table-grid-service,
    .data-table-header.domains-table-grid-compose {
        display: none;
    }

    .data-table-row.domains-table-grid,
    .data-table-row.domains-table-grid-service,
    .data-table-row.domains-table-grid-compose {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'domain domain'
            'meta actions'
            'indexing indexing'
            'direction direction';
        gap: 0.5rem 0.75rem;
        align-items: start;
        padding: 0.75rem;
        min-height: 0;
    }

    .data-table-row.domains-row-without-direction {
        grid-template-areas:
            'domain domain'
            'meta actions'
            'indexing indexing';
    }

    .data-table-row.domains-table-grid.domains-row-without-direction > :nth-child(4),
    .data-table-row.domains-table-grid-compose.domains-row-without-direction > :nth-child(5) {
        display: none;
    }

    /* Domain cell */
    .data-table-row.domains-table-grid > :nth-child(1),
    .data-table-row.domains-table-grid-service > :nth-child(1),
    .data-table-row.domains-table-grid-compose > :nth-child(1) {
        grid-area: domain;
        min-width: 0;
    }

    .data-table-row.domains-table-grid > :nth-child(1) a,
    .data-table-row.domains-table-grid-service > :nth-child(1) a,
    .data-table-row.domains-table-grid-compose > :nth-child(1) a {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Non-compose: 1 Domain, 2 DNS, 3 Indexing, 4 Direction, 5 Actions */
    .data-table-row.domains-table-grid > :nth-child(2) {
        grid-area: meta;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
    }

    .data-table-row.domains-table-grid > :nth-child(3) {
        grid-area: indexing;
    }

    .data-table-row.domains-table-grid > :nth-child(4) {
        grid-area: direction;
    }

    .data-table-row.domains-table-grid > :nth-child(5) {
        grid-area: actions;
        align-self: center;
    }

    /* Compose service group: 1 Domain, 2 DNS, 3 Indexing, 4 Actions */
    .data-table-row.domains-table-grid-service > :nth-child(2) {
        grid-area: meta;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
    }

    .data-table-row.domains-table-grid-service > :nth-child(3) {
        grid-area: indexing;
    }

    .data-table-row.domains-table-grid-service > :nth-child(4) {
        grid-area: actions;
        align-self: center;
    }

    /* Compose: 1 Domain, 2 Service, 3 DNS, 4 Indexing, 5 Direction, 6 Actions */
    .data-table-row.domains-table-grid-compose > :nth-child(2) {
        display: none !important;
    }

    .data-table-row.domains-table-grid-compose > :nth-child(3) {
        grid-area: meta;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
    }

    .data-table-row.domains-table-grid-compose > :nth-child(4) {
        grid-area: indexing;
    }

    .data-table-row.domains-table-grid-compose > :nth-child(5) {
        grid-area: direction;
    }

    .data-table-row.domains-table-grid-compose > :nth-child(6) {
        grid-area: actions;
        align-self: center;
    }

    .domains-mobile-label {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 500;
        line-height: 1rem;
        color: var(--coollabs-subtle);
    }

    .data-table-row.domains-table-grid .listbox-trigger,
    .data-table-row.domains-table-grid-compose .listbox-trigger {
        height: 2rem;
        font-size: 0.8125rem;
    }

    /* Service name as badge under domain on mobile (compose only) */
    .data-table-row.domains-table-grid-compose .domains-service-mobile {
        display: inline-flex !important;
    }
}

.domains-service-mobile {
    display: none;
}

@media (max-width: 768px) {
    .domains-service-desktop {
        display: none !important;
    }
}

.backup-table-grid {
    grid-template-columns: minmax(10rem, 1.7fr) 6rem minmax(7rem, 0.8fr) 7.5rem 6.5rem minmax(8rem, 1fr) 5rem;
    min-width: 50rem;
}

.service-backup-table-grid {
    grid-template-columns: minmax(10rem, 1.7fr) 6rem minmax(7rem, 0.8fr) 7.5rem 6.5rem minmax(8rem, 1fr) 12.5rem;
    width: 100%;
}

.data-table-row.service-backup-table-grid {
    background: var(--coollabs-base);
    border-bottom: 1px solid var(--coollabs-fill);
}

.data-table-row.service-backup-table-grid:last-child {
    border-bottom: 0;
}

.data-table-row.service-backup-table-grid:hover {
    background: color-mix(in srgb, var(--coollabs-base) 98%, black);
}

.dark .data-table-row.service-backup-table-grid:hover {
    background: color-mix(in srgb, var(--coollabs-base) 98%, white);
}

/* Persistent storage volumes: Name | Source | Destination | [PR suffix] | Backup | [Actions] */
.volumes-table-grid-readonly {
    grid-template-columns: minmax(12rem, 1.5fr) minmax(8rem, 1fr) minmax(8rem, 1fr) 5rem;
}

.volumes-table-grid {
    grid-template-columns: minmax(10rem, 1.4fr) minmax(6rem, 1fr) minmax(6rem, 1fr) 5rem 12rem;
}

.volumes-table-grid-with-pr {
    grid-template-columns: minmax(9rem, 1.2fr) minmax(5.5rem, 0.85fr) minmax(5.5rem, 0.85fr) 9.25rem 5rem 12rem;
}

.volumes-mobile-label {
    display: none;
}

/*
 * Same tokens as .application-settings-form label (13px / medium / subtle).
 * Do not use text-sm (14px) — settings labels override Tailwind to 13px.
 */
.volumes-mobile-label.is-visible,
.volumes-field-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1rem;
    color: var(--coollabs-subtle);
}

/* Compact inputs inside volume table rows (desktop) */
.data-table-row.volumes-table-grid .input,
.data-table-row.volumes-table-grid-with-pr .input,
.data-table-row.volumes-table-grid .listbox-trigger,
.data-table-row.volumes-table-grid-with-pr .listbox-trigger {
    min-height: 2rem;
    height: 2rem;
    font-size: 12px;
}

.data-table-row.volumes-table-grid .listbox-trigger,
.data-table-row.volumes-table-grid-with-pr .listbox-trigger {
    padding-inline: 0.5rem;
}

@media (max-width: 1100px) {
    .volumes-table-grid {
        grid-template-columns: minmax(9rem, 1.2fr) minmax(6rem, 1fr) 5rem 12rem;
    }

    .volumes-table-grid > .volumes-col-source,
    .data-table-header.volumes-table-grid > .volumes-col-source {
        display: none;
    }

    .volumes-table-grid-with-pr {
        grid-template-columns: minmax(9rem, 1.1fr) minmax(6rem, 1fr) 8.5rem 5rem 12rem;
    }

    .volumes-table-grid-with-pr > .volumes-col-source,
    .data-table-header.volumes-table-grid-with-pr > .volumes-col-source {
        display: none;
    }

    .volumes-table-grid-readonly {
        grid-template-columns: minmax(10rem, 1.4fr) minmax(8rem, 1fr) 5rem;
    }

    .volumes-table-grid-readonly > .volumes-col-source,
    .data-table-header.volumes-table-grid-readonly > .volumes-col-source {
        display: none;
    }
}

/* Phone: stacked card rows with per-field labels (table headers hidden) */
@media (max-width: 768px) {
    .data-table-header.volumes-table-grid,
    .data-table-header.volumes-table-grid-with-pr,
    .data-table-header.volumes-table-grid-readonly {
        display: none;
    }

    .data-table-row.volumes-table-grid,
    .data-table-row.volumes-table-grid-with-pr,
    .data-table-row.volumes-table-grid-readonly {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        padding: 0.875rem 1rem;
        min-height: 0;
    }

    .data-table-row.volumes-table-grid > .volumes-col-source,
    .data-table-row.volumes-table-grid-with-pr > .volumes-col-source,
    .data-table-row.volumes-table-grid-with-pr > .volumes-col-pr,
    .data-table-row.volumes-table-grid-readonly > .volumes-col-source {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
        width: 100%;
    }

    .data-table-row.volumes-table-grid > *,
    .data-table-row.volumes-table-grid-with-pr > *,
    .data-table-row.volumes-table-grid-readonly > * {
        width: 100%;
        min-width: 0;
    }

    /* Match .application-settings-form label (13px), not Tailwind text-sm (14px) */
    .volumes-mobile-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        line-height: 1rem;
        color: var(--coollabs-subtle);
    }

    .volumes-cell-name,
    .volumes-col-backup,
    .volumes-cell-dest,
    .volumes-cell-actions {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
        width: 100%;
    }

    .volumes-col-backup {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .volumes-cell-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-top: 0.25rem;
    }

    .data-table-row.volumes-table-grid .input,
    .data-table-row.volumes-table-grid-with-pr .input,
    .data-table-row.volumes-table-grid .listbox-trigger,
    .data-table-row.volumes-table-grid-with-pr .listbox-trigger {
        min-height: 2.25rem;
        height: 2.25rem;
        font-size: 13px;
    }
}

.deployment-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.deployment-table-grid {
    min-width: 59rem;
    grid-template-columns: 7.5rem minmax(7rem, 0.8fr) minmax(12rem, 1.7fr) minmax(8rem, 0.9fr) 6.5rem minmax(7rem, 0.8fr);
}

@media (min-width: 1024px) {
    .deployment-table-scroll {
        overflow-x: visible;
    }

    .deployment-table-grid {
        min-width: 0;
    }
}

.dashboard-deployment-table-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(6.25rem, 0.75fr) 10rem 8rem;
}

.team-members-table-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) 7rem minmax(10rem, 0.9fr);
}

.team-members-table-grid-2fa {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) 7rem 4rem minmax(10rem, 0.9fr);
}

.admin-users-table-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 5rem;
}

.api-tokens-table-grid {
    grid-template-columns: minmax(9rem, 1.15fr) minmax(14rem, 1.9fr) 7rem 6.5rem 6.5rem 5.5rem;
}

.scheduled-executions-table-grid {
    grid-template-columns: 5.5rem minmax(9rem, 1fr) minmax(7rem, 0.7fr) 8.5rem 5rem minmax(12rem, 1.5fr);
}

.scheduler-runs-table-grid {
    grid-template-columns: 9rem minmax(12rem, 1.5fr) 6rem 6rem 6rem;
}

.skipped-jobs-table-grid {
    grid-template-columns: 9rem 7rem minmax(10rem, 1fr) minmax(12rem, 1.4fr);
}

.server-resources-managed-table-grid {
    grid-template-columns: minmax(10rem, 1.3fr) minmax(8rem, 1fr) minmax(8rem, 1fr) 8rem 9.5rem;
}

.server-resources-unmanaged-table-grid {
    grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 1.5fr) 7rem minmax(9rem, auto);
}

.package-updates-table-grid {
    grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) 6rem;
}

.scheduled-backups-table-grid {
    grid-template-columns: minmax(10rem, 1.25fr) 8rem minmax(9rem, 1fr) 6rem 5rem;
}

.backup-executions-table-grid {
    grid-template-columns: 6.5rem minmax(7rem, 0.8fr) minmax(14rem, 1.5fr) 7rem 5rem 4rem minmax(8rem, 1fr) 5rem;
    gap: 0.75rem;
    min-width: 66rem;
}

.backup-executions-table-scroll {
    overflow-x: auto;
}

.backup-execution-row:last-child > .data-table-row {
    border-bottom: 0;
}

.volume-backup-executions-grid {
    grid-template-columns: 7.5rem minmax(0, 1fr) 8.5rem 7rem 9rem minmax(9rem, 0.7fr);
    min-width: 50rem;
}

.clone-destinations-table-grid {
    grid-template-columns: 2rem minmax(10rem, 1fr) minmax(10rem, 1fr);
}

.clone-resources-table-grid {
    grid-template-columns: minmax(10rem, 1fr) 7rem minmax(12rem, 1.5fr);
}

.admin-search-table-grid {
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.2fr) 8rem 7rem;
}

@media (max-width: 900px) {
    .team-members-table-grid {
        grid-template-columns: minmax(0, 1fr) 7rem 7rem;
    }

    .team-members-table-grid-2fa {
        grid-template-columns: minmax(0, 1fr) 7rem 4rem 7rem;
    }

    .team-members-table-grid > :nth-child(2) {
        display: none;
    }

    .api-tokens-table-grid {
        grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.3fr) 6.5rem 4.5rem;
    }

    .api-tokens-table-grid > :nth-child(3),
    .api-tokens-table-grid > :nth-child(4) {
        display: none;
    }

    .scheduled-executions-table-grid {
        grid-template-columns: 5.5rem minmax(8rem, 1fr) 8.5rem minmax(10rem, 1.3fr);
    }

    .scheduled-executions-table-grid > :nth-child(3),
    .scheduled-executions-table-grid > :nth-child(5) {
        display: none;
    }

    .server-resources-managed-table-grid {
        grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 0.8fr) 8rem 9.5rem;
    }

    .server-resources-managed-table-grid > :nth-child(3) {
        display: none;
    }

    .backup-executions-table-grid {
        grid-template-columns: 7.5rem minmax(9rem, 0.8fr) minmax(14rem, 1.5fr) 8rem 6rem minmax(9rem, auto);
    }

    .backup-executions-table-grid > :nth-child(6),
    .backup-executions-table-grid > :nth-child(7) {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Keep header actions compact; log sections override via .logs-settings-section.
       Only stretch when the actions row needs the full width (multi-control toolbars). */
    .application-settings-section:not(.logs-settings-section) > :is(header, .application-settings-section-header) > div:nth-child(2) {
        width: 100%;
    }

    .team-members-table-grid {
        grid-template-columns: minmax(0, 1fr) 6.5rem;
    }

    .team-members-table-grid-2fa {
        grid-template-columns: minmax(0, 1fr) 4rem 6.5rem;
    }

    .team-members-table-grid > :nth-child(3) {
        display: none;
    }

    .admin-users-table-grid {
        grid-template-columns: minmax(0, 1fr) 5rem;
    }

    .admin-users-table-grid > :nth-child(2) {
        display: none;
    }

    .api-tokens-table-grid {
        grid-template-columns: minmax(0, 1fr) 6.5rem 4.5rem;
    }

    .api-tokens-table-grid > :nth-child(2) {
        display: none;
    }

    .scheduled-executions-table-grid {
        grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem;
    }

    .scheduled-executions-table-grid > :nth-child(6) {
        display: none;
    }

    .scheduler-runs-table-grid {
        grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem;
    }

    .scheduler-runs-table-grid > :nth-child(3),
    .scheduler-runs-table-grid > :nth-child(4) {
        display: none;
    }

    .skipped-jobs-table-grid {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }

    .skipped-jobs-table-grid > :nth-child(2),
    .skipped-jobs-table-grid > :nth-child(4) {
        display: none;
    }

    /* Name + Status only — fixed Type/Status tracks were crushing Name into "NameType". */
    .server-resources-managed-table-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
    }

    .server-resources-managed-table-grid > :nth-child(2),
    .server-resources-managed-table-grid > :nth-child(3),
    .server-resources-managed-table-grid > :nth-child(4) {
        display: none;
    }

    /* Name + Actions only — Status badge + action buttons overcrowded the row. */
    .server-resources-unmanaged-table-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.75rem;
    }

    .server-resources-unmanaged-table-grid > :nth-child(2),
    .server-resources-unmanaged-table-grid > :nth-child(3) {
        display: none;
    }

    .package-updates-table-grid {
        grid-template-columns: minmax(0, 1fr) 5rem;
    }

    .package-updates-table-grid > :nth-child(2) {
        display: none;
    }

    .scheduled-backups-table-grid {
        grid-template-columns: minmax(0, 1fr) 8rem 5rem;
    }

    .scheduled-backups-table-grid > :nth-child(3),
    .scheduled-backups-table-grid > :nth-child(4) {
        display: none;
    }

    .backup-executions-table-grid {
        grid-template-columns: 7.5rem 9rem minmax(14rem, 1fr) minmax(7rem, auto);
        min-width: 42rem;
    }

    .backup-executions-table-grid > :nth-child(4),
    .backup-executions-table-grid > :nth-child(5),
    .backup-executions-table-grid > :nth-child(6),
    .backup-executions-table-grid > :nth-child(7) {
        display: none;
    }

    .clone-destinations-table-grid {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .clone-destinations-table-grid > :nth-child(3) {
        display: none;
    }

    .clone-resources-table-grid {
        grid-template-columns: minmax(0, 1fr) 7rem;
    }

    .clone-resources-table-grid > :nth-child(3) {
        display: none;
    }

    .admin-search-table-grid {
        grid-template-columns: minmax(0, 1fr) 7rem;
    }

    .admin-search-table-grid > :nth-child(2),
    .admin-search-table-grid > :nth-child(3) {
        display: none;
    }
}

.data-table-cell-check {
    display: flex;
    justify-content: center;
    color: #171717;
}

.dark .data-table-cell-check {
    color: var(--color-fg);
}

.data-table-cell-dash {
    display: flex;
    justify-content: center;
    color: #a3a3a3;
}

.dark .data-table-cell-dash {
    color: var(--color-fg-faint);
}

/* Shared logs viewer (deployment + runtime) — mobile-first toolbar
   Mobile stacks: search → meta → full-width actions (no side-by-side overlap). */
.logs-viewer {
    background: var(--coollabs-base);
    color: #262626;
}

.dark .logs-viewer {
    background: var(--color-log);
    color: #f5f5f4; /* MapleDeploy branding: stone remap (stone-100) */
}

.logs-viewer-toolbar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
    padding: 0.5rem 0.75rem;
}

.dark .logs-viewer-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

html[data-theme="custom"] .logs-viewer-toolbar {
    border-bottom-color: var(--coollabs-line);
    background: var(--color-log-toolbar);
}

html[data-theme="custom"] .logs-viewer-timestamp {
    color: var(--color-fg-faint);
}

.logs-viewer-toolbar-controls {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.logs-viewer-primary {
    display: flex;
    min-width: 0;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
}

.logs-viewer-primary .logs-viewer-actions {
    width: auto;
    flex: 1 1 auto;
}

.logs-viewer-search {
    position: relative;
    min-width: 0;
    width: 100%;
}

/* Search field uses the same pl-8!/pr-8! + z-10 icon pattern as server/project
   list filters. Avoid .input here — settings form .input padding (0.75rem)
   overrides custom padding and makes the search icon overlap the placeholder. */

.logs-viewer-meta {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}

/* Compact lines control (runtime/proxy/sentinel logs) */
.logs-viewer-lines {
    display: inline-flex;
    min-width: 0;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
}

.logs-viewer-lines-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #737373;
    white-space: nowrap;
}

.dark .logs-viewer-lines-label {
    color: var(--color-fg-faint, #756d67); /* MapleDeploy branding: stone remap */
}

.logs-viewer-lines-input {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
    max-width: 5rem !important;
    height: 2rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.375rem !important;
    font-size: 0.75rem !important;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.logs-viewer-lines-input::-webkit-outer-spin-button,
.logs-viewer-lines-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Compact badge that fits the dark logs chrome */
.logs-viewer-status-badge {
    height: 1.5rem !important;
    flex-shrink: 0;
    border-color: var(--color-neutral-200) !important;
    background: white !important;
    padding-inline: 0.5rem !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    color: var(--color-neutral-700) !important;
}

.dark .logs-viewer-status-badge {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #d6d3d1 !important; /* MapleDeploy branding: stone remap (stone-300) */
}

/* Section header status (proxy/sentinel) stays inline with title on mobile */
.logs-settings-section > :is(header, .application-settings-section-header) {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.logs-settings-section > :is(header, .application-settings-section-header) > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.logs-settings-section > :is(header, .application-settings-section-header) > div:nth-child(2) {
    width: auto !important;
    flex-shrink: 0;
    margin-left: auto;
}

.logs-section-status-badge {
    height: 1.5rem !important;
    padding-inline: 0.5rem !important;
    font-size: 0.6875rem !important;
}

/* Full-width action strip on mobile — icons never sit beside Lines */
.logs-viewer-actions {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 0.125rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.logs-viewer-actions::-webkit-scrollbar {
    display: none;
}

.logs-viewer-actions > * {
    flex-shrink: 0;
}

/* Cancel/force-start + search — right-aligned as a group */
.logs-viewer-end {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.logs-viewer-end .logs-viewer-meta {
    width: auto;
}

.runtime-logs-viewer-end {
    align-items: stretch;
    flex-direction: column;
}

.logs-viewer-deployment-actions {
    display: flex;
    min-width: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.logs-viewer-deployment-actions:empty {
    display: none;
}

.logs-viewer-deployment-btn {
    height: 2rem !important;
    min-height: 2rem !important;
    padding-inline: 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    border-radius: 0.5rem !important;
}

.logs-viewer-cancel-btn {
    border-color: color-mix(in oklab, var(--color-error, #ef4444) 55%, transparent) !important;
    background: color-mix(in oklab, var(--color-error, #ef4444) 10%, transparent) !important;
    color: color-mix(in oklab, var(--color-error, #f87171) 90%, white) !important;
}

.logs-viewer-cancel-btn:hover {
    border-color: color-mix(in oklab, var(--color-error, #ef4444) 75%, transparent) !important;
    background: color-mix(in oklab, var(--color-error, #ef4444) 18%, transparent) !important;
}

.logs-viewer-btn,
.runtime-log-icon-button {
    position: relative;
    z-index: 0;
}

.logs-viewer-btn {
    display: inline-flex;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: var(--color-neutral-500);
    transition: color 0.15s, background-color 0.15s;
}

.logs-viewer-btn:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

.dark .logs-viewer-btn {
    color: #a8a29e; /* MapleDeploy branding: stone remap (stone-400) */
}

.dark .logs-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f4; /* MapleDeploy branding: stone remap (stone-100) */
}

.logs-viewer-btn-active {
    background: var(--color-coollabs);
    color: #fff;
}

.dark .logs-viewer-btn-active {
    color: #fff;
}

.logs-viewer-viewport {
    min-width: 0;
    padding: 0.5rem 0.75rem 0;
}

/* A flex item is reliably included in the scrollable overflow area, unlike
   bottom padding on overflow containers in some browser/layout combinations. */
.logs-viewer-viewport::after {
    content: "";
    flex: 0 0 2rem;
}

.logs-viewer-line {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
    padding-block: 0.125rem;
}

.logs-viewer-line.hidden {
    display: none;
}

.logs-viewer-timestamp {
    flex-shrink: 0;
    font-size: 0.625rem;
    line-height: 1rem;
    color: #737373;
    letter-spacing: 0.01em;
}

.logs-viewer-line-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

@media (min-width: 640px) {
    /* Desktop: [actions + status] ... [cancel + search] */
    .logs-viewer-toolbar-controls {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .logs-viewer-primary {
        width: auto;
        flex: 0 1 auto;
    }

    .logs-viewer-meta {
        order: 0;
        width: auto;
        flex: 0 0 auto;
    }

    .logs-viewer-search {
        order: 1;
        width: auto;
        max-width: 16rem;
        flex: 1 1 12rem;
    }

    .logs-viewer-actions {
        order: 0;
        width: auto;
        flex: 0 0 auto;
        max-width: 100%;
        justify-content: flex-end;
        overflow: visible;
    }

    .logs-viewer-end {
        order: 1;
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .logs-viewer-end .logs-viewer-meta {
        order: 2;
    }

    .runtime-logs-viewer-end {
        align-items: center;
        flex-direction: row;
    }

    .logs-viewer-deployment-actions {
        width: auto;
        flex: 0 0 auto;
    }

    .logs-viewer-btn {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.375rem;
    }

    .logs-viewer-viewport {
        padding: 0.5rem 1rem 0;
    }

    .logs-viewer-line {
        flex-direction: row;
        gap: 0.5rem;
        padding-block: 0;
    }

    .logs-viewer-timestamp {
        font-size: 0.75rem;
        line-height: inherit;
    }
}

/* Runtime log viewer */
.runtime-log-shell {
    overflow: visible;
    border-radius: 8px;
    background: var(--coollabs-elevated);
    box-shadow: 0 0 0 1px var(--coollabs-hairline);
}

.runtime-log-trigger {
    display: flex;
    min-height: 2.75rem;
    cursor: pointer;
    user-select: none;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    color: #171717;
    transition: background-color 0.15s;
}

.runtime-log-trigger:hover {
    background: rgba(0, 0, 0, 0.025);
}

.dark .runtime-log-trigger {
    color: var(--color-fg);
}

.dark .runtime-log-trigger:hover {
    background: rgba(255, 255, 255, 0.03);
}

.runtime-log-trigger h4 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 500;
}

.runtime-log-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: visible;
    border-radius: 8px;
    background: var(--coollabs-base);
    box-shadow: 0 0 0 1px var(--coollabs-fill);
}

.settings-log-panel .runtime-log-panel {
    box-shadow: none;
}

.runtime-log-toolbar {
    position: relative;
    z-index: 20;
    border-bottom-color: var(--coollabs-fill);
    background: transparent;
}

.runtime-log-icon-button {
    display: inline-flex;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #737373;
    transition: color 0.15s, background-color 0.15s;
}

@media (min-width: 640px) {
    .runtime-log-icon-button {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 6px;
    }
}

.runtime-log-icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #171717;
}

.dark .runtime-log-icon-button {
    color: var(--color-fg-faint);
}

.dark .runtime-log-icon-button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-fg);
}

.runtime-log-icon-button-active {
    background: var(--color-coollabs);
    color: #fff;
}

.dark .runtime-log-icon-button-active {
    background: var(--color-coollabs);
    color: #fff;
}

.runtime-log-menu {
    background: var(--coollabs-elevated) !important;
    opacity: 1 !important;
}

.runtime-log-viewport {
    min-height: 12rem;
    border-radius: 0 0 8px 8px;
    background: var(--coollabs-elevated);
    color: #262626;
}

@media (min-width: 640px) {
    .runtime-log-viewport {
        min-height: 18rem;
    }
}

.dark .runtime-log-viewport {
    background: var(--color-log);
    color: var(--color-fg-dim);
}

/* Small pill badges for table cells */
.table-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 20px;
    padding: 0 0.5rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--coollabs-fill);
    color: #52525b;
}

.dark .table-badge {
    color: var(--color-fg-dim);
}

.table-badge-danger {
    background: rgba(248, 113, 113, 0.14);
    color: #dc2626;
}

.dark .table-badge-danger {
    color: #f87171;
}

.table-badge-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.dark .table-badge-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.table-badge-success {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.dark .table-badge-success {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

/* Suggested / not-yet-configured domain rows — distinct from real FQDNs */
.domains-row-suggested {
    background: rgba(245, 158, 11, 0.05);
    box-shadow: inset 3px 0 0 0 rgba(245, 158, 11, 0.55);
}

.dark .domains-row-suggested {
    background: rgba(245, 158, 11, 0.07);
    box-shadow: inset 3px 0 0 0 rgba(251, 191, 36, 0.5);
}

/* Chip/tag input (comma-free multi-value entry, e.g. Domains) */
.chip-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    width: 100%;
    /* 3px block padding: 24px chip row + 6px + 2px border = 32px, matching .input/.button */
    padding: 0.1875rem 0.375rem;
    border-radius: 8px;
    border: 1px solid var(--coollabs-line);
    background: var(--coollabs-recessed);
    cursor: text;
}

.chip-input:focus-within {
    border-color: var(--color-accent);
    box-shadow: none;
}

.chip-input input {
    flex: 1 1 10rem;
    min-width: 10rem;
    height: 1.5rem;
    margin: 0;
    padding: 0 0.25rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.875rem;
    color: #000000;
    outline: none;
    box-shadow: none;
}

.dark .chip-input input {
    color: var(--color-fg);
}

.chip-input input:focus,
.chip-input input:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

.chip-input input::placeholder {
    color: var(--coollabs-subtle);
    opacity: 0.7;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    max-width: 100%;
    padding: 0 0.375rem 0 0.625rem;
    border-radius: 6px;
    border: none;
    background: var(--coollabs-fill);
    font-size: 0.8125rem;
    color: #000000;
    white-space: nowrap;
}

.dark .chip {
    color: var(--color-fg);
}

.chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    color: var(--coollabs-subtle);
    transition: color 0.15s;
}

.chip-remove:hover {
    color: inherit;
}

/* In-card sub-headings (e.g. "Container labels", "Docker Compose") */
.application-settings-form h4,
.application-settings-form .application-settings-section-body h3 {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Compact resource table on the project environment page. */
.environment-resource-grid {
    display: grid;
    grid-template-columns:
        minmax(240px, 2fr)
        minmax(100px, 0.7fr)
        minmax(110px, 0.8fr)
        minmax(180px, 1.2fr)
        minmax(120px, 0.8fr)
        minmax(140px, 1fr);
    column-gap: 1rem;
}

.environment-resource-grid .mobile-resource-domain {
    display: none;
}

.projects-table-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.7fr)
        minmax(100px, 0.65fr)
        minmax(90px, 0.6fr)
        minmax(220px, 1.5fr)
        6rem;
    column-gap: 1rem;
}

.tags-table-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.7fr)
        minmax(100px, 0.65fr)
        minmax(110px, 0.7fr)
        minmax(90px, 0.55fr);
    column-gap: 1rem;
}

.environments-table-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(90px, 0.55fr)
        minmax(240px, 1.6fr)
        6rem;
    column-gap: 1rem;
}

@media (max-width: 900px) {
    .environments-table-grid {
        grid-template-columns: minmax(220px, 1fr) 6rem 6rem;
    }

    .environments-table-grid .environment-description {
        display: none;
    }
}

@media (max-width: 640px) {
    .environments-table-grid {
        grid-template-columns: minmax(0, 1fr) 5rem;
        column-gap: 0.75rem;
    }

    .environments-table-grid .environment-resource-count {
        display: none;
    }
}

@media (max-width: 1050px) {
    .projects-table-grid {
        grid-template-columns: minmax(220px, 1fr) 7rem 6rem 6rem;
    }

    .projects-table-grid .project-description {
        display: none;
    }

    .tags-table-grid {
        grid-template-columns: minmax(220px, 1fr) 7rem 6rem 3rem;
    }

    .tags-table-grid .tag-services {
        display: none;
    }
}

@media (max-width: 640px) {
    .projects-table-grid {
        grid-template-columns: minmax(0, 1fr) 5rem;
        column-gap: 0.75rem;
    }

    .projects-table-grid > :nth-child(2),
    .projects-table-grid > :nth-child(3) {
        display: none;
    }

    .tags-table-grid {
        grid-template-columns: minmax(0, 1fr) 5rem 3rem;
        column-gap: 0.75rem;
    }

    .tags-table-grid > :nth-child(3),
    .tags-table-grid > :nth-child(4) {
        display: none;
    }
}

@media (max-width: 1200px) {
    .environment-resource-grid {
        grid-template-columns:
            minmax(220px, 2fr)
            minmax(100px, 0.8fr)
            minmax(110px, 0.8fr)
            minmax(120px, 1fr);
    }

    .environment-resource-grid .resource-domain,
    .environment-resource-grid .resource-tags {
        display: none;
    }
}

@media (max-width: 768px) {
    .environment-resource-grid {
        grid-template-columns: minmax(0, 1fr) 6.5rem;
        column-gap: 0.75rem;
    }

    .environment-resource-grid .resource-type,
    .environment-resource-grid .resource-server {
        display: none;
    }

    .environment-resource-grid .mobile-resource-domain {
        display: block;
    }
}

/* Command palette (global search) */
.command-palette {
    display: flex;
    width: 100%;
    max-width: 36rem;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background: var(--coollabs-elevated);
    box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-dropdown);
}

.command-palette-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0 0.75rem 0 0.875rem;
    background: var(--coollabs-elevated);
}

.command-palette-header-icon {
    display: flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--coollabs-subtle);
}

.command-palette-header-icon.is-loading {
    color: var(--color-accent);
}

.command-palette-input {
    min-width: 0;
    flex: 1;
    height: 2.75rem;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #171717;
    outline: none;
    box-shadow: none !important;
}

.dark .command-palette-input {
    color: var(--color-fg);
}

.command-palette-input::placeholder {
    color: var(--coollabs-subtle);
}

.command-palette-input:focus,
.command-palette-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

.command-palette-shortcuts {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
}

.command-palette-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: var(--coollabs-recessed);
    color: var(--coollabs-subtle);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    font-family: inherit;
}

.dark .command-palette-kbd {
    border-color: rgb(255 255 255 / 0.05);
    background: rgb(255 255 255 / 0.06);
}

button.command-palette-kbd {
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

button.command-palette-kbd:hover {
    color: #171717;
    background: var(--coollabs-fill);
}

.dark button.command-palette-kbd:hover {
    color: var(--color-fg);
    background: rgb(255 255 255 / 0.1);
}

.command-palette-body {
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    border-radius: 8px;
    background: var(--coollabs-base);
    box-shadow: 0 0 0 1px var(--coollabs-fill);
    scrollbar-width: thin;
    scrollbar-color: var(--coollabs-fill) transparent;
}

.command-palette-body::-webkit-scrollbar {
    width: 8px;
}

.command-palette-body::-webkit-scrollbar-track {
    background: transparent;
}

.command-palette-body::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-color: var(--coollabs-fill);
}

.command-palette-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.25rem;
}

.command-palette-section + .command-palette-section {
    border-top: 1px solid var(--coollabs-fill);
    margin-top: 0;
    padding-top: 0.25rem;
}

.command-palette-group-label {
    padding: 0.375rem 0.5rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--coollabs-subtle);
}

/* Result rows: inset listbox-style pills. Kill the global button/a
   focus-visible ring so keyboard selection is a soft fill, not yellow bars. */
.command-palette-item {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.5rem;
    border-radius: 6px;
    text-align: left;
    color: inherit;
    transition: background 0.1s ease, box-shadow 0.1s ease;
    outline: none !important;
    border: 0;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-offset-width: 0px !important;
}

a.command-palette-item,
button.command-palette-item {
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.command-palette-item:hover {
    background: var(--coollabs-fill);
}

/* Keyboard / programmatic focus = active selection */
.command-palette-item:focus,
.command-palette-item:focus-visible,
button.command-palette-item:focus-visible,
a.command-palette-item:focus-visible {
    outline: none !important;
    background: color-mix(in oklab, var(--color-accent) 12%, transparent);
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-offset-width: 0px !important;
}

/* Soft left accent rail on focused row (matches sidebar language) */
.command-palette-item:focus::before,
.command-palette-item:focus-visible::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 2px;
    border-radius: 9999px;
    background: var(--color-accent);
    pointer-events: none;
}

.command-palette-item-main {
    min-width: 0;
    flex: 1;
}

.command-palette-item-title {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.command-palette-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #171717;
}

.dark .command-palette-item-name {
    color: var(--color-fg);
}

.command-palette-item:focus .command-palette-item-name,
.command-palette-item:focus-visible .command-palette-item-name {
    color: #171717;
}

.dark .command-palette-item:focus .command-palette-item-name,
.dark .command-palette-item:focus-visible .command-palette-item-name {
    color: var(--color-fg);
}

.command-palette-item-meta {
    margin-top: 0.0625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--coollabs-subtle);
}

.command-palette-type-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.4375rem;
    border-radius: 9999px;
    background: var(--coollabs-recessed);
    color: var(--coollabs-subtle);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
}

.command-palette-item:focus .command-palette-type-badge,
.command-palette-item:focus-visible .command-palette-type-badge {
    background: color-mix(in oklab, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

/* Shortcut hint chip next to create action titles */
.command-palette-quickcommand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    background: var(--coollabs-recessed);
    color: var(--coollabs-subtle);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.command-palette-item:focus .command-palette-quickcommand,
.command-palette-item:focus-visible .command-palette-quickcommand {
    background: color-mix(in oklab, var(--color-accent) 12%, transparent);
    color: color-mix(in oklab, var(--color-accent) 85%, var(--coollabs-subtle));
}

/* Leading icon tile — neutral by default; accent only when the row is active */
.command-palette-item-icon {
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: var(--coollabs-recessed);
    box-shadow: inset 0 0 0 1px var(--coollabs-fill);
    color: var(--coollabs-subtle);
    transition: background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.command-palette-item-icon img {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
}

.command-palette-item-icon.is-create {
    background: var(--coollabs-recessed);
    color: var(--coollabs-subtle);
    box-shadow: inset 0 0 0 1px var(--coollabs-fill);
}

.command-palette-item-icon.is-create svg {
    width: 0.875rem;
    height: 0.875rem;
}

.command-palette-item:hover .command-palette-item-icon.is-create {
    color: #171717;
}

.dark .command-palette-item:hover .command-palette-item-icon.is-create {
    color: var(--color-fg);
}

.command-palette-item:focus .command-palette-item-icon,
.command-palette-item:focus-visible .command-palette-item-icon,
.command-palette-item:focus .command-palette-item-icon.is-create,
.command-palette-item:focus-visible .command-palette-item-icon.is-create {
    background: color-mix(in oklab, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 28%, transparent);
}

.command-palette-item-chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--coollabs-subtle);
    opacity: 0.4;
    transition: opacity 0.1s ease, color 0.1s ease;
}

.command-palette-item:hover .command-palette-item-chevron {
    opacity: 0.7;
}

.command-palette-item:focus .command-palette-item-chevron,
.command-palette-item:focus-visible .command-palette-item-chevron {
    opacity: 1;
    color: var(--color-accent);
}

.command-palette-step-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.125rem;
    padding: 0.25rem 0.375rem;
}

.command-palette-step-back {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: var(--coollabs-subtle);
    transition: background 0.1s ease, color 0.1s ease;
}

.command-palette-step-back:hover {
    background: var(--coollabs-recessed);
    color: #171717;
}

.dark .command-palette-step-back:hover {
    color: var(--color-fg);
}

.command-palette-step-title {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #171717;
}

.dark .command-palette-step-title {
    color: var(--color-fg);
}

.command-palette-step-subtitle {
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--coollabs-subtle);
}

.command-palette-status {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.125rem 0;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    background: var(--coollabs-recessed);
    color: var(--coollabs-subtle);
    font-size: 0.75rem;
    line-height: 1rem;
}

.command-palette-status.is-error {
    background: color-mix(in oklab, #ef4444 10%, transparent);
    color: #b91c1c;
}

.dark .command-palette-status.is-error {
    color: #fca5a5;
}

.command-palette-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 2rem 1.25rem;
    text-align: center;
}

.command-palette-empty-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #171717;
}

.dark .command-palette-empty-title {
    color: var(--color-fg);
}

.command-palette-empty-desc {
    max-width: 28ch;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: var(--coollabs-subtle);
}

.command-palette-arch-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.4375rem;
    border-radius: 9999px;
    background: color-mix(in oklab, #f59e0b 16%, transparent);
    color: #b45309;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
}

.dark .command-palette-arch-badge {
    color: #fcd34d;
}

/* Service domains prioritize public addresses; configuration lives in settings. */
#service-domains-section,
.domains-overview-container {
    container: service-domains / inline-size;
}

.service-domains-overview-grid {
    grid-template-columns: minmax(0, 1fr) 7.25rem 7.5rem 5.5rem 6.5rem 8rem 6.5rem;
    column-gap: 0.75rem;
}

.data-table-row.service-domains-overview-grid {
    padding-block: 0.5rem;
}

.service-domain-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: 12px;
}

.service-domains-overview-grid > span:not(:first-child):not(:last-child) {
    text-align: center;
}

.service-domain-detail-label {
    display: none;
}

.service-domain-mobile-summary {
    display: none;
}

.service-domains-https .listbox-trigger {
    min-width: 7rem;
}

@container service-domains (max-width: 980px) {
    .data-table-header.service-domains-overview-grid {
        display: none;
    }

    .data-table-row.service-domains-overview-grid {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "domain dns actions" "summary summary summary";
        gap: 0.625rem 0.75rem;
        padding: 0.75rem;
    }

    .data-table-row.service-domains-overview-grid > :first-child {
        grid-area: domain;
    }

    .service-domain-detail,
    .domains-service-desktop {
        display: none;
    }

    .service-domain-mobile-summary {
        display: flex;
        grid-area: summary;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem 0.75rem;
        color: var(--coollabs-fg-dim);
        font-size: 12px;
        line-height: 1.25rem;
    }

    .service-domain-mobile-summary > span:not(:last-child)::after {
        margin-left: 0.75rem;
        color: var(--coollabs-line);
        content: "·";
    }

    .service-domain-dns {
        grid-area: dns;
        justify-self: end;
    }

    .service-domain-actions {
        grid-area: actions;
        justify-self: end;
    }
}

@container service-domains (max-width: 600px) {
    .data-table-row.service-domains-overview-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "domain domain" "summary summary" "dns actions";
        gap: 0.625rem 0.75rem;
        padding: 0.875rem;
    }

    .data-table-row.service-domains-overview-grid > :first-child {
        grid-area: domain;
    }

    .data-table-row.service-domains-overview-grid > :first-child a,
    .data-table-row.service-domains-overview-grid > :first-child span[title] {
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .service-domain-dns {
        grid-area: dns;
        justify-self: start;
    }

    .service-domain-actions {
        grid-area: actions;
        justify-self: end;
    }

    .service-domain-actions .icon-button {
        width: 2.5rem;
        height: 2.5rem;
    }
}