.database-workspace {
  display: grid;
  grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.database-console-page [hidden] {
  display: none !important;
}

.database-query-panels {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.database-query-panels .htmx-indicator {
  display: none;
}

.database-query-panels .htmx-request .htmx-indicator {
  display: block;
}

.database-workspace .muted {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.database-schema-browser summary {
  padding: var(--space-2);
  border-radius: var(--radius);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.database-console-title,
.database-panel-title,
.database-editor-actions,
.database-run-actions,
.database-result-actions,
.database-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.database-console-page .application-details-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.database-panel-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.database-panel-title svg {
  flex-shrink: 0;
}

.database-editor-panel .database-panel-title svg,
.database-results-panel .database-panel-title {
  color: hsl(var(--brand));
}

.database-console-page .service-widget-header {
  padding: var(--space-3) var(--space-4);
}

.database-schema-body {
  padding: 0 var(--space-3) var(--space-4);
}

.database-table-search {
  position: relative;
  margin-bottom: var(--space-3);
}

.database-table-search > svg {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

.database-console-page .database-table-search input {
  padding-left: var(--space-8);
}

.database-refresh-button {
  padding: var(--space-2);
}

.database-schema > summary {
  display: list-item;
  font-weight: 500;
}

.database-schema > summary svg {
  vertical-align: middle;
  margin-right: var(--space-2);
}

.database-table-menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-2);
  padding-right: var(--space-8);
}

.database-table-menu > summary::-webkit-details-marker {
  display: none;
}

.database-table-menu > summary svg {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.database-table-row.database-table-selected .database-table-menu > summary,
.database-table-row.database-table-selected .database-table-menu > summary svg {
  color: hsl(var(--brand));
}

.database-table-row.database-table-selected .database-table-menu > summary {
  background: hsl(var(--brand) / 0.08);
}

.database-run-actions {
  gap: 0;
}

.database-console-page .database-run-button {
  color: hsl(var(--brand-foreground));
  background: hsl(var(--brand));
  border-color: hsl(var(--brand));
}

.database-console-page .database-run-button:hover {
  background: hsl(var(--brand) / 0.9);
}

.database-run-actions > button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.database-run-menu,
.database-download-menu {
  position: relative;
}

.database-run-menu > summary {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: hsl(var(--brand-foreground) / 0.3);
}

.database-run-menu > summary,
.database-download-menu > summary {
  list-style: none;
}

.database-run-menu > summary::-webkit-details-marker,
.database-download-menu > summary::-webkit-details-marker {
  display: none;
}

.database-editor-body {
  padding: 0 var(--space-4) var(--space-3);
}

.database-code-surface {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  overflow: hidden;
}

.database-code-surface:focus-within {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.database-line-numbers,
.database-sql-editor,
.database-sql-highlight {
  margin: 0;
  padding: var(--space-3);
  font: 0.8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  tab-size: 2;
  white-space: pre;
}

.database-line-numbers {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.4);
  border-right: 1px solid hsl(var(--border));
  text-align: right;
  overflow: hidden;
  max-height: 24rem;
  height: 8rem;
}

.database-code-input {
  position: relative;
  min-width: 0;
}

.database-sql-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.database-sql-editor {
  display: block;
  position: relative;
  width: 100%;
  min-height: 8rem;
  max-height: 24rem;
  resize: vertical;
  color: hsl(var(--foreground));
  background: transparent;
  border: 0;
  outline: none;
}

.database-syntax-ready .database-sql-editor {
  color: transparent;
  caret-color: hsl(var(--foreground));
}

.database-sql-editor::placeholder {
  color: hsl(var(--muted-foreground));
}

.database-sql-token-keyword { color: hsl(var(--brand)); }
.database-sql-token-string { color: hsl(var(--code-string)); }
.database-sql-token-number { color: hsl(var(--success)); }
.database-sql-token-comment { color: hsl(var(--muted-foreground)); }

.database-editor-help {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.database-editor-help span + span {
  padding-left: var(--space-3);
  border-left: 1px solid hsl(var(--border));
}

.database-write-warning {
  margin: var(--space-2) 0 0;
}

.database-query-success {
  color: hsl(var(--success));
  font-size: 0.75rem;
}

.database-result-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.database-results-panel .service-widget-body {
  padding: 0 var(--space-4) var(--space-3);
}

.database-results-panel .service-environment-table td code {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-null-value {
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  font: 0.75rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

.database-result-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.database-result-pagination [aria-current="page"] {
  color: hsl(var(--brand));
  background: hsl(var(--brand) / 0.08);
}

.database-results-empty {
  padding: var(--space-8);
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.database-schema-browser summary:hover {
  background: hsl(var(--accent));
}

.database-table-list {
  margin: 0;
  padding: 0 0 0 var(--space-4);
  list-style: none;
}

.database-table-row {
  position: relative;
}

.database-table-actions {
  position: absolute;
  top: 0;
  right: 0;
}

.database-table-actions > summary {
  list-style: none;
  padding: var(--space-1);
}

.database-table-actions > summary::-webkit-details-marker {
  display: none;
}

.database-table-actions .service-actions-options {
  top: 100%;
  left: auto;
  right: 0;
  min-width: 16rem;
}

.database-table-menu[open] > summary .database-table-chevron {
  transform: rotate(90deg);
}

.database-column-list {
  margin: var(--space-1) 0;
  padding: 0 0 0 calc(var(--space-8) + var(--space-6));
  list-style: none;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.database-column-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  overflow-wrap: anywhere;
}

.database-column-list svg {
  flex-shrink: 0;
}

.database-sql-editor,
.database-script-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  overflow: auto;
}

.database-result-scroll,
.database-script-output {
  max-height: 32rem;
}

.database-result-scroll td code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .database-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .database-editor-actions,
  .database-result-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
  .database-result-pagination {
    flex-wrap: wrap;
  }
}

/* Inter 4.1, bundled under the SIL Open Font License (Inter-LICENSE.txt). */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --brand: 355 90% 48%;
  --brand-foreground: 0 0% 100%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215 19% 34%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --success: 142.1 76.2% 36.3%;
  --info: 221.2 83.2% 53.3%;
  --info-foreground: 0 0% 100%;
  --code-string: var(--destructive);
  --warning: 26 90% 37%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 210 40% 98%;
  --code: 222.2 47.4% 11.2%;
  --code-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 0.375rem;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --success: 142.1 70.6% 45.3%;
    --info: 217.2 91.2% 59.8%;
    --info-foreground: 222.2 84% 4.9%;
    --code-string: 0 84.2% 70.2%;
    --warning: 43 96% 56%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --code: 222.2 47.4% 11.2%;
    --code-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: hsl(var(--background));
}

body {
  min-height: 100vh;
  margin: 0;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

.login-body {
  display: grid;
  place-items: center;
  background: hsl(var(--muted) / 0.35);
}

.login-page {
  display: grid;
  width: min(100%, 28rem);
  padding: var(--space-8) var(--space-4);
}

.login-card {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
}

.login-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-heading {
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.login-heading h1 {
  font-size: 1.5rem;
}

.login-heading p,
.login-footnote {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.login-alert {
  margin-top: 0;
}

.login-google-button {
  width: 100%;
  min-height: 2.75rem;
  background: hsl(var(--background));
}

.login-google-button:hover {
  background: hsl(var(--accent));
}

.google-logo {
  flex: 0 0 auto;
}

.login-footnote {
  text-align: center;
}

a {
  color: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.4);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-rows: minmax(4rem, auto) minmax(0, 1fr);
}

.sidebar {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1 / -1;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}

.sidebar-header {
  display: flex;
  min-height: 4rem;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}

.main-header {
  display: flex;
  min-width: 0;
  min-height: 4rem;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-8);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}

.server-info {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}

.server-info-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.server-info-heading svg {
  flex: 0 0 auto;
}

.server-info-heading h2 {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.server-info-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: var(--space-6);
  margin: 0;
}

.server-info-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.server-info-row dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  line-height: 1.25;
}

.server-info-row dd {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  color: hsl(var(--foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.35;
}

.server-info-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: hsl(var(--foreground));
  text-decoration: none;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 1.75rem;
  color: hsl(var(--foreground));
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1;
}

.brand-mark {
  display: block;
  flex-shrink: 0;
  width: var(--space-6);
  height: auto;
}

.side-menu {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
}

.side-menu-item {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}

.side-menu-item:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.side-menu-item-active {
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent));
}

.sidebar-user-widget {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  margin-top: auto;
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid hsl(var(--border));
}

.sidebar-user-avatar {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  object-fit: cover;
}

.sidebar-user-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sidebar-user-name,
.sidebar-user-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-name {
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.sidebar-user-email {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  line-height: 1.25;
}

.sidebar-logout-form {
  display: flex;
  margin: 0;
}

.sidebar-logout:hover {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.main-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: var(--space-8);
}

.setup-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.setup-shell {
  width: min(100%, 48rem);
  padding-top: var(--space-8);
}

.setup-heading {
  display: grid;
  gap: var(--space-3);
}

.setup-heading h1 {
  margin: 0;
}

.setup-description {
  max-width: 38rem;
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
}

.setup-form {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.setup-options {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.setup-options legend {
  margin-bottom: var(--space-1);
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.setup-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.setup-option:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}

.setup-option:has(input:checked) {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}

.setup-option input {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  accent-color: hsl(var(--primary));
}

.setup-option-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.setup-option-title {
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
}

.setup-option-technical,
.setup-option-badge,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.setup-option-technical {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.setup-option-description {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.setup-option-badge {
  padding: var(--space-1) var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  line-height: 1.25;
  white-space: nowrap;
}

.setup-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--destructive));
  border-radius: var(--radius);
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  font-size: 0.8125rem;
}

.setup-alert svg {
  flex: 0 0 auto;
  margin-top: 0.0625rem;
}

.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid hsl(var(--border));
}

.setup-footnote {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.button svg {
  flex-shrink: 0;
}

.button-primary {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

.button-primary:hover {
  background: hsl(var(--primary) / 0.9);
}

.button-secondary {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

.button-secondary:hover {
  background: hsl(var(--accent));
}

.button-destructive {
  color: hsl(var(--destructive-foreground));
  background: hsl(var(--destructive));
}

.button-destructive:hover {
  background: hsl(var(--destructive) / 0.9);
}

.button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.35);
}

.setup-progress-backdrop {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: hsl(var(--background) / 0.72);
}

.setup-progress-dialog {
  display: grid;
  width: min(100%, 36rem);
  max-height: calc(100vh - var(--space-8));
  gap: var(--space-6);
  overflow: auto;
  padding: var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: 0 1rem 2.5rem hsl(var(--foreground) / 0.16);
}

.setup-progress-header {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.setup-progress-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  font-size: 1.125rem;
  font-weight: 600;
}

.setup-progress-icon-complete {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.setup-progress-icon-failed {
  color: hsl(var(--destructive-foreground));
  background: hsl(var(--destructive));
}

.setup-progress-heading {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.setup-progress-heading h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.setup-progress-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-progress-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.setup-progress-step-icon {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  font-size: 0.75rem;
  font-weight: 700;
}

.setup-progress-step-active {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}

.setup-progress-step-active .setup-progress-step-icon {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

.setup-progress-step-failed {
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.setup-progress-step-failed .setup-progress-step-icon {
  color: hsl(var(--destructive-foreground));
  background: hsl(var(--destructive));
}

.setup-progress-step-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.setup-progress-step-label {
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.setup-progress-error {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid hsl(var(--destructive));
  border-radius: var(--radius);
  background: hsl(var(--destructive) / 0.08);
}

.setup-progress-error[hidden] {
  display: none;
}

.setup-progress-error-title {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}

.setup-progress-error pre {
  max-height: 12rem;
  margin: 0;
  overflow: auto;
  color: hsl(var(--destructive));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.setup-progress-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid hsl(var(--border));
}

.setup-progress-actions form {
  display: inline-flex;
  margin: 0;
}

h1 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.dialog-open {
  overflow: hidden;
}

.applications-page {
  width: 100%;
}

.help-page {
  width: min(100%, 80rem);
}

.help-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}

.help-navigation {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
}

.help-navigation > nav,
.help-toc nav,
.help-main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.help-main {
  gap: var(--space-6);
}

.help-toc {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid hsl(var(--border));
}

.help-toc summary {
  margin-bottom: var(--space-3);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.help-toc-link {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.help-toc-nested {
  padding-left: var(--space-6);
}

.help-toc-link:hover,
.help-topic:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.help-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.help-topic-list {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}

.help-topic {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  text-decoration: none;
}

.help-topic strong {
  font-size: 0.8125rem;
  font-weight: 500;
}

.help-topic span,
.help-source {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.help-source,
.help-quick-start p {
  margin: 0;
}

.help-quick-start {
  display: grid;
  gap: var(--space-4);
  font-size: 0.8125rem;
}

.help-article {
  min-width: 0;
  overflow-wrap: anywhere;
}

.help-article > :first-child {
  margin-top: 0;
}

.help-article h2 {
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid hsl(var(--border));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.help-article h3,
.help-article h4 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
}

.help-page [id] {
  scroll-margin-top: var(--space-6);
}

.help-article p,
.help-article ul,
.help-article ol {
  margin: 0 0 var(--space-4);
}

.help-article li + li {
  margin-top: var(--space-2);
}

.help-article li > p {
  margin-bottom: var(--space-2);
}

.help-article a,
.help-quick-start p a {
  text-underline-offset: var(--space-1);
}

.help-article :not(pre) > code,
.help-quick-start p code {
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  background: hsl(var(--muted));
  font-size: 0.8125rem;
}

.help-article table {
  display: block;
  max-width: 100%;
  margin-bottom: var(--space-4);
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  border-spacing: 0;
  font-size: 0.8125rem;
}

.help-article th,
.help-article td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
}

.help-article th {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.35);
  font-weight: 500;
}

.help-code-block {
  min-width: 0;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.help-quick-start .help-code-block {
  margin-bottom: 0;
}

.help-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  font-size: 0.75rem;
}

.help-code-toolbar .button {
  flex: 0 0 auto;
  width: auto;
}

.help-code-block pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  color: hsl(var(--code-foreground));
  background: hsl(var(--code));
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
}

.help-article blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: var(--space-1) solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}

@media (max-width: 900px) {
  .help-sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .help-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-navigation {
    position: static;
    max-height: none;
  }

  .help-navigation > nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-toc nav {
    max-height: 14rem;
    overflow-y: auto;
  }
}

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.page-heading-copy {
  display: grid;
  gap: var(--space-2);
}

.page-heading-copy p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.application-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--destructive));
  border-radius: var(--radius);
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  font-size: 0.8125rem;
}

.application-alert svg {
  flex: 0 0 auto;
  margin-top: 0.0625rem;
}

.application-alert-warning {
  border-color: hsl(var(--warning));
  color: hsl(var(--warning));
  background: hsl(var(--warning) / 0.08);
}

.application-alert-stacked {
  flex-direction: column;
  gap: var(--space-1);
}

.application-dialog-alert {
  margin-top: 0;
}

.application-pending-deletions {
  display: grid;
  flex: 1;
  gap: var(--space-2);
  min-width: 0;
}

.application-pending-deletions p {
  margin: 0;
}

.application-pending-deletions ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.application-pending-deletions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.application-card {
  display: flex;
  min-width: 0;
  min-height: 9rem;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.application-card:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent) / 0.35);
}

.application-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.application-card-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

.application-card-services {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 500;
}

.status-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
}

.application-card-name {
  min-width: 0;
  margin: var(--space-6) 0 0;
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-details-page {
  width: min(100%, 72rem);
}

.proxy-page {
  width: min(100%, 72rem);
}

.dashboard-page {
  width: min(100%, 72rem);
}

.settings-page {
  display: grid;
  gap: var(--space-5);
}

.settings-page > .page-heading {
  margin-bottom: var(--space-1);
}

.dashboard-refresh-note {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.dashboard-refresh-indicator {
  display: none;
  color: hsl(var(--foreground));
}

.dashboard-refresh-indicator.htmx-request {
  display: inline;
}

.dashboard-metrics.htmx-request {
  opacity: 0.72;
  transition: opacity 120ms ease;
}

.dashboard-metrics {
  min-width: 0;
  margin-top: var(--space-6);
}

.dashboard-metrics-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: flex-end;
  margin-bottom: var(--space-3);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.dashboard-metrics-stale {
  color: hsl(var(--destructive));
}

.dashboard-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.dashboard-resource-card {
  min-width: 0;
}

.dashboard-resource-card .service-widget-header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.dashboard-metric-value {
  margin: 0;
  color: hsl(var(--foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dashboard-metric-help {
  margin: var(--space-2) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.dashboard-resource-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.dashboard-disk-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-resource-list > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.dashboard-resource-list dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
}

.dashboard-resource-list dd {
  min-width: 0;
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}

.dashboard-resource-list code {
  color: inherit;
  font-size: inherit;
}

.dashboard-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.dashboard-process-widget {
  min-width: 0;
}

.dashboard-process-widget .service-widget-header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.dashboard-process-table-wrap {
  overflow-x: auto;
}

.dashboard-process-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  text-align: left;
}

.dashboard-process-table th,
.dashboard-process-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.dashboard-process-table thead th {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.45);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-process-table tbody tr:last-child th,
.dashboard-process-table tbody tr:last-child td {
  border-bottom: 0;
}

.dashboard-process-table tbody tr {
  transition: background-color 120ms ease;
}

.dashboard-process-table tbody tr:hover {
  background: hsl(var(--accent) / 0.35);
}

.dashboard-process-table tbody th {
  max-width: 12rem;
  font-weight: 500;
}

.dashboard-process-table tbody th code {
  display: block;
  overflow: hidden;
  color: hsl(var(--foreground));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-process-table td code {
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  white-space: nowrap;
}

.dashboard-process-empty {
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  text-align: center;
}

.dashboard-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--destructive));
  border-radius: var(--radius);
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  font-size: 0.8125rem;
}

.dashboard-alert svg {
  flex: 0 0 auto;
  margin-top: 0.0625rem;
}

.application-routing-page {
  width: min(100%, 72rem);
}

.application-details-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.application-details-breadcrumb a {
  text-decoration: none;
}

.application-details-breadcrumb a:hover {
  color: hsl(var(--foreground));
}

.application-details-breadcrumb span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-details-heading {
  margin: 0;
}

.application-title-block {
  min-width: 0;
}

.application-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.application-title-row[hidden],
.application-title-form[hidden] {
  display: none;
}

.application-title-edit {
  opacity: 0;
}

.application-title-row:hover .application-title-edit,
.application-title-row:focus-within .application-title-edit,
.application-title-edit:focus-visible {
  opacity: 1;
}

.application-title-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.35);
}

@media (hover: none) {
  .application-title-edit {
    opacity: 1;
  }
}

.application-title-form {
  min-width: 0;
}

.application-title-input {
  width: min(100%, 28rem);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  outline: none;
  /* Mirror the h1 typography above so the title does not shift while editing. */
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.application-title-input:focus {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.application-title-error {
  margin: var(--space-2) 0 0;
  color: hsl(var(--destructive));
  font-size: 0.8125rem;
}

.application-tabs {
  min-width: 0;
  margin-top: var(--space-8);
}

.application-tablist {
  display: flex;
  min-height: 2.75rem;
  align-items: stretch;
  gap: var(--space-6);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid hsl(var(--border));
}

.application-tab {
  flex: 0 0 auto;
  min-height: 2.75rem;
  margin-bottom: -1px;
  padding: 0 var(--space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: hsl(var(--muted-foreground));
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}

.application-tab:hover {
  color: hsl(var(--foreground));
}

.application-tab[aria-selected="true"] {
  border-bottom-color: hsl(var(--primary));
  color: hsl(var(--foreground));
}

.application-tab-panel {
  min-width: 0;
  margin-top: var(--space-6);
}

.application-tab-panel[hidden] {
  display: none;
}

.settings-tabs {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.settings-tablist {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-height: auto;
  overflow: visible;
  border-bottom: 0;
  border-right: 1px solid hsl(var(--border));
  padding-right: var(--space-2);
}

.settings-tablist .application-tab {
  min-height: 2.25rem;
  margin-bottom: 0;
  margin-right: -1px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 0;
  border-right: 2px solid transparent;
  text-align: left;
}

.settings-tablist .application-tab[aria-selected="true"] {
  border-bottom-color: transparent;
  border-right-color: hsl(var(--primary));
}

.settings-tabs .application-tab-panel {
  margin-top: 0;
}

.settings-tabs .application-tab-panel:not([hidden]) {
  display: grid;
  gap: var(--space-6);
}

.application-settings-header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}

.application-settings-header h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.application-public-access {
  margin-top: var(--space-6);
}

.application-danger-zone {
  margin-top: var(--space-6);
  border: 1px solid hsl(var(--destructive) / 0.45);
  border-radius: var(--radius);
  background: hsl(var(--destructive) / 0.04);
}

.application-danger-zone-header {
  padding: var(--space-4);
  border-bottom: 1px solid hsl(var(--destructive) / 0.25);
}

.application-danger-zone-header h3 {
  margin: 0;
  color: hsl(var(--destructive));
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.application-danger-zone-header p,
.application-danger-zone-copy p {
  margin: var(--space-1) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.application-danger-zone-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4);
}

.application-danger-zone-copy {
  min-width: 0;
}

.application-danger-zone-copy h4 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.application-danger-zone-action .button {
  flex: 0 0 auto;
}

.application-clone-zone {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.application-clone-zone-header {
  padding: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}

.application-clone-zone-header h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.application-clone-zone-header p,
.application-clone-zone-copy p {
  margin: var(--space-1) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.application-clone-zone-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4);
}

.application-clone-zone-copy {
  min-width: 0;
}

.application-clone-zone-copy h4 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.application-clone-zone-action .button {
  flex: 0 0 auto;
}

.services-section {
  margin-top: var(--space-8);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
}

.services-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
}

.services-section-heading {
  display: grid;
  gap: var(--space-1);
}

.services-section-heading h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.services-section-heading p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.services-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.compose-import-button,
.environment-import-button {
  white-space: nowrap;
}

.environment-import-content {
  min-height: 12rem;
  white-space: pre;
}

.service-split-button {
  display: inline-flex;
  align-items: stretch;
}

.service-split-button-main {
  gap: var(--space-2);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.service-split-menu,
.service-actions-menu {
  position: relative;
}

.service-split-button-toggle {
  width: 2.25rem;
  padding: 0;
  border-left-color: hsl(var(--primary-foreground) / 0.2);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  list-style: none;
}

.service-split-button-toggle::-webkit-details-marker {
  display: none;
}

.service-split-button-toggle::marker {
  content: "";
}

.service-split-options {
  position: absolute;
  z-index: 1;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 13rem;
  margin: 0;
  padding: var(--space-1);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--popover-foreground));
  background: hsl(var(--popover));
  box-shadow: 0 0.5rem 1rem hsl(var(--foreground) / 0.12);
  list-style: none;
}

.service-split-options li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius) - 0.125rem);
  cursor: pointer;
  font-size: 0.8125rem;
  transition: color 120ms ease, background-color 120ms ease;
  white-space: nowrap;
}

.service-split-options li:hover {
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent));
}

