/* DignityHost design overlay — design only (colours, fonts, surfaces). Mirrors dash.dignityhost.com. */

/*
  DignityHost design system — mirrors dash.dignityhost.com.
  primary   #0774ff  — actions, links, focus
  secondary #2d3c58  — text, chrome, dark surfaces
  tertiary  #ffc107  — highlights, badges, attention
  Design only: the console's emerald / slate utility classes are re-pointed at the dash palette here,
  so every existing component picks the new look up without any markup or logic change.
*/
/* theme tokens */
:root {
  --font-sans: 'Geist', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Geist', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'Geist Mono', 'Fira Code', 'JetBrains Mono', Monaco, 'Courier New', monospace;

  /* Brand blue (replaces the old emerald scale everywhere it is used). */
  --color-brand-50: #eaf3ff;
  --color-brand-100: #d6e7ff;
  --color-brand-200: #b3d3ff;
  --color-brand-300: #8cc4ff;
  --color-brand-400: #5babff;
  --color-brand-500: #2b86ff;
  --color-brand-600: #0774ff;
  --color-brand-700: #0560d6;
  --color-brand-800: #0450b3;
  --color-brand-900: #063a80;

  --color-emerald-50: #eaf3ff;
  --color-emerald-100: #d6e7ff;
  --color-emerald-200: #b3d3ff;
  --color-emerald-300: #8cc4ff;
  --color-emerald-400: #5babff;
  --color-emerald-500: #2b86ff;
  --color-emerald-600: #0774ff;
  --color-emerald-700: #0560d6;
  --color-emerald-800: #0450b3;
  --color-emerald-900: #063a80;

  /* Neutrals follow the dash blue-grey (#2d3c58) family. */
  --color-slate-50: #f4f7fb;
  --color-slate-100: #eef2f7;
  --color-slate-200: #dbe2ee;
  --color-slate-300: #b8c0d0;
  --color-slate-400: #8b97ab;
  --color-slate-500: #7d8aa3;
  --color-slate-600: #5a6b87;
  --color-slate-700: #3a4d6d;
  --color-slate-800: #2d3c58;
  --color-slate-900: #1a2335;
  --color-slate-950: #121826;

  /* Attention colour = dash tertiary. */
  --color-amber-300: #ffd54f;
  --color-amber-400: #ffc107;
  --color-amber-500: #e6ac00;
}

:root,
[data-theme='dark'] {
  color-scheme: dark;
  --app-accent: #3d8fff;
  --app-accent-strong: #5babff;
  --app-accent-rgb: 61 143 255;
  --app-bg: #121826;
  --app-bg-soft: rgb(26 35 53 / 0.78);
  --app-surface: #1a2335;
  --app-surface-muted: rgb(255 255 255 / 0.05);
  --app-surface-hover: rgb(255 255 255 / 0.08);
  --app-border: rgb(255 255 255 / 0.12);
  --app-border-soft: rgb(255 255 255 / 0.07);
  --app-text: #b8c0d0;
  --app-text-muted: #7d8aa3;
  --app-text-subtle: rgb(125 138 163 / 0.8);
  --app-text-strong: #f4f7fb;
  --app-topbar: rgb(26 35 53 / 0.78);
  --app-chip: rgb(255 255 255 / 0.05);
  --app-chip-hover-border: rgb(255 255 255 / 0.22);
  --app-chip-hover-text: #f4f7fb;
  --app-shadow: rgb(0 0 0 / 0.45);
  --app-ring: rgb(61 143 255 / 0.38);
  --app-glow-a: rgb(7 116 255 / 0.14);
  --app-glow-b: rgb(255 193 7 / 0.05);
}

