/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps.
 * Feature/domain-specific styles live in separate files under app/assets/stylesheets/
 * and are automatically included via stylesheet_link_tag :all in the layout.
 */
body { font-family: 'Inter', sans-serif; margin: 0; }
.log-output { font-family: 'JetBrains Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
/* Hide DaisyUI mockup-code window dots (macOS traffic lights) */
.mockup-code::before { display: none !important; }
.mockup-code::after { display: none !important; }
details.image-tag-dropdown > summary::-webkit-details-marker { display: none; }
details.image-tag-dropdown > summary { list-style: none; }
/* <details>-based dropdowns (settings lock menus) — hide default marker */
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown > summary { list-style: none; cursor: pointer; }
details.dropdown > summary:focus { outline: none; }
.sidebar-link { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.625rem 1rem; border-radius: 0.5rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); font-size: 0.875rem; font-weight: 500; text-align: center; transition: all 0.15s; text-decoration: none; }
.sidebar-link:hover { background: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); }
.sidebar-main-link,
.sidebar-admin-toggle,
.sidebar-logout-button { justify-content: flex-start; text-align: left; }
.sidebar-admin-panel { margin-top: 0.5rem; padding: 0.625rem 0.5rem 0.5rem; border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: 0.75rem; background: color-mix(in oklab, var(--color-base-content) 4%, transparent); }
.sidebar-section-label { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-bottom: 0.375rem; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-admin-grid { display: grid; gap: 0.25rem; }
.sidebar-admin-panel,
.sidebar-admin-panel ~ .sidebar-link { display: none; }
.sidebar-logout-form { margin-top: 0.5rem; }
.sidebar-admin-chevron { margin-left: auto; }
.sidebar-admin-dropdown .sidebar-link { justify-content: flex-start; text-align: left; }
.sidebar-link.active { background: var(--color-primary); color: var(--color-primary-content); font-weight: 600; }
.sidebar-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
/* Sidebar theme toggle — styled like a sidebar-link but built on a <label>
   with a hidden checkbox so DaisyUI's theme-controller can swap themes.
   The two icons (sun/moon) are toggled via the checkbox :checked state. */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  transition: all 0.15s;
}
.sidebar-theme-toggle:hover { background: color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content); }
.sidebar-theme-toggle input { display: none; }
.sidebar-theme-toggle svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
/* Both icons sit on the left of the label; only one is visible at a time.
   Sun icon (1st svg) shows in dark mode; moon icon (2nd svg) shows in light mode. */
.sidebar-theme-toggle svg:nth-of-type(2) { display: none; }
.sidebar-theme-toggle input:checked ~ svg:nth-of-type(1) { display: none; }
.sidebar-theme-toggle input:checked ~ svg:nth-of-type(2) { display: block; }
/* Tom Select structure and theme — keep the library behavior, override DaisyUI colors. */
.ts-wrapper {
  position: relative;
  width: 100%;
  min-height: 0;
}
/* Tom Select copies the original select classes to its wrapper. Reset DaisyUI's select shell so it does not create a second border/arrow. */
.ts-wrapper.select,
.ts-wrapper.select-bordered,
.ts-wrapper.w-full {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}
.ts-wrapper.select::before,
.ts-wrapper.select::after { display: none !important; content: none !important; }
.ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
  border-radius: 0.5rem !important;
  background: var(--color-base-100) !important;
  background-image: none !important;
  color: var(--color-base-content) !important;
  box-shadow: none !important;
  line-height: 1.25rem;
  overflow: hidden;
}
/* The search input is intentionally borderless; this removes the small square/focus artifact. */
.ts-control > input,
.ts-control input {
  flex: 1 1 auto;
  width: 1px;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 1.5rem;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--color-base-content) !important;
  font: inherit;
  line-height: inherit !important;
}
.ts-wrapper.single .ts-control > input { flex: 1 1 1px; }
.ts-control .item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--color-base-content) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.25rem;
  padding: 0 !important;
  margin: 0 0.25rem 0 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-control:focus,