.service-split-options li a,
.service-split-options li .service-split-more {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  background-image: none;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.service-split-options li .service-split-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.35);
}

.service-split-separator {
  margin: var(--space-1) 0;
  padding: 0 !important;
  border-top: 1px solid hsl(var(--border));
  cursor: default !important;
}

.service-split-separator:hover {
  background: transparent !important;
}

.service-table-actions {
  width: 4.5rem;
  padding-right: var(--space-4) !important;
  text-align: right;
}

.service-actions-menu {
  display: inline-block;
}

.service-actions-trigger {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: transparent;
  cursor: pointer;
  font: inherit;
  list-style: none;
  padding: 0;
  transition: color 120ms ease, background-color 120ms ease;
}

.service-actions-trigger::-webkit-details-marker {
  display: none;
}

.service-actions-trigger::marker {
  content: "";
}

.service-actions-trigger:hover,
.service-actions-menu[open] .service-actions-trigger {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.service-actions-options {
  position: absolute;
  z-index: 2;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 9rem;
  margin: 0;
  padding: var(--space-1);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--popover-foreground));
  background: hsl(var(--popover));
  box-shadow: 0 0.5rem 1rem hsl(var(--foreground) / 0.12);
  list-style: none;
}

.service-actions-menu-overlay .service-actions-options {
  position: fixed;
  top: var(--service-actions-menu-top, 0);
  right: auto;
  left: var(--service-actions-menu-left, 0);
}