[data-theme='light'] {
  color-scheme: light;
  --app-accent: #0774ff;
  --app-accent-strong: #0560d6;
  --app-accent-rgb: 7 116 255;
  --app-bg: #f4f7fb;
  --app-bg-soft: rgb(255 255 255 / 0.78);
  --app-surface: #ffffff;
  --app-surface-muted: #eef2f7;
  --app-surface-hover: #e6ecf4;
  --app-border: rgb(45 60 88 / 0.14);
  --app-border-soft: rgb(45 60 88 / 0.08);
  --app-text: #2d3c58;
  --app-text-muted: #5a6b87;
  --app-text-subtle: #8b97ab;
  --app-text-strong: #2d3c58;
  --app-topbar: rgb(255 255 255 / 0.78);
  --app-chip: #eef2f7;
  --app-chip-hover-border: rgb(45 60 88 / 0.28);
  --app-chip-hover-text: #2d3c58;
  --app-shadow: rgb(45 60 88 / 0.1);
  --app-ring: rgb(7 116 255 / 0.28);
  --app-glow-a: rgb(7 116 255 / 0.1);
  --app-glow-b: rgb(255 193 7 / 0.06);
}


  html {
    background: var(--app-bg);
    color: var(--app-text);
  }

  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    background:
      radial-gradient(circle at top left, var(--app-glow-a), transparent 34%),
      radial-gradient(circle at top right, var(--app-glow-b), transparent 28%),
      var(--app-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
  }

  ::selection {
    background: rgb(var(--app-accent-rgb) / 0.35);
    color: var(--app-text-strong);
  }

  /* Slim, theme-aware scrollbars (same as dash). */
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--app-text-muted) 55%, transparent) transparent;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--app-text-muted) 45%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }



  .app-shell {
    background: transparent;
  }

  .app-main {
    background: transparent;
  }

  .app-topbar {
    border-color: var(--app-border-soft);
    background: var(--app-topbar);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .app-sidebar {
    border-color: var(--app-border-soft);
    background: var(--app-bg-soft);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .app-sidebar-link {
    border-radius: 10px;
    color: var(--app-text);
  }

  .app-sidebar-link:hover {
    border-color: transparent;
    background: var(--app-surface-muted);
    color: var(--app-text-strong);
  }

  .app-sidebar-link-active {
    border-radius: 10px;
    border-color: transparent;
    background: rgb(var(--app-accent-rgb) / 0.1);
    color: var(--app-accent);
  }

  .app-dropdown {
    border-color: var(--app-border-soft);
    border-radius: 0.875rem;
    background: var(--app-surface);
    box-shadow: 0 24px 64px var(--app-shadow);
  }

  .app-muted-text {
    color: var(--app-text-muted);
  }

  .app-strong-text {
    color: var(--app-text-strong);
  }

  .page-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--app-text-strong);
  }

  .page-subtitle {
    margin-top: 0.25rem;
    font-size: 13px;
    line-height: 1.625;
    color: var(--app-text-muted);
  }

  .input-field {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--app-text-strong);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .input-field::placeholder {
    color: var(--app-text-subtle);
  }

  .input-field:focus {
    border-color: var(--app-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--app-ring);
  }

  .panel {
    border-radius: 1rem;
    border: 1px solid var(--app-border-soft);
    background: var(--app-surface);
    box-shadow: 0 1px 2px var(--app-shadow), 0 4px 16px rgb(var(--app-accent-rgb) / 0.06);
  }

  .panel-muted {
    border-radius: 0.75rem;
    border: 1px solid var(--app-border-soft);
    background: var(--app-surface-muted);
  }

  .filter-chip {
    border: 1px solid var(--app-border);
    border-radius: 999px;
    color: var(--app-text-muted);
  }

  .filter-chip:hover {
    border-color: var(--app-chip-hover-border);
    color: var(--app-chip-hover-text);
  }

  .filter-chip-active {
    border-color: rgb(var(--app-accent-rgb) / 0.4);
    background: rgb(var(--app-accent-rgb) / 0.12);
    color: var(--app-accent);
  }

  .model-card {
    border: 1px solid var(--app-border-soft);
    border-radius: 1rem;
    background: var(--app-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .model-card:hover {
    border-color: rgb(var(--app-accent-rgb) / 0.35);
    box-shadow: 0 8px 28px var(--app-shadow);
  }

  .topbar-icon-btn {
    border: 1px solid var(--app-border-soft);
    color: var(--app-text-muted);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .topbar-icon-btn:hover {
    background: var(--app-surface-muted);
    color: var(--app-text-strong);
  }

  .topbar-link {
    border: 1px solid var(--app-border-soft);
    color: var(--app-text-muted);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .topbar-link:hover {
    border-color: rgb(var(--app-accent-rgb) / 0.35);
    background: rgb(var(--app-accent-rgb) / 0.06);
    color: var(--app-text-strong);
  }

  .dropdown-item:hover {
    background: var(--app-surface-muted);
  }

  .status-dot-operational {
    background-color: var(--color-emerald-400);
    animation: status-pulse 2s ease-in-out infinite;
  }


@keyframes status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(var(--app-accent-rgb) / 0.6);
  }

  50% {
    box-shadow: 0 0 0 6px rgb(var(--app-accent-rgb) / 0);
  }
}

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


  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--app-text-muted) 55%, transparent) transparent;
  }