.ts-wrapper.focus .ts-control {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 20%, transparent) !important;
}
/* Explicit dark-mode overrides — DaisyUI 5 defines CSS variables inside @layer base,
   which can lose against Tom Select's unlayered defaults. These rules force the
   correct dark-mode colors with higher specificity via [data-theme="dark"].
   Border uses color-mix for a subtle, visible edge instead of --color-base-300
   which is nearly black in dark mode. */
[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-wrapper.single .ts-control,
[data-theme="dark"] .ts-wrapper.multi .ts-control {
  border-color: color-mix(in oklab, oklch(97.807% .029 256.847) 25%, transparent) !important;
  background: oklch(25.33% .016 252.42) !important;
  background-image: none !important;
  color: oklch(97.807% .029 256.847) !important;
}
[data-theme="dark"] .ts-wrapper.single .ts-control::after,
[data-theme="dark"] .ts-wrapper.multi .ts-control::after {
  background-color: oklch(97.807% .029 256.847) !important;
}
[data-theme="dark"] .ts-control > input,
[data-theme="dark"] .ts-control input {
  color: oklch(97.807% .029 256.847) !important;
}
[data-theme="dark"] .ts-control .item {
  color: oklch(97.807% .029 256.847) !important;
}
/* Chevron toggle icon on the right of the select. Tom Select renders no caret element
   itself, so an inline SVG chevron is drawn via ::after on .ts-control using mask-image.
   background-color adapts to the theme via --color-base-content; the mask defines the shape.
   .ts-wrapper.dropdown-active (set by Tom Select) rotates the chevron 180deg. */
.ts-wrapper.single .ts-control::after,
.ts-wrapper.multi .ts-control::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 3px;
  bottom: -3px;
  width: 0.75rem;
  height: 0.75rem;
  margin: auto 0;
  background-color: var(--color-base-content);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.15s ease;
  pointer-events: none;
}
.ts-wrapper.dropdown-active .ts-control::after {
  transform: rotate(180deg);
}
/* Image-tag loading state — replaces the chevron with a spinner while
   tags are being fetched from the registry. The spinner is a CSS-only
   rotating ring using currentColor, so it adapts to the active theme. */
.ts-wrapper.ts-image-tag-loading .ts-control::after {
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 30%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ts-image-tag-spin 0.6s linear infinite;
}
@keyframes ts-image-tag-spin { to { transform: rotate(360deg); } }
/* Dim the placeholder/input slightly while loading for clearer feedback. */
.ts-wrapper.ts-image-tag-loading .ts-control { opacity: 0.85; }
/* Loading placeholder option inside the dropdown — show a small inline
   spinner next to the localized "loading" text. */