.service-actions-options li {
  display: block;
}

.service-actions-form {
  margin: 0;
}

.service-actions-item {
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: calc(var(--radius) - 0.125rem);
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.service-actions-item:hover {
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent));
}

.service-actions-item-start svg {
  color: hsl(var(--success));
}

.service-actions-item-stop svg {
  color: hsl(var(--destructive));
}

.service-actions-item-restart svg {
  color: hsl(var(--muted-foreground));
}

.service-actions-item-run svg {
  color: hsl(var(--muted-foreground));
}

.service-actions-separator {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid hsl(var(--border));
}

.service-actions-item-delete {
  color: hsl(var(--destructive));
}

.service-actions-item-delete:hover {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.service-split-option-icon {
  flex: 0 0 auto;
  color: hsl(var(--muted-foreground));
}

.services-empty-state {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid hsl(var(--border));
  text-align: center;
}

.services-empty-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
}

.services-empty-copy {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.services-empty-copy h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.9375rem;
  font-weight: 600;
}

.services-empty-copy p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.services-table-wrap {
  overflow-x: auto;
  border-top: 1px solid hsl(var(--border));
}

.services-table {
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
  text-align: left;
}

.services-table th,
.services-table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.services-table thead th {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.45);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.services-table tbody tr:last-child th,
.services-table tbody tr:last-child td {
  border-bottom: 0;
}

.services-table tbody tr {
  transition: background-color 120ms ease;
}

.services-table tbody tr:hover {
  background: hsl(var(--accent) / 0.35);
}

.services-table tbody th {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.services-table tbody td {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  white-space: nowrap;
}

.services-table tbody code {
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}

.service-table-type {
  width: 4.5rem;
  padding-left: var(--space-6) !important;
}

.service-table-name {
  min-width: 10rem;
  text-align: left;
}

.service-table-name-link {
  color: hsl(var(--foreground));
  cursor: pointer;
  text-decoration: none;
}

.service-table-name-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.service-type-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
}

.service-type-cache {
  color: hsl(var(--muted-foreground));
}

.service-type-app {
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent));
}

.services-table time {
  color: hsl(var(--foreground));
  white-space: nowrap;
}

.service-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.service-status .status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: 0 0 auto;
}

.service-status-running {
  color: hsl(var(--foreground));
}

.service-status-running .status-dot {
  background: hsl(var(--success));
}

.service-status-warning {
  color: hsl(var(--accent-foreground));
}

.service-status-warning .status-dot {
  background: hsl(var(--accent-foreground));
}

.service-status-failed {
  color: hsl(var(--destructive));
}

.service-status-failed .status-dot {
  background: hsl(var(--destructive));
}

.service-status-neutral {
  color: hsl(var(--muted-foreground));
}