.catalog-shuffle-move,
.catalog-shuffle-enter-active,
.catalog-shuffle-leave-active {
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.catalog-shuffle-enter-from,
.catalog-shuffle-leave-to {
  opacity: 0;
  transform: scale(0.96) translateY(10px);
}

.catalog-group-enter-active,
.catalog-group-leave-active {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.catalog-group-enter-from,
.catalog-group-leave-to {
  opacity: 0;
  transform: translateY(8px);
}

.app-table-wrap {
  border-color: var(--app-border-soft);
}

.app-table-head {
  border-color: var(--app-border-soft);
  background: var(--app-surface-muted);
}

.app-table-body {
  border-color: var(--app-border-soft);
}

.app-table-row:hover {
  background: var(--app-surface-muted);
}

.app-body-text {
  color: var(--app-text);
}

.app-label-text {
  color: var(--app-text-muted);
}

[data-theme='light'] .text-slate-200,
[data-theme='light'] .text-slate-300 {
  color: var(--app-text-strong);
}

[data-theme='light'] .text-slate-400 {
  color: var(--app-text-muted);
}

[data-theme='light'] .text-slate-500,
[data-theme='light'] .text-slate-600 {
  color: var(--app-text-muted);
}

[data-theme='light'] .border-slate-800,
[data-theme='light'] .border-slate-800\/80,
[data-theme='light'] .border-slate-700,
[data-theme='light'] .border-slate-800\/60 {
  border-color: var(--app-border);
}

[data-theme='light'] .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--app-border-soft);
}

[data-theme='light'] .bg-slate-900\/30,
[data-theme='light'] .bg-slate-900\/40,
[data-theme='light'] .bg-slate-900\/50,
[data-theme='light'] .bg-slate-900\/60,
[data-theme='light'] .bg-slate-800,
[data-theme='light'] .bg-slate-800\/80 {
  background-color: var(--app-surface-muted);
}

[data-theme='light'] .hover\:bg-white\/\[0\.02\]:hover,
[data-theme='light'] .hover\:bg-slate-900\/50:hover,
[data-theme='light'] .hover\:bg-slate-900\/60:hover {
  background-color: var(--app-surface-hover);
}

[data-theme='light'] .panel .text-white:not(.bg-emerald-600):not(.bg-red-600):not(.bg-amber-500),
[data-theme='light'] .panel-muted .text-white {
  color: var(--app-text-strong);
}

[data-theme='light'] code.rounded.bg-slate-800 {
  background-color: #eaf3ff;
  color: #0560d6;
}

/* ---- Overlay-only: reproduce the markup-level tweaks without touching the compiled JS ---- */
.app-sidebar nav a,
.app-sidebar nav a.app-sidebar-link {
  border-radius: 10px;
}

/* Sidebar brand mark: dash "CA"-style badge (solid primary, amber ring). */
.app-sidebar a[href="/"] > div:first-child {
  border: 0;
  border-radius: 10px;
  background: var(--color-emerald-600);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(255, 193, 7, 0.7);
}

/* Buttons (shared Button component): dash corner radius + theme-aware focus-ring offset. */
[class*="focus-visible:ring-offset-2"] {
  border-radius: 10px;
  --tw-ring-offset-color: var(--app-bg);
}

/* Sign-in page: theme-aware instead of the fixed dark/mono look. */
.min-h-screen[class*="bg-[#05080d]"] {
  background: transparent;
  font-family: var(--font-sans);
}
[class*="bg-[#0a1018]"] {
  background: var(--app-surface);
}
.min-h-screen[class*="bg-[#05080d]"] h1,
.min-h-screen[class*="bg-[#05080d]"] h2 {
  color: var(--app-text-strong);
}

/* Code blocks follow the theme. */
pre[class*="bg-[#05080d]"] {
  background: var(--app-surface-muted);
}