.ts-dropdown .option[data-value="__loading__"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.8;
}
.ts-dropdown .option[data-value="__loading__"]::before {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 30%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ts-image-tag-spin 0.6s linear infinite;
  flex-shrink: 0;
}
.ts-dropdown {
  position: absolute !important;
  top: calc(100% + 0.25rem) !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  z-index: 1000 !important;
  box-sizing: border-box;
  margin: 0 !important;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
  border-radius: 0.5rem !important;
  background: var(--color-base-100) !important;
  background-color: var(--color-base-100) !important;
  color: var(--color-base-content) !important;
  box-shadow: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
  overflow: hidden;
}
.ts-dropdown-content { max-height: 16rem; overflow-y: auto; }
.ts-dropdown [data-selectable],
.ts-dropdown .option,
.ts-dropdown .create {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.ts-dropdown .option {
  color: var(--color-base-content) !important;
  background: transparent !important;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover,
.ts-dropdown [data-selectable].active,
.ts-dropdown [data-selectable]:hover {
  background: color-mix(in oklab, var(--color-primary) 15%, transparent) !important;
  color: var(--color-base-content) !important;
}
.ts-dropdown .optgroup-header,
.ts-dropdown .ts-optgroup-header {
  background: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
.ts-option-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ts-option-meta { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; }
/* Instance hint shown below host name when searching by instance name. */
.ts-instance-hint { width: 100%; margin-top: 0.125rem; font-family: var(--font-mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-option-row:has(.ts-instance-hint) { flex-wrap: wrap; }
.ts-lock-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; border-radius: 9999px; font-size: 0.625rem; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.ts-lock-badge-locked { background: color-mix(in oklab, var(--color-warning) 22%, transparent); color: var(--color-warning); }
.ts-lock-badge-hidden { background: color-mix(in oklab, var(--color-error) 22%, transparent); color: var(--color-error); }
/* Image-tag group labels use distinct colors for quick scanning. */
.ts-dropdown .ts-optgroup-current {
  color: var(--color-warning) !important;
}
.ts-dropdown .ts-optgroup-available {
  color: var(--color-primary) !important;
}
.ts-dropdown .ts-optgroup-custom {
  color: var(--color-secondary) !important;
}
.production-warning { color: var(--color-error); font-size: 0.75rem; font-weight: 700; }
/* Clear button plugin — the plugin hides the button with opacity:0 and
   only shows it on hover/focus. Override to always show it prominently. */
.ts-wrapper.plugin-clear_button {
  --ts-pr-clear-button: 1.5rem;
}
.ts-wrapper.plugin-clear_button .clear-button {
  opacity: 1 !important;
  right: 0.5rem !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  margin: auto 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  color: var(--color-base-content) !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ts-wrapper.plugin-clear_button .clear-button:hover {
  color: var(--color-error) !important;
}
/* Move the chevron left to make room for the clear button */
.ts-wrapper.plugin-clear_button.single .ts-control::after,
.ts-wrapper.plugin-clear_button.multi .ts-control::after {
  right: 2.5rem;
}
.ts-wrapper.plugin-remove_button .item .remove {
  border-left: 1px solid var(--color-base-300);
  color: var(--color-base-content);
  padding-left: 0.25rem;
  margin-left: 0.25rem;
  cursor: pointer;
}
/* Hide the original select — Tom Select renders the replacement control. */
select.tom-select-initialized { display: none !important; }
/* Image-tag selects — fixed width, compact dropdown */
.image-tag-select.tom-select-initialized + .ts-control,
.ts-wrapper.image-tag-select .ts-control {
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
}
.ts-wrapper.image-tag-select .ts-dropdown {
  min-width: 12rem;
  max-width: 24rem;
}
.ts-wrapper.image-tag-select .ts-dropdown .option {
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Explicit dark-mode overrides for dropdown — same reason as .ts-control above. */
[data-theme="dark"] .ts-dropdown {
  border-color: color-mix(in oklab, oklch(97.807% .029 256.847) 25%, transparent) !important;
  background: oklch(25.33% .016 252.42) !important;
  background-color: oklch(25.33% .016 252.42) !important;
  color: oklch(97.807% .029 256.847) !important;
}
[data-theme="dark"] .ts-dropdown .option {
  color: oklch(97.807% .029 256.847) !important;
  background: transparent !important;
}
[data-theme="dark"] .ts-dropdown .option.active,
[data-theme="dark"] .ts-dropdown .option:hover,
[data-theme="dark"] .ts-dropdown [data-selectable].active,
[data-theme="dark"] .ts-dropdown [data-selectable]:hover {
  background: color-mix(in oklab, oklch(58% .233 277.117) 15%, transparent) !important;
  color: oklch(97.807% .029 256.847) !important;
}
[data-theme="dark"] .ts-dropdown .optgroup-header {
  background: oklch(23.26% .014 253.1) !important;
  color: oklch(97.807% .029 256.847) !important;
}
/* Custom deploy-modal tab bar — replaces DaisyUI .tabs.tabs-boxed for a
   more prominent active state with icons, colored accent and smooth transitions. */
.deploy-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--color-base-200);
  border-radius: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
.deploy-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.deploy-tab svg { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s ease; }
.deploy-tab:hover {
  color: var(--color-base-content);
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
}
.deploy-tab:hover svg { opacity: 0.85; }
/* Active tab — solid primary background, white text, full-opacity icon */
.deploy-tab.tab-active {
  color: var(--color-primary-content);
  background: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px -2px color-mix(in oklab, var(--color-primary) 60%, transparent);
}
.deploy-tab.tab-active svg { opacity: 1; }
/* Upgrade tab gets an info-blue accent when active to match its button color */
.deploy-tab[data-tab="upgrade"].tab-active {
  color: var(--color-info-content);
  background: var(--color-info);
  box-shadow: 0 2px 8px -2px color-mix(in oklab, var(--color-info) 60%, transparent);
}
/* ================================================================
   Settings page — host-detail-inspired two-column layout
   ================================================================ */
.settings-page { width: 100%; max-width: none; margin: 0 auto; }

.settings-hero {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  background: var(--color-base-100);
  box-shadow: none;
}
.settings-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.settings-hero-left {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}
.settings-hero-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.75rem;
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.settings-hero h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.settings-hero p {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.settings-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  border-radius: 0.75rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
}
.settings-stat {
  min-width: 0;
  padding: 0.8rem 1rem;
  text-align: left;
  border-left: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
}
.settings-stat:first-child { border-left: 0; }
.settings-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.settings-stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 0.85fr);
  gap: 1rem;
  align-items: stretch;
}
.settings-main,
.settings-side {
  min-width: 0;
}
.settings-side {
  position: sticky;
  top: 1rem;
}
.settings-side > .settings-app-card {
  height: 100%;
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-section-head-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.settings-section-head-left svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-primary);
}
.settings-section-head-left h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.settings-section-head-left p {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}

.settings-playbook-group + .settings-playbook-group { margin-top: 1.25rem; }
.settings-playbook-group {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  border-radius: 0.625rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-base-content) 2%, transparent);
}
.settings-playbook-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  user-select: none;
  transition: background 0.15s ease;
}
.settings-playbook-group > summary::-webkit-details-marker { display: none; }
.settings-playbook-group > summary:focus { outline: none; }
.settings-playbook-group > summary:hover {
  background: color-mix(in oklab, var(--color-base-content) 5%, transparent);
}
.settings-playbook-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.settings-playbook-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.settings-playbook-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.settings-playbook-count {
  font-size: 0.6875rem;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}