.service-status-neutral .status-dot {
  background: hsl(var(--muted-foreground));
}

.service-details-page {
  width: min(100%, 72rem);
}

.service-details-heading {
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
}

.service-details-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-4);
}

.service-details-title .page-heading-copy {
  min-width: 0;
}

.service-details-type-icon {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  margin-top: 0;
  border-radius: calc(var(--radius) + var(--space-1));
}

.service-details-type-icon svg {
  width: 2rem;
  height: 2rem;
}

.service-details-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.service-details-heading h1 {
  overflow-wrap: anywhere;
}

.service-status-badge {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.service-status-badge .status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
}

.service-status-badge.service-status-running {
  border-color: hsl(var(--success) / 0.24);
  color: hsl(var(--success));
  background: hsl(var(--success) / 0.1);
}

.service-status-badge.service-status-running .status-dot {
  background: hsl(var(--success));
}

.service-status-badge.service-status-warning {
  border-color: hsl(var(--accent-foreground) / 0.24);
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent) / 0.7);
}

.service-status-badge.service-status-warning .status-dot {
  background: hsl(var(--accent-foreground));
}

.service-status-badge.service-status-failed {
  border-color: hsl(var(--destructive) / 0.24);
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.service-status-badge.service-status-failed .status-dot {
  background: hsl(var(--destructive));
}

.service-status-badge.service-status-neutral {
  border-color: hsl(var(--border));
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.65);
}

.service-status-badge.service-status-neutral .status-dot {
  background: hsl(var(--muted-foreground));
}

.service-details-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.service-details-action-form {
  margin: 0;
}

.service-details-action {
  min-width: 6.25rem;
  min-height: 2.5rem;
  gap: var(--space-2);
}

.service-details-action-start svg {
  color: hsl(var(--success));
}

.service-details-action-stop svg {
  color: hsl(var(--destructive));
}

.service-details-action-restart svg {
  color: hsl(var(--muted-foreground));
}

.service-details-action-run svg {
  color: hsl(var(--muted-foreground));
}

.service-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.service-details-tab-panel > .service-dashboard {
  margin-top: 0;
}

.service-tab-heading {
  align-items: center;
  margin-bottom: var(--space-6);
}

.service-tab-heading h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.backup-page-header-actions {
  align-items: center;
}

.backup-schedule-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.backup-schedule-summary > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-2);
}

.backup-schedule-summary dd {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  font-weight: 500;
}

.backup-schedule-summary dd code {
  color: inherit;
  font-size: inherit;
}

.service-widget {
  min-width: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
}

.service-widget-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid hsl(var(--border));
}

.service-widget-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-widget-heading-with-icon {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.service-widget-section-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  color: hsl(var(--foreground));
}

.service-widget-heading {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-widget-heading h2,
.service-widget-heading h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.service-widget-heading p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-last-backup-widget .service-widget-header,
.service-backup-history-widget .service-widget-header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.service-widget-body {
  min-width: 0;
  padding: var(--space-5) var(--space-6);
}

.service-general-widget .service-widget-body {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.service-general-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.proxy-general-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-general-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  min-height: 4rem;
  align-items: center;
  padding: 0 var(--space-5);
  border-left: 1px solid hsl(var(--border));
}

.service-general-grid > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.service-general-grid > div:last-child {
  padding-right: 0;
}

.service-metadata-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.55);
}

.service-metadata-icon.service-status-running {
  border-color: hsl(var(--success) / 0.24);
  color: hsl(var(--success));
  background: hsl(var(--success) / 0.08);
}

.service-metadata-icon.service-status-warning {
  border-color: hsl(var(--accent-foreground) / 0.24);
  color: hsl(var(--accent-foreground));
  background: hsl(var(--accent) / 0.7);
}

.service-metadata-icon.service-status-failed {
  border-color: hsl(var(--destructive) / 0.24);
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.service-metadata-icon .status-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
}

.service-general-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-general-grid dt {
  overflow: hidden;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-general-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.service-general-grid code,
.service-general-grid time,
.service-status-value {
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}

.service-status-value {
  overflow-wrap: anywhere;
}

.service-status-value.service-status-running {
  color: hsl(var(--foreground));
}

.service-status-value.service-status-warning {
  color: hsl(var(--accent-foreground));
}

.service-status-value.service-status-failed {
  color: hsl(var(--destructive));
}

.service-status-value.service-status-neutral {
  color: hsl(var(--muted-foreground));
}

.ssh-tunnel-list {
  display: grid;
  gap: var(--space-3);
}

.ssh-tunnel-row {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  align-items: center;
}

.ssh-tunnel-row code {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-size: 0.75rem;
  white-space: nowrap;
}

.service-widget-empty {
  display: grid;
  min-height: 12rem;
  place-items: center;
  padding: var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.45);
  text-align: center;
}

.service-widget-empty p {
  max-width: 28rem;
  margin: 0;
  font-size: 0.8125rem;
}

.service-logs-widget .service-widget-header {
  align-items: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.service-logs-widget .service-widget-body {
  padding-top: 0;
  padding-bottom: var(--space-6);
}

.service-log-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-log-action {
  min-height: 2.25rem;
  padding-right: var(--space-3);
  padding-left: var(--space-3);
  gap: var(--space-2);
  white-space: nowrap;
}

.service-log-filter {
  width: 12rem;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}

.service-log-filter:focus {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.service-log-filter:focus-visible {
  outline: none;
}

.service-log-filter-empty {
  margin: var(--space-3) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-logs {
  max-height: 24rem;
  margin: 0;
  padding: var(--space-4) 0;
  overflow: auto;
  border: 1px solid hsl(var(--code) / 0.92);
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--code-foreground));
  background: hsl(var(--code));
  counter-reset: service-log-line;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  list-style: none;
  tab-size: 2;
  white-space: pre;
}

.service-logs li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  height: 1.125rem;
  min-height: 1.125rem;
  min-width: max-content;
  counter-increment: service-log-line;
  line-height: 1.125rem;
  padding-right: var(--space-4);
}

.service-logs li::before {
  content: counter(service-log-line);
  padding-right: var(--space-3);
  border-right: 1px solid hsl(var(--code-foreground) / 0.12);
  color: hsl(var(--code-foreground) / 0.45);
  text-align: right;
  user-select: none;
}

.service-logs li code {
  display: block;
  padding-left: var(--space-3);
  color: inherit;
  font: inherit;
  white-space: pre;
}

.service-logs li::before,
.service-logs li code {
  line-height: inherit;
}

.service-backup-widget .service-widget-header {
  align-items: center;
}

.service-backup-widget .service-widget-body {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.backup-schedule-header-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
}