.settings-playbook-chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  transition: transform 0.2s ease;
}
.settings-playbook-group[open] > summary .settings-playbook-chevron {
  transform: rotate(180deg);
}
.settings-playbook-group[open] > summary {
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
}
.settings-playbook-group > .settings-host-grid {
  padding: 0.75rem;
}

/* Dashboard playbook groups — collapsible boxes with gradient header */
.dashboard-playbook-group + .dashboard-playbook-group { margin-top: 1.5rem; }
.dashboard-playbook-group {
  border-radius: 1rem;
  overflow: hidden;
  background: var(--color-base-100);
  box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--color-base-content) 8%, transparent),
              0 2px 4px -2px color-mix(in oklab, var(--color-base-content) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.dashboard-playbook-group:hover {
  box-shadow: 0 10px 15px -3px color-mix(in oklab, var(--color-base-content) 10%, transparent),
              0 4px 6px -4px color-mix(in oklab, var(--color-base-content) 8%, transparent);
  border-color: color-mix(in oklab, var(--color-base-content) 16%, transparent);
}
.dashboard-playbook-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  user-select: none;
  border: none;
  background: transparent;
}
.dashboard-playbook-group > summary::-webkit-details-marker { display: none; }
.dashboard-playbook-group > summary:focus { outline: none; }
/* Gradient header bar inside the summary */
.dashboard-playbook-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)),
    color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)));
  transition: background 0.2s ease;
}
.dashboard-playbook-group > summary:hover .dashboard-playbook-header {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 18%, var(--color-base-100)),
    color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100)));
}
.dashboard-playbook-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-base-content);
}
.dashboard-playbook-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.dashboard-playbook-count {
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}
.dashboard-playbook-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 55%, transparent);
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.dashboard-playbook-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  transition: transform 0.2s ease;
}
.dashboard-playbook-group[open] > summary .dashboard-playbook-chevron {
  transform: rotate(180deg);
}
.dashboard-playbook-group[open] > summary .dashboard-playbook-header {
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
}
.dashboard-playbook-group > .grid {
  padding: 1.25rem;
}
.dashboard-playbook-body {
  padding: 1.25rem;
}
.dashboard-more-toggle {
  margin-top: 1rem;
}
.dashboard-more-toggle > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px dashed color-mix(in oklab, var(--color-base-content) 20%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-base-content) 3%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  transition: all 0.15s ease;
  user-select: none;
}
.dashboard-more-toggle > summary::-webkit-details-marker { display: none; }
.dashboard-more-toggle > summary:focus { outline: none; }
.dashboard-more-toggle > summary:hover {
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
  border-color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
  color: var(--color-base-content);
}
.dashboard-more-toggle > summary svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.2s ease;
}
.dashboard-more-toggle[open] > summary svg {
  transform: rotate(180deg);
}
.dashboard-more-toggle[open] > summary {
  margin-bottom: 0;
}
.settings-host-grid {
  display: grid;
  gap: 0.75rem;
}
.settings-host-card {
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  border-radius: 0.625rem;
  background: var(--color-base-100);
  transition: border-color 0.15s ease;
}
.settings-host-card:hover { border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent); }
.settings-host-card.is-locked { border-left: 3px solid var(--color-warning); }

/* Keep the first column stable across tenant, HPM and dev host tables. */
.host-overview-table th:first-child,
.host-overview-table td:first-child {
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
}
.host-overview-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-host-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.settings-host-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.settings-host-name h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-host-action { flex-shrink: 0; }
.settings-lock-details {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}
.settings-lock-details > summary {
  list-style: none;
  cursor: pointer;
}
.settings-lock-details > summary::-webkit-details-marker { display: none; }
.settings-lock-details > summary:focus { outline: none; }
/* Lock info must be able to float outside cards that normally use
   overflow-hidden for rounded borders and gradient accents. */
.card:has(.settings-lock-details) {
  overflow: visible;
}
.card:has(.settings-lock-details[open]) {
  position: relative;
  z-index: 30;
}
.settings-lock-details-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  min-width: 14rem;
  max-width: 20rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  box-shadow: 0 1rem 2rem -1.25rem color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
.settings-lock-details-label {
  margin-bottom: 0.2rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}
.settings-lock-details-text {
  font-size: 0.75rem;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  word-break: break-word;
}
.settings-lock-details:not([open]) .settings-lock-details-panel { display: none; }
.settings-instances { margin-top: 0.75rem; }
.settings-instances-label {
  margin-bottom: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
}
.settings-instance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.625rem;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
  transition: background 0.15s ease;
}
.settings-instance-row + .settings-instance-row { margin-top: 0.25rem; }
.settings-instance-row:hover { background: color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.settings-instance-row.is-locked { background: color-mix(in oklab, var(--color-warning) 6%, transparent); }
.settings-instance-info { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex-wrap: wrap; }
.settings-instance-name { font-size: 0.8125rem; font-weight: 500; }
.settings-instance-host {
  font-size: 0.6875rem;
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  font-family: 'JetBrains Mono', monospace;
}
.settings-instance-action { flex-shrink: 0; }

.settings-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--color-success);
}
.settings-status-dot.dot-locked { background: var(--color-warning); }
.settings-status-dot.dot-hidden { background: var(--color-error); }
.settings-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.25rem;
  line-height: 1.4;
}
.settings-status-badge.badge-warning { background: var(--color-warning); color: var(--color-warning-content); }
.settings-status-badge.badge-error { background: var(--color-error); color: var(--color-error-content); }

.settings-app-card {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-side { position: static; }
}
@media (max-width: 640px) {
  .settings-hero { display: block; }
  .settings-hero-stats { margin-top: 0.75rem; justify-content: flex-start; }
  .settings-stat { text-align: left; }
}
/* "Jetzt starten" — prominent action button with glassmorphism design.
   Uses backdrop-filter for a frosted-glass look that adapts to both
   light and dark themes. The primary color provides the accent glow
   while a gradient sweep animates across on hover. */