.backup-schedule-toggle-title {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.backup-schedule-switch {
  display: inline-flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.backup-schedule-switch:hover,
.backup-schedule-switch:has(input:checked),
.backup-schedule-switch:has(input:focus-visible) {
  border-color: transparent;
  background: transparent;
}

.backup-schedule-switch .switch-visual {
  width: 3rem;
  height: 1.75rem;
  padding: var(--space-1);
  border-color: hsl(var(--input));
  background: hsl(var(--muted));
}

.backup-schedule-switch .switch-visual > span {
  width: 1.25rem;
  height: 1.25rem;
}

.backup-schedule-switch .switch-input:checked + .switch-visual {
  border-color: hsl(var(--success));
  background: hsl(var(--success));
}

.backup-schedule-switch .switch-input:checked + .switch-visual > span {
  background: hsl(var(--primary-foreground));
  transform: translateX(var(--space-5));
}

.backup-schedule-form {
  display: grid;
  gap: var(--space-8);
}

.backup-schedule-dialog .backup-schedule-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backup-schedule-dialog .backup-location-row {
  padding-top: 0;
}

.backup-schedule-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.backup-schedule-fields .field input,
.backup-schedule-fields .field select {
  min-height: 2.5rem;
}

.backup-schedule-fields .field select:disabled {
  color: hsl(var(--foreground));
  opacity: 1;
}

.backup-location-row {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-3);
}

.backup-meta-label,
.backup-summary-grid dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.backup-location-row .backup-meta-label {
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.backup-location-control {
  display: flex;
  min-width: 0;
  min-height: 2.5rem;
  align-items: stretch;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  background: hsl(var(--background));
}

.backup-location-control code {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  overflow-wrap: anywhere;
  padding: 0 var(--space-3);
  color: hsl(var(--foreground));
  font-size: 0.75rem;
}

.backup-location-copy {
  width: 2.75rem;
  height: auto;
  min-height: 0;
  border: 0;
  border-left: 1px solid hsl(var(--border));
  border-radius: 0;
  background: hsl(var(--muted) / 0.3);
}

.backup-location-copy:hover {
  background: hsl(var(--accent));
}

.backup-schedule-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.backup-schedule-action-buttons {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.backup-run-form {
  margin: 0;
}

.backup-run-disabled {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
}

.service-backup-history-widget .service-widget-body {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.backup-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

.backup-summary-grid > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.backup-summary-grid dd {
  min-width: 0;
  margin: 0;
  color: hsl(var(--foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
}

.backup-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
}

.backup-status-success {
  color: hsl(var(--success));
}

.backup-status-failed {
  color: hsl(var(--destructive));
}

.backup-status-neutral {
  color: hsl(var(--muted-foreground));
}

.backup-table-wrap {
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
}

.backup-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  text-align: left;
}

.backup-table th,
.backup-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.backup-table thead th {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.45);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.backup-table tbody tr:last-child th,
.backup-table tbody tr:last-child td {
  border-bottom: 0;
}

.backup-table tbody tr {
  transition: background-color 120ms ease;
}

.backup-table tbody tr:hover {
  background: hsl(var(--accent) / 0.35);
}

.backup-table tbody th {
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  font-weight: 500;
}

.backup-table code {
  color: hsl(var(--foreground));
  font-size: 0.75rem;
}

.backup-table-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.backup-table-actions .button {
  min-height: 2rem;
  padding-right: var(--space-3);
  padding-left: var(--space-3);
  font-size: 0.75rem;
}

.backup-table-action-form {
  display: inline;
}

.backup-table-action-form + .backup-table-action-form {
  margin-left: var(--space-2);
}

.backup-empty {
  min-height: 8rem;
  border-style: dashed;
  background: transparent;
}

.backup-empty-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
}

.backup-empty-copy {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.backup-empty-copy p {
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 500;
}

.backup-empty-copy span {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-environment-table-wrap {
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
}

.service-environment-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  text-align: left;
}

.service-environment-table th,
.service-environment-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: top;
}

.service-environment-table thead th {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.45);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-environment-table tbody tr:last-child th,
.service-environment-table tbody tr:last-child td {
  border-bottom: 0;
}

.service-environment-table tbody tr {
  transition: background-color 120ms ease;
}

.service-environment-table tbody tr:hover {
  background: hsl(var(--accent) / 0.35);
}

.service-environment-table tbody th {
  width: 35%;
  color: hsl(var(--foreground));
  font-weight: 500;
}

.service-environment-table tbody td {
  color: hsl(var(--foreground));
  font-size: 0.75rem;
}

.service-environment-table code {
  font-size: 0.75rem;
}

.service-widget-hint {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
}

.service-form-inline label {
  width: 100%;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.service-form-inline input[type="number"] {
  width: auto;
  max-width: 6rem;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}

.service-form-inline input[type="number"]:focus {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.registry-page {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.registry-repository-list {
  display: grid;
  gap: var(--space-2);
}

.registry-repository-group {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  background: hsl(var(--card));
}

.registry-repository-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

.registry-repository-summary::-webkit-details-marker {
  display: none;
}

.registry-repository-summary::marker {
  content: "";
}

.registry-repository-summary:hover {
  background: hsl(var(--accent) / 0.35);
}

.registry-repository-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.35);
}

.registry-repository-chevron {
  flex: 0 0 auto;
  color: hsl(var(--muted-foreground));
  transition: transform 120ms ease;
}

.registry-repository-group[open] .registry-repository-chevron {
  transform: rotate(180deg);
}

.registry-repository-group[open] .registry-repository-summary {
  background: hsl(var(--muted) / 0.45);
}

.registry-repository-name {
  flex: 0 1 auto;
  overflow: hidden;
  min-width: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registry-summary-badges {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.registry-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.55);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

.registry-meta-badge svg {
  flex: 0 0 auto;
}

.registry-meta-badge time {
  font-variant-numeric: tabular-nums;
}

.registry-repository-details {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid hsl(var(--border));
}

.registry-repository-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.registry-purge-button {
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  line-height: 1.5;
}

.registry-images-table td code {
  overflow-wrap: anywhere;
}

.registry-tag-cell .registry-tag-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.registry-digest-cell {
  max-width: 24rem;
}

.registry-digest-cell code {
  display: block;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registry-created-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.routing-table {
  min-width: 48rem;
}

.service-environment-value {
  display: block;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.service-environment-masked {
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.application-environment-actions {
  width: 1%;
  padding-right: var(--space-3) !important;
  text-align: right;
  vertical-align: middle !important;
  white-space: nowrap;
}

.application-environment-action-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.application-environment-move-form {
  display: inline;
}

.application-environment-alert {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.application-environment-edit,
.application-environment-move,
.application-environment-delete {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}

.application-environment-edit:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.application-environment-move:hover {
  color: hsl(var(--primary));
  background: hsl(var(--accent));
}

.application-environment-delete:hover {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.application-environment-edit:focus-visible,
.application-environment-move:focus-visible,
.application-environment-delete:focus-visible,
.service-environment-table tbody tr:hover .application-environment-edit,
.service-environment-table tbody tr:hover .application-environment-move,
.service-environment-table tbody tr:hover .application-environment-delete,
.service-environment-table tbody tr:focus-within .application-environment-edit,
.service-environment-table tbody tr:focus-within .application-environment-move,
.service-environment-table tbody tr:focus-within .application-environment-delete {
  opacity: 1;
}

@media (hover: none) {
  .application-environment-edit,
  .application-environment-move,
  .application-environment-delete {
    opacity: 1;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.service-form-page {
  width: min(100%, 48rem);
}

.service-form-heading {
  margin: 0;
}

.service-form-card {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
}

.service-form {
  gap: var(--space-6);
}

.service-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.application-container-form-page {
  width: min(100%, 64rem);
}

.advanced-settings {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid hsl(var(--border));
}

.advanced-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.advanced-settings-header h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.advanced-settings-header p,
.advanced-settings-group-header p {
  margin: var(--space-1) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.advanced-settings-badge {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.advanced-settings-groups {
  display: grid;
  gap: var(--space-4);
}

.advanced-settings-group {
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
}

.advanced-settings-group > legend {
  padding: 0 var(--space-2);
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.repeatable-row .field > label {
  display: grid;
  gap: var(--space-2);
}

.advanced-settings-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.advanced-settings-group-header > div {
  min-width: 0;
}

.advanced-settings-group-header .button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding-right: var(--space-3);
  padding-left: var(--space-3);
  font-size: 0.75rem;
}

.advanced-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.advanced-field-wide {
  grid-column: 1 / -1;
}

.repeatable-list {
  display: grid;
  gap: var(--space-3);
}

.repeatable-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.3);
}

.port-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(8rem, 0.75fr) auto;
}

.volume-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(8rem, 0.75fr) auto;
}

.repeatable-row .field {
  min-width: 0;
}

.repeatable-remove {
  margin-bottom: 0.125rem;
}

.field textarea {
  min-height: 4.5rem;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  resize: vertical;
}

.field textarea::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.8;
}

.field input[type="number"] {
  appearance: textfield;
}

.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.service-form-alert {
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.applications-empty-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.applications-empty-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
}

.applications-empty-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.applications-empty-copy h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.9375rem;
  font-weight: 600;
}

.applications-empty-copy p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.applications-empty-state .button {
  white-space: nowrap;
}

.application-dialog {
  width: min(calc(100% - var(--space-8)), 32rem);
  max-height: calc(100vh - var(--space-8));
  margin: auto;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
  box-shadow: 0 1rem 2.5rem hsl(var(--foreground) / 0.16);
}

.application-dialog:not([open]) {
  display: none;
}

.application-dialog::backdrop {
  background: hsl(var(--background) / 0.72);
}

.application-dialog-panel {
  display: grid;
  gap: var(--space-6);
  max-height: calc(100vh - var(--space-8));
  overflow: auto;
  padding: var(--space-6);
}

.application-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.application-dialog-header h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.application-dialog-header p {
  max-width: 24rem;
  margin: var(--space-2) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.icon-button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: transparent;
  cursor: pointer;
}

.icon-button:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.application-form {
  display: grid;
  gap: var(--space-5);
}

/* Keep nested settings tabs within the form's grid track on narrow screens. */
.proxy-settings-form {
  min-width: 0;
}

.proxy-settings-form .settings-tablist {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.field-label {
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.field-label-optional {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  outline: none;
}

.field select {
  appearance: auto;
}

.field input::placeholder,
.field textarea::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.8;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

.routing-domain-value {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.45);
}

.checkbox-field {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 2.25rem;
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.checkbox-field:hover,
.checkbox-field:has(input:checked) {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}

.checkbox-field input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 1rem;
  margin: 0.125rem 0 0;
  padding: 0;
  accent-color: hsl(var(--primary));
}

.checkbox-field-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.checkbox-field-title {
  font-size: 0.8125rem;
  font-weight: 600;
}

.checkbox-field-help {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 400;
}

.switch-field {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  min-height: 2.25rem;
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.switch-field:hover,
.switch-field:has(input:checked) {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}

.switch-field:has(input:focus-visible) {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.switch-field .checkbox-field-copy {
  flex: 1 1 auto;
}

.switch-visual {
  display: flex;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1.25rem;
  align-items: center;
  padding: var(--space-1);
  border: 1px solid hsl(var(--input));
  border-radius: 9999px;
  background: hsl(var(--muted));
  transition: border-color 120ms ease, background-color 120ms ease;
}

.switch-visual > span {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground));
  transition: background-color 120ms ease, transform 120ms ease;
}

.switch-input:checked + .switch-visual {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
}

.switch-input:checked + .switch-visual > span {
  background: hsl(var(--primary-foreground));
  transform: translateX(var(--space-3));
}

.secret-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
}

.secret-input-wrap {
  position: relative;
  min-width: 0;
}

.secret-input-wrap input {
  padding-right: calc(var(--space-8) + var(--space-2));
}

.secret-input-wrap-with-copy input {
  padding-right: calc(var(--space-8) + var(--space-8) + var(--space-2));
}

.secret-visibility-toggle,
.secret-copy-button {
  position: absolute;
  top: 50%;
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.secret-visibility-toggle {
  right: var(--space-1);
}

.secret-copy-button {
  right: calc(var(--space-1) + 2rem);
}

.secret-visibility-toggle:hover,
.secret-copy-button:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.secret-visibility-toggle:focus-visible,
.secret-copy-button:focus-visible {
  border-color: hsl(var(--ring) / 0.5);
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.secret-visibility-toggle:disabled,
.secret-copy-button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.secret-visibility-toggle svg[hidden] {
  display: none !important;
}

.secret-copy-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 20;
  max-width: 16rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  font-size: 0.75rem;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.15);
  pointer-events: none;
}

.secret-copy-tooltip[hidden] {
  display: none !important;
}

.secret-copy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 2.75rem;
  width: 0.5rem;
  height: 0.5rem;
  background: inherit;
  border-right: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  transform: translateY(-50%) rotate(45deg);
}

.secret-generate-button {
  gap: var(--space-2);
  white-space: nowrap;
}

.field-help {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.application-form-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  font-size: 0.75rem;
}

.application-form-note-mark {
  display: grid;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.625rem;
  font-weight: 700;
}

.application-form-note code {
  color: hsl(var(--foreground));
}

.github-actions-page {
  max-width: 64rem;
}

.github-actions-page > .service-form-heading .page-heading-copy {
  gap: var(--space-3);
}

.github-actions-page > .service-form-heading + .service-widget {
  margin-top: var(--space-6);
}

.github-actions-page > .application-alert {
  margin-bottom: var(--space-4);
}

.github-actions-handoff-body {
  display: grid;
  gap: var(--space-6);
}

.settings-ssh-keys-body {
  display: grid;
  gap: var(--space-6);
}

.github-actions-handoff-section {
  display: grid;
  gap: var(--space-3);
}

.github-actions-handoff-section h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
}

.github-actions-handoff-section .service-widget-header {
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid hsl(var(--border));
}

.github-actions-values {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.github-actions-values div {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.35);
}

.github-actions-values dt,
.github-actions-values dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
}

.github-actions-values dt {
  color: hsl(var(--muted-foreground));
}

.github-actions-values dd {
  color: hsl(var(--foreground));
}

.github-actions-secret,
.github-actions-technical,
.github-actions-workflow {
  min-height: 0 !important;
  padding: var(--space-3) !important;
  white-space: pre;
  overflow: auto;
  resize: vertical;
  color: hsl(var(--code-foreground)) !important;
  background: hsl(var(--code)) !important;
  line-height: 1.45;
}

.github-actions-secret {
  min-height: 11rem !important;
}

.github-actions-technical {
  min-height: 4rem !important;
}

.github-actions-workflow {
  min-height: 28rem !important;
}

.github-actions-handoff-section .button {
  justify-self: start;
}

.github-actions-instructions {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-6);
  color: hsl(var(--muted-foreground));
}

.github-actions-instructions code {
  color: hsl(var(--foreground));
}

.application-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid hsl(var(--border));
}

.service-delete-dialog .application-dialog-header p {
  max-width: 26rem;
}

.service-delete-impact {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.service-delete-impact .application-form-note-mark {
  border-color: hsl(var(--destructive));
  color: hsl(var(--destructive));
}

.service-action-error-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.service-action-error-label {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-action-error-detail {
  max-height: 12rem;
  margin: 0;
  overflow: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid hsl(var(--code) / 0.92);
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--code-foreground));
  background: hsl(var(--code));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.service-action-error-detail code {
  color: inherit;
  font: inherit;
  white-space: inherit;
}

.application-delete-dialog .application-dialog-header p {
  max-width: 28rem;
}

.application-delete-impact {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.application-delete-impact .application-form-note-mark {
  border-color: hsl(var(--destructive));
  color: hsl(var(--destructive));
}

@media (max-width: 800px) {
  .service-dashboard,
  .dashboard-overview-grid,
  .dashboard-process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .service-general-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-general-grid > div {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .service-general-grid > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .service-general-grid > div:nth-child(even) {
    padding-right: 0;
  }

  .service-general-grid > div:nth-child(n + 3) {
    padding-top: var(--space-3);
    border-top: 1px solid hsl(var(--border));
  }
}

@media (max-width: 640px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
  }

  .sidebar-header {
    min-height: 3.5rem;
  }

  .main-header {
    min-height: 3.5rem;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
  }

  .main-header .server-info {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .main-header .server-info-details {
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .main-header .server-info-row {
    display: grid;
    gap: var(--space-1);
  }

  .side-menu {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .sidebar-user-widget {
    margin-top: var(--space-2);
  }

  .main-content {
    min-height: calc(100vh - 6.25rem);
    padding: var(--space-6) var(--space-4);
  }

  .setup-shell {
    padding-top: var(--space-4);
  }

  .setup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .setup-progress-dialog {
    max-height: calc(100vh - var(--space-6));
    padding: var(--space-4);
  }

  .setup-progress-actions .button {
    width: 100%;
  }

  .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-refresh-note {
    align-self: flex-start;
  }

  .service-details-actions {
    width: 100%;
    margin-left: 0;
    align-items: stretch;
  }

  .service-details-action-form {
    flex: 1 1 100%;
  }

  .applications-empty-state {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-6) var(--space-4);
  }

  .applications-empty-state .button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .application-dialog {
    max-height: calc(100vh - var(--space-6));
  }

  .service-form-card {
    padding: var(--space-4);
  }

  .service-form-grid {
    grid-template-columns: 1fr;
  }

  .advanced-settings-header,
  .advanced-settings-group-header {
    align-items: stretch;
    flex-direction: column;
  }

  .advanced-settings-group-header .button {
    align-self: flex-start;
  }

  .advanced-settings-grid,
  .repeatable-row,
  .port-row,
  .volume-row {
    grid-template-columns: 1fr;
  }

  .advanced-field-wide {
    grid-column: auto;
  }

  .repeatable-remove {
    justify-self: start;
  }

  .application-dialog-panel {
    max-height: calc(100vh - var(--space-6));
    padding: var(--space-4);
  }

  .secret-input-row {
    grid-template-columns: 1fr;
  }

  .services-section-header {
    align-items: stretch;
    flex-direction: column;
    padding: var(--space-4);
  }

  .services-section-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .services-section-actions > .button {
    width: 100%;
  }

  .service-split-button {
    width: 100%;
  }

  .service-split-button-main {
    flex: 1;
  }

  .service-widget-header,
  .service-widget-body {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .service-widget-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .github-actions-values div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .service-widget-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .service-log-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .service-log-filter {
    flex: 1 1 12rem;
    width: auto;
  }

  .backup-schedule-header-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .service-general-grid {
    grid-template-columns: 1fr;
  }

  .service-general-grid > div,
  .service-general-grid > div:nth-child(even),
  .service-general-grid > div:nth-child(odd) {
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid hsl(var(--border));
    border-left: 0;
  }

  .service-general-grid > div:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .service-general-grid > div:not(:first-child) {
    padding-top: var(--space-3);
  }

  .service-general-grid > div:last-child {
    padding-bottom: 0;
  }

  .backup-schedule-fields,
  .backup-summary-grid {
    grid-template-columns: 1fr;
  }

  .backup-schedule-dialog .backup-schedule-fields {
    grid-template-columns: 1fr;
  }

  .backup-schedule-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .backup-schedule-switch {
    align-self: flex-start;
  }

  .backup-schedule-actions .button {
    width: 100%;
  }

  .backup-schedule-action-buttons {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .backup-run-disabled {
    justify-items: stretch;
  }

  .services-empty-state {
    padding: var(--space-6) var(--space-4);
  }

  .application-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .application-danger-zone-action {
    align-items: stretch;
    flex-direction: column;
  }

  .application-clone-zone-action {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-tablist {
    flex-direction: row;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
    padding-right: 0;
  }

  .settings-tablist .application-tab {
    margin-right: 0;
    margin-bottom: -1px;
    border-right: 0;
    border-bottom: 2px solid transparent;
  }

  .settings-tablist .application-tab[aria-selected="true"] {
    border-right-color: transparent;
    border-bottom-color: hsl(var(--primary));
  }

  .registry-repository-summary {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .registry-repository-name {
    flex: 1 1 100%;
  }

  .registry-summary-badges {
    flex: 1 1 100%;
  }

  .registry-repository-actions {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .registry-digest-cell {
    max-width: none;
  }

  .registry-repository-details {
    padding: var(--space-4);
  }

  .databases-enable-card {
    padding: var(--space-6) var(--space-4);
  }

  .databases-enable-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .databases-enable-switch {
    order: -1;
    justify-self: end;
  }

  .databases-enable-actions .button {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.compose-import-dialog .application-dialog-panel {
  max-width: 44rem;
}

.ssh-key-setup-dialog {
  width: min(calc(100% - var(--space-8)), 40rem);
}

.compose-import-preview-container:empty {
  display: none;
}

.compose-import-preview {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.35);
}

.compose-import-preview-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.compose-import-preview-section {
  display: grid;
  gap: var(--space-3);
}

.compose-import-preview-section-header h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.compose-import-preview-section-header p {
  margin: var(--space-1) 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.compose-import-preview-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.compose-import-preview-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.compose-import-preview-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
}

.compose-import-preview-check input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: hsl(var(--primary));
}

.compose-import-preview-check-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.compose-import-preview-name code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
}

.service-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-type-badge.service-type-database {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.service-type-badge.service-type-cache {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
  border-color: hsl(var(--border));
}

.compose-import-preview-reason {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.compose-import-preview-details {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.compose-import-preview-details div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-2);
  align-items: baseline;
}

.compose-import-preview-details dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 600;
}

.compose-import-preview-details dd {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.compose-import-preview-details code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
}

.compose-import-preview-empty {
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

.compose-import-preview-empty-section {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.service-catalog-dialog {
  width: min(calc(100% - var(--space-8)), 48rem);
  overflow: hidden;
}

.service-catalog-dialog .application-dialog-panel {
  max-width: 48rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.service-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.service-catalog-filter[aria-pressed="true"] {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

.service-catalog-count {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.service-catalog-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.service-catalog-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.service-catalog-card-header h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.service-catalog-card-description {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.service-catalog-card-details {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.service-catalog-card-details div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-2);
  align-items: baseline;
}

.service-catalog-card-details dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 600;
}

.service-catalog-card-details dd {
  margin: 0;
  min-width: 0;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.service-catalog-card-details code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
}

.service-catalog-card .field-help {
  margin: 0;
}

.service-catalog-use {
  justify-self: start;
}

.service-catalog-empty {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-style: italic;
}

.service-form-preset-note {
  margin-bottom: var(--space-5);
}

.main-content:has(.databases-page) {
  background: hsl(var(--muted) / 0.25);
}

.databases-page {
  width: 100%;
}

.databases-page .page-heading-copy h1 {
  font-size: 2rem;
}

.databases-page .page-heading-copy p {
  font-size: 1rem;
}

.databases-enable-card {
  margin-top: var(--space-6);
  padding: var(--space-6);
}

.databases-enable-hero {
  display: grid;
  grid-template-columns: minmax(16rem, 27%) minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: start;
}

.databases-enable-visual {
  display: grid;
  min-width: 0;
  align-self: center;
  place-items: center;
}

.databases-enable-visual img {
  display: block;
  width: min(100%, 20rem);
  height: auto;
}

.databases-enable-copy {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  align-content: start;
  justify-items: start;
  padding-top: var(--space-2);
}

.databases-enable-copy .service-status-badge {
  border-color: transparent;
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.databases-enable-copy .service-status-badge .status-dot {
  background: hsl(var(--muted-foreground) / 0.4);
}

.databases-enable-copy h2 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.databases-enable-description {
  max-width: 38rem;
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  line-height: 1.6;
}

.databases-enable-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-3);
}

.databases-enable-button {
  min-height: 3rem;
  padding: 0 var(--space-6);
  border-color: hsl(var(--brand));
  background: hsl(var(--brand));
  color: hsl(var(--brand-foreground));
  font-size: 1rem;
  font-weight: 600;
}

.databases-enable-button:hover {
  background: hsl(var(--brand) / 0.9);
}

.databases-docs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.databases-docs-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.databases-enable-hint {
  max-width: 38rem;
  margin: 0;
  font-size: 0.875rem;
}

.databases-enable-switch {
  flex: 0 0 auto;
}

.databases-switch-field {
  min-height: 0;
  padding: var(--space-4) var(--space-5);
}

.databases-switch-field .switch-visual {
  width: 3rem;
  height: 1.75rem;
}

.databases-switch-field .switch-visual > span {
  width: 1.125rem;
  height: 1.125rem;
}

.databases-switch-field .switch-input:checked + .switch-visual > span {
  transform: translateX(var(--space-5));
}

.databases-enable-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid hsl(var(--border));
}

.databases-feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}

.databases-feature-icon {
  display: grid;
  width: calc(var(--space-8) * 2);
  height: calc(var(--space-8) * 2);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius);
  color: hsl(var(--brand));
  background: hsl(var(--brand) / 0.08);
}

.databases-feature-icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

.databases-feature-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.databases-feature-copy h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.databases-feature-copy p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  line-height: 1.5;
}

@media (max-width: 64rem) {
  .databases-enable-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .databases-enable-visual {
    display: none;
  }
}

@media (max-width: 80rem) {
  .databases-enable-features {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .databases-enable-card {
    padding: var(--space-4);
  }

  .databases-enable-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .databases-feature-card {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .databases-enable-button {
    max-width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    white-space: normal;
  }

  .databases-feature-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .databases-feature-copy h3,
  .databases-feature-copy p {
    font-size: 1rem;
  }
}

@media (max-width: 48rem) {
  .service-catalog-grid {
    grid-template-columns: 1fr;
  }
}

.service-run-parameters-dialog {
  width: min(calc(100% - var(--space-8)), 48rem);
}

.service-run-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.service-run-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.service-run-section-header h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
}

.service-run-section-header p {
  margin: var(--space-1) 0 0;
}

.service-run-rows {
  display: grid;
  gap: var(--space-2);
}

.service-run-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.service-run-environment-row {
  grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr) auto;
}

.service-run-row input,
.service-run-row select {
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
  outline: none;
}

.service-run-row input:focus,
.service-run-row select:focus {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.service-run-row-actions {
  display: flex;
  gap: var(--space-1);
}

.service-run-row-actions .icon-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.service-run-preview {
  max-height: 12rem;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid hsl(var(--code) / 0.92);
  border-radius: var(--radius);
  color: hsl(var(--code-foreground));
  background: hsl(var(--code));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.service-run-confirmation {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}

.service-run-confirmation input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: hsl(var(--primary));
}

.service-run-warning {
  margin: 0;
}

.toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.toast-actions .toast-action {
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: 0.75rem;
}

.service-action-output-dialog {
  width: min(calc(100% - var(--space-8)), 56rem);
}

.service-action-output-body {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.service-action-output-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
}

.service-action-output-summary div {
  display: grid;
  gap: var(--space-1);
}

.service-action-output-summary dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-action-output-summary dd {
  margin: 0;
}

.service-action-output-notice {
  margin: 0;
}

.service-action-output-section {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.service-action-output-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.service-action-output-section-header h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}

.service-action-output-pre {
  max-height: 22rem;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid hsl(var(--code) / 0.92);
  border-radius: calc(var(--radius) - 0.125rem);
  color: hsl(var(--code-foreground));
  background: hsl(var(--code));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  .service-run-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .service-run-section-header .button {
    justify-content: center;
  }

  .service-run-environment-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .service-run-environment-row select {
    grid-column: 1 / -1;
  }

  .service-action-output-section-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.toast-stack {
  position: fixed;
  z-index: 20;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  gap: var(--space-3);
  width: min(calc(100vw - 2rem), 24rem);
}

.toast {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--card-foreground));
  background: hsl(var(--card));
  box-shadow: 0 0.5rem 1.5rem hsl(var(--foreground) / 0.12);
}

.toast-running .toast-icon {
  color: hsl(var(--muted-foreground));
  animation: toast-pulse 1.2s ease-in-out infinite;
}

.toast-complete {
  border-color: hsl(var(--success) / 0.5);
}

.toast-complete .toast-icon {
  color: hsl(var(--success));
}

.toast-failed {
  border-color: hsl(var(--destructive) / 0.5);
}

.toast-failed .toast-icon {
  color: hsl(var(--destructive));
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.8125rem;
  line-height: 1;
}

.toast-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.toast-title {
  font-size: 0.8125rem;
  font-weight: 600;
}

.toast-title code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
}

.toast-detail {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.toast-close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.toast-close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
}

.toast-error {
  color: hsl(var(--destructive));
  font-size: 0.75rem;
}

.toast-error[hidden] {
  display: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .toast-running .toast-icon {
    animation: none;
  }
}

.toast-technical code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* Enabled managed databases compose the existing cards, tables and dialogs. */
.databases-enabled-card {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
}

.databases-enabled-card .databases-enable-hero {
  grid-template-columns: minmax(12rem, 20%) minmax(0, 1fr) auto;
  gap: var(--space-6);
}

.databases-enabled-card .databases-enable-visual img {
  width: min(100%, 15rem);
}

.databases-enabled-card .databases-enable-copy {
  gap: var(--space-2);
}

.databases-enabled-card .databases-enable-copy h2 {
  font-size: 1.5rem;
}

.databases-enabled-card .databases-enable-description,
.databases-enabled-card .databases-docs-link {
  font-size: 0.875rem;
}

.databases-enabled-card .databases-enable-actions {
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.databases-page .databases-enabled-card .service-status-running .status-dot {
  background: hsl(var(--success));
}

.databases-enabled-card .databases-enable-hint {
  max-width: none;
  font-size: 0.75rem;
}

.databases-enabled-card .databases-enable-button,
.databases-page .databases-management-widget .databases-enable-button,
.databases-page .service-tab-heading .databases-enable-button,
.databases-page .application-dialog .databases-enable-button,
.databases-page .service-widget-empty .databases-enable-button {
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  font-size: 0.875rem;
}

.databases-enabled-switch {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-3);
}

.databases-enabled-switch .switch-visual {
  border-color: hsl(var(--brand));
  background: hsl(var(--brand));
}

.databases-enabled-switch .switch-visual > span {
  background: hsl(var(--brand-foreground));
  transform: translateX(var(--space-5));
}

.databases-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.databases-stat {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.databases-stat .databases-feature-icon {
  width: 3rem;
  height: 3rem;
}

.databases-stat h3 {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 500;
}

.databases-stat-value {
  margin: var(--space-1) 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.databases-stat .dashboard-metric-help {
  margin-top: var(--space-1);
}

.databases-engine-icon {
  color: hsl(var(--primary));
  background: hsl(var(--muted));
}

.databases-running-icon {
  color: hsl(var(--success));
  background: hsl(var(--success) / 0.1);
}

.databases-neutral-icon {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
}

.databases-page .application-tabs {
  margin-top: var(--space-4);
}

.databases-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.databases-overview-grid .service-widget-header {
  flex-wrap: wrap;
  border-bottom: 0;
  padding: var(--space-4) var(--space-5) 0;
}

.databases-overview-grid .service-widget-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.databases-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.databases-filters .field {
  flex: 1 1 auto;
}

.databases-filters input {
  font-family: var(--font-sans);
}

.databases-name {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.databases-name svg {
  flex: 0 0 auto;
  color: hsl(var(--brand));
}

.databases-row-actions {
  white-space: nowrap;
}

.databases-row-actions > a,
.databases-row-actions > form {
  vertical-align: middle;
}

.databases-row-actions form {
  display: inline-block;
}

.databases-drop-button {
  color: hsl(var(--destructive-foreground));
  background: hsl(var(--destructive));
}

.databases-drop-button:hover {
  color: hsl(var(--destructive-foreground));
  background: hsl(var(--destructive) / 0.9);
}

.databases-users-list {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  list-style: none;
}

.databases-users-list li {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
}

.databases-users-list li + li {
  border-top: 1px solid hsl(var(--border));
}

.databases-users-list li > div {
  display: grid;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.databases-users-list code {
  font-size: 0.75rem;
}

.databases-user-avatar {
  display: grid;
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
}

.databases-view-link {
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 80rem) {
  .databases-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 64rem) {
  .databases-enabled-card .databases-enable-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .databases-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .databases-enabled-card,
  .databases-stat {
    padding: var(--space-4);
  }

  .databases-stat {
    gap: var(--space-3);
  }

  .databases-stat .databases-feature-icon {
    display: none;
  }

  .databases-enabled-card .databases-enable-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .databases-enabled-switch {
    grid-row: 1;
    justify-self: end;
  }
}

.databases-management-widget .service-widget-header {
  flex-wrap: wrap;
  border-bottom: 0;
  padding: var(--space-4) var(--space-5) 0;
}

.databases-management-widget .service-widget-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.databases-table-toolbar {
  align-items: end;
  margin-bottom: var(--space-4);
}

.databases-access-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.databases-default-label {
  display: block;
  margin-top: var(--space-1);
}

.databases-row-actions .button {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  font-size: 0.75rem;
}

.form-fieldset,
.databases-access-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-fieldset legend,
.databases-access-fieldset legend {
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.form-fieldset {
  display: grid;
  gap: var(--space-2);
}

.databases-access-choices {
  display: grid;
  gap: var(--space-2);
  max-height: 16rem;
  overflow: auto;
  padding: var(--space-1);
}

.databases-backup-grid,
.databases-settings-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
}

.databases-settings-grid {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}

.databases-widget-stack {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.databases-widget-stack > p {
  margin: 0;
}

.databases-technical-value {
  overflow-wrap: anywhere;
}

.databases-details-grid {
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.databases-settings-grid .service-details-actions {
  margin-left: 0;
}

@media (max-width: 80rem) {
  .databases-backup-grid,
  .databases-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .databases-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.databases-table-toolbar .field {
  flex: 0 1 24rem;
}

.databases-page .field[hidden] {
  display: none;
}

.databases-page .databases-schedule-fields {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.databases-name .databases-user-avatar svg {
  color: inherit;
}

.databases-page .application-danger-zone-header h3 {
  color: hsl(var(--foreground));
}

/* Service versions */

.service-versions-table {
  min-width: 36rem;
}

.service-versions-table tbody td {
  vertical-align: middle;
}

.service-versions-digest code,
.service-versions-switch dd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.service-versions-pushed {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-versions-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.service-versions-tags .registry-meta-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.registry-meta-badge.registry-meta-badge-deployment {
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--foreground));
  background: hsl(var(--primary) / 0.08);
  font-weight: 600;
}

.service-versions-actions {
  text-align: right;
  white-space: nowrap;
}

.service-versions-current {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.service-versions-switch {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.service-versions-switch div {
  display: grid;
  gap: var(--space-1);
}

.service-versions-switch dt {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
}

.service-versions-switch dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}

.application-versions-preview {
  min-height: 1.25rem;
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

.application-versions-preview:empty {
  display: none;
}

/* Application-wide version deployment progress */

.setup-progress-step-detail {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.setup-progress-step-skipped {
  border-style: dashed;
  background: hsl(var(--muted) / 0.45);
}

.setup-progress-step-skipped .setup-progress-step-icon {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
}

.setup-progress-summary {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}

/* Dashboard compositions reuse the Card, Table, Button and Alert Dialog tokens. */


.dashboard-resource-body, .dashboard-images-body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dashboard-images-body { flex-wrap: wrap; justify-content: space-between; }
.dashboard-gauge { width: calc(var(--space-8) * 2); height: calc(var(--space-8) * 2); flex-shrink: 0; }
.dashboard-gauge-track { stroke: hsl(var(--muted)); }
.dashboard-gauge-fill { stroke: hsl(var(--info)); }
.dashboard-cpu .dashboard-gauge-fill { stroke: hsl(var(--success)); }
.dashboard-memory .dashboard-gauge-fill { stroke: hsl(var(--primary)); }
.dashboard-container-status { display: inline-flex; align-items: center; gap: var(--space-2); text-transform: capitalize; white-space: nowrap; }
.dashboard-container-status::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: hsl(var(--muted-foreground)); }
.dashboard-running::before { background: hsl(var(--success)); }
.dashboard-table-note { margin: 0; padding: var(--space-3) var(--space-4); font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.dashboard-trends { margin-top: var(--space-5); }
.dashboard-trends .dashboard-process-grid { margin-top: 0; }
.dashboard-trends h3 { margin: 0 0 var(--space-3); font-size: 0.8125rem; font-weight: 600; }
.dashboard-chart { width: 100%; height: calc(var(--space-8) * 5); margin-top: var(--space-4); overflow: visible; }
.dashboard-chart-with-legend { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); }
.dashboard-chart-grid { stroke: hsl(var(--border)); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.dashboard-chart-line { stroke: hsl(var(--series-color)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dashboard-series-0 { --series-color: var(--destructive); }
.dashboard-series-1 { --series-color: var(--info); }
.dashboard-series-2 { --series-color: var(--primary); }
.dashboard-series-3 { --series-color: var(--success); }
.dashboard-series-4 { --series-color: var(--warning); }
.dashboard-chart-legend { list-style: none; margin: var(--space-4) 0 0; padding: 0; font-size: 0.75rem; }
.dashboard-chart-legend li { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.dashboard-chart-legend code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-series-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: hsl(var(--series-color)); flex-shrink: 0; }
.dashboard-chart-times { display: flex; justify-content: space-between; margin-top: var(--space-2); color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
@media (max-width: 1280px) {
  .dashboard-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-page > .dashboard-metrics > .dashboard-process-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dashboard-overview-grid, .dashboard-trends .dashboard-process-grid { grid-template-columns: minmax(0, 1fr); }
}

.dashboard-page .dashboard-process-table th,
.dashboard-page .dashboard-process-table td { padding: var(--space-3); }
.dashboard-page .dashboard-process-table tbody th code { display: inline; font-size: 0.75rem; }
.dashboard-page .dashboard-process-table tbody td { font-size: 0.75rem; white-space: nowrap; }
.dashboard-page .dashboard-process-grid { grid-template-columns: minmax(0, 1fr); }
.dashboard-page .dashboard-trends .dashboard-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1280px) {
 .dashboard-page .dashboard-process-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
 .dashboard-page .dashboard-trends .dashboard-process-grid { grid-template-columns: minmax(0, 1fr); }
 .dashboard-chart-with-legend { grid-template-columns: minmax(0, 1fr); }
 .dashboard-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
}

.dashboard-page .dashboard-volumes-table { min-width: 0; table-layout: fixed; }
.dashboard-page .dashboard-volumes-table th:first-child { width: 30%; }
.dashboard-page .dashboard-volumes-table th:nth-child(2) { width: 20%; }
.dashboard-page .dashboard-volumes-table th:last-child { width: 15%; }
.dashboard-page .dashboard-volumes-table tbody th code,
.dashboard-page .dashboard-volumes-table tbody td code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-page .dashboard-volumes-table tbody td { overflow: hidden; text-overflow: ellipsis; }