.start-now-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
  border-radius: 0.75rem;
  cursor: pointer;
  list-style: none;
  color: var(--color-base-content);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100));
  backdrop-filter: blur(8px);
  box-shadow:
    0 2px 8px -2px color-mix(in oklab, var(--color-primary) 25%, transparent),
    inset 0 1px 0 color-mix(in oklab, var(--color-base-content) 5%, transparent);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
/* Topbar variant — auto width instead of full width, slightly more compact */
.start-now-btn-topbar { width: auto; padding: 0.5rem 0.75rem; }
/* Diagonal shine sweep on hover — works in both themes */
.start-now-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    color-mix(in oklab, var(--color-primary) 20%, transparent) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.start-now-btn:hover::before { transform: translateX(100%); }
.start-now-btn:hover {
  border-color: var(--color-primary);
  box-shadow:
    0 6px 20px -4px color-mix(in oklab, var(--color-primary) 45%, transparent),
    inset 0 1px 0 color-mix(in oklab, var(--color-base-content) 8%, transparent);
  transform: translateY(-2px);
}
.start-now-btn:active { transform: translateY(0); }
/* Icon with gradient background and pulsing ring glow */
.start-now-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-primary) 25%, transparent),
    color-mix(in oklab, var(--color-primary) 10%, transparent)
  );
  color: var(--color-primary);
  flex-shrink: 0;
  animation: pulse-glow 2.5s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--color-primary) 0%, transparent);
  }
}
.start-now-icon svg { width: 1.125rem; height: 1.125rem; }
.start-now-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; }
.start-now-label { font-size: 0.875rem; font-weight: 700; }
/* Smaller subtitle + tighter tracking so the longer "Deploy | Upgrade |
   Restore" text does not widen the button much. */
.start-now-sub { font-size: 0.5rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.02em; }
.start-now-chevron { flex-shrink: 0; opacity: 0.5; transition: transform 0.25s ease; }
details[open] .start-now-chevron { transform: rotate(180deg); }
/* Dropdown panel — glassmorphism with gradient border that adapts to theme.
   A pseudo-element creates a gradient border ring (primary → secondary)
   that is visible in both light and dark modes. */
.start-now-dropdown {
  background: color-mix(in oklab, var(--color-base-100) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid transparent;
  border-radius: 0.875rem;
  /* No position here — DaisyUI's .dropdown-content must stay absolute so the
     panel floats below the trigger instead of sticking in the layout flow.
     The ::before border still resolves against the absolute <ul>. */
  box-shadow:
    0 12px 40px -8px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in oklab, var(--color-primary) 15%, transparent);
}
.start-now-dropdown::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 0.875rem;
  padding: 1px;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-primary) 50%, transparent),
    color-mix(in oklab, var(--color-secondary) 30%, transparent),
    color-mix(in oklab, var(--color-primary) 20%, transparent)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Dropdown options — icon + label with gradient hover sweep.
   Each option has a left accent bar that slides in on hover. */
.start-now-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-base-content);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* Keep option labels on one line — a wrapped label changes the dropdown
     height mid-animation and makes it visibly jump when opening. */
  white-space: nowrap;
}
/* Gradient hover background — primary tint that works in both themes */
.start-now-option::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-primary) 15%, transparent),
    color-mix(in oklab, var(--color-primary) 5%, transparent)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 0.625rem;
}
.start-now-option:hover::before { opacity: 1; }
.start-now-option:hover {
  transform: translateX(3px);
}
.start-now-option:active { transform: translateX(1px); }
/* Left accent bar — slides in from the left on hover */
.start-now-option::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(
    180deg,
    var(--color-primary),
    var(--color-secondary)
  );
  transition: transform 0.2s ease;
}
.start-now-option:hover::after { transform: translateY(-50%) scaleY(1); }
/* Ensure icon and text stay above pseudo-elements */
.start-now-option > * { position: relative; z-index: 1; }