/* CaddyUI base styles — tokens are in layout.html's tailwind.config */
html {
  /* Smooth-scroll for in-page anchor jumps (settings TOC, docs TOC, etc.).
     Users who prefer reduced motion fall back to instant jumps via the
     @media rule below. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Form controls use the brand focus ring instead of the browser default. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* Scrollbar polish for code blocks. */
pre::-webkit-scrollbar { height: 8px; width: 8px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb { background: rgb(71 85 105 / 0.4); border-radius: 4px; }
pre::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105 / 0.6); }

/* Details arrow alignment. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.25rem;
  transition: transform 120ms ease;
  font-size: 0.7em;
}
details[open] > summary::before { transform: rotate(90deg); }

/* Domain name pills — used on all list tables */
.domain-pill {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.2rem 0.625rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: 1px solid rgba(29, 78, 216, 0.6);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.15);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.domain-pill:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45), 0 0 0 2px rgba(59, 130, 246, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
  color: #ffffff;
}

html.dark .domain-pill {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(96, 165, 250, 0.5) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.2) !important;
}
html.dark .domain-pill:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.55), 0 0 0 2px rgba(96, 165, 250, 0.35) !important;
  color: #ffffff !important;
}

/* Version pills — same blue family as domain-pill, smaller & subtler for secondary info */
.version-pill {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.15rem 0.45rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.55);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

html.dark .version-pill {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.15) !important;
}

/* ── Status badges (v2.6.0) ────────────────────────────────────────
   Extracted from ~40+ duplicated inline-flex/rounded-full pill combos
   across the templates. The `.badge` base class carries the shape and
   typography; variants below set bg/text. Use `.badge__dot` on an
   inner <span> for the coloured indicator dot.

   Example:
     <button class="badge badge--enabled">
       <span class="badge__dot"></span>enabled
     </button>

   For now the enable/disable toggle buttons in proxy-hosts and
   redirection-hosts use these classes. Future cleanup can migrate
   the CAPTCHA / DNS-provider / cert-expiry pills progressively —
   they already use the same visual language, just spelled out
   inline. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}
.badge__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Enabled / active (brand-blue, matches bg-brand-50 / text-brand-700) */
.badge--enabled { background-color: rgb(239 246 255); color: rgb(29 78 216); }
.badge--enabled .badge__dot { background-color: rgb(59 130 246); }
button.badge--enabled:hover,
a.badge--enabled:hover { background-color: rgb(219 234 254); }

/* Disabled / inactive (ink-slate) */
.badge--disabled { background-color: rgb(241 245 249); color: rgb(100 116 139); }
.badge--disabled .badge__dot { background-color: rgb(148 163 184); }
button.badge--disabled:hover,
a.badge--disabled:hover { background-color: rgb(226 232 240); }

/* Warning (amber — for "keys missing", "waiting for IP", cert expiry, etc.) */
.badge--warn { background-color: rgb(255 251 235); color: rgb(180 83 9); }
.badge--warn .badge__dot { background-color: rgb(245 158 11); }

/* Dark-mode overrides for the badge palette. */
html.dark .badge--enabled { background-color: rgba(59,130,246,0.2) !important; color: #93c5fd !important; }
html.dark .badge--enabled .badge__dot { background-color: #60a5fa !important; }
html.dark button.badge--enabled:hover,
html.dark a.badge--enabled:hover { background-color: rgba(59,130,246,0.3) !important; }

html.dark .badge--disabled { background-color: #263347 !important; color: #94a3b8 !important; }
html.dark .badge--disabled .badge__dot { background-color: #64748b !important; }
html.dark button.badge--disabled:hover,
html.dark a.badge--disabled:hover { background-color: #334155 !important; }

html.dark .badge--warn { background-color: rgba(180,120,0,0.25) !important; color: #fcd34d !important; }
html.dark .badge--warn .badge__dot { background-color: #fbbf24 !important; }

/* ── Dark mode overrides ── */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0f172a; color: #e2e8f0; }

/* Backgrounds */
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-white\/95 { background-color: rgba(30,41,59,0.95) !important; }
html.dark .bg-ink-50 { background-color: #0f172a !important; }
html.dark .bg-ink-50\/50 { background-color: rgba(15,23,42,0.5) !important; }
html.dark .bg-ink-100 { background-color: #263347 !important; }
html.dark .min-h-screen { background-color: #0f172a !important; }

/* Borders */
html.dark .border-ink-200 { border-color: #334155 !important; }
html.dark .border-ink-100 { border-color: #263347 !important; }
html.dark .divide-ink-100 > * + * { border-color: #263347 !important; }

/* Text */
html.dark .text-ink-900 { color: #f8fafc !important; }
html.dark .text-ink-800 { color: #f1f5f9 !important; }
html.dark .text-ink-700 { color: #e2e8f0 !important; }
html.dark .text-ink-600 { color: #cbd5e1 !important; }
html.dark .text-ink-500 { color: #94a3b8 !important; }
html.dark .text-ink-400 { color: #64748b !important; }

/* Hover states */
html.dark .hover\:bg-ink-50:hover { background-color: #1e293b !important; }
html.dark .hover\:bg-ink-100:hover { background-color: #334155 !important; }
html.dark .hover\:bg-ink-200:hover { background-color: #3d4f66 !important; }
html.dark .hover\:bg-ink-50\/60:hover { background-color: rgba(30,41,59,0.6) !important; }
html.dark .hover\:text-ink-900:hover { color: #f8fafc !important; }
html.dark .hover\:text-ink-700:hover { color: #e2e8f0 !important; }

/* Form inputs */
html.dark input,
html.dark textarea,
html.dark select { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

/* Tables */
html.dark table { color: #e2e8f0; }
html.dark .hover\:bg-brand-50\/30:hover { background-color: rgba(59,130,246,0.08) !important; }
html.dark .bg-purple-50\/40 { background-color: rgba(76,29,149,0.1) !important; }
html.dark .hover\:bg-purple-50\/70:hover { background-color: rgba(76,29,149,0.2) !important; }
html.dark .hover\:bg-purple-50\/60:hover { background-color: rgba(76,29,149,0.15) !important; }
html.dark .bg-purple-50\/30 { background-color: rgba(76,29,149,0.08) !important; }

/* Brand colour family — blue palette, dark mode uses blue-400/300 for contrast */
html.dark .bg-brand-50 { background-color: rgba(59,130,246,0.12) !important; }
html.dark .bg-brand-100 { background-color: rgba(59,130,246,0.2) !important; }
html.dark .text-brand-700 { color: #60a5fa !important; }
html.dark .text-brand-600 { color: #60a5fa !important; }
html.dark .hover\:text-brand-700:hover { color: #93c5fd !important; }
html.dark .hover\:text-brand-600:hover { color: #93c5fd !important; }
html.dark .hover\:text-brand-800:hover { color: #bfdbfe !important; }
html.dark .hover\:bg-brand-100:hover { background-color: rgba(59,130,246,0.2) !important; }
html.dark .border-brand-200 { border-color: rgba(59,130,246,0.3) !important; }
html.dark .hover\:border-brand-300:hover { border-color: rgba(59,130,246,0.5) !important; }
html.dark .text-brand-800 { color: #93c5fd !important; }

/* Red (error/delete) colour family */
html.dark .bg-red-50 { background-color: rgba(239,68,68,0.1) !important; }
html.dark .border-red-200 { border-color: rgba(239,68,68,0.3) !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .text-red-700 { color: #f87171 !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-500 { color: #fca5a5 !important; }
html.dark .hover\:text-red-700:hover { color: #fca5a5 !important; }
html.dark .bg-red-50\/40 { background-color: rgba(239,68,68,0.08) !important; }

/* Amber (warning) colour family */
html.dark .bg-amber-50 { background-color: rgba(180,120,0,0.15) !important; }
html.dark .border-amber-200 { border-color: rgba(217,119,6,0.4) !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }

/* Blue (custom SSL) colour family */
html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.1) !important; }
html.dark .border-blue-200 { border-color: rgba(59,130,246,0.3) !important; }
html.dark .text-blue-700 { color: #93c5fd !important; }

/* Purple (advanced routes) colour family */
html.dark .bg-purple-50 { background-color: rgba(139,92,246,0.1) !important; }
html.dark .bg-purple-100 { background-color: rgba(139,92,246,0.2) !important; }
html.dark .border-purple-200 { border-color: rgba(139,92,246,0.35) !important; }
html.dark .text-purple-700 { color: #c4b5fd !important; }

/* Misc */
html.dark .shadow-card { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4) !important; }
html.dark .has-\[\:checked\]\:bg-brand-50\/50:has(:checked) { background-color: rgba(59,130,246,0.1) !important; }
html.dark .has-\[\:checked\]\:border-brand-500:has(:checked) { border-color: #3b82f6 !important; }
html.dark pre { background-color: #0f172a !important; border-color: #334155 !important; }
html.dark code { background-color: #263347 !important; color: #e2e8f0 !important; }
html.dark .bg-ink-900 { background-color: #020617 !important; }
html.dark .text-ink-100 { color: #f1f5f9 !important; }
html.dark .text-ink-300 { color: #475569 !important; }

/* ────────────────────────────────────────────────────────────────
   v2.6.0 dark-mode coverage gap-fill.

   Audit of web/templates/ surfaced color classes that had no
   html.dark equivalent above. The rules below fill those gaps
   without touching existing overrides so the diff stays focused.

   Solid-saturated fills (bg-brand-500, bg-green-500, bg-red-500,
   status-dot shades, etc.) are intentionally NOT overridden —
   they read fine on a dark backdrop with their built-in text
   contrast. If any start looking muddy in practice, add a rule
   here rather than touching the section above.
   ──────────────────────────────────────────────────────────────── */

/* Amber — warning tints & muted text */
html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.22) !important; }
html.dark .hover\:bg-amber-50:hover { background-color: rgba(180,120,0,0.22) !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-amber-900 { color: #fef3c7 !important; }
html.dark .group:hover .group-hover\:text-amber-600,
html.dark .group:hover .group-hover\:text-amber-700 { color: #fcd34d !important; }

/* Blue — info text & hover tints (the bg-blue-50/border/700 trio is handled above) */
html.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.15) !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-blue-600\/80 { color: rgba(96,165,250,0.8) !important; }
html.dark .group:hover .group-hover\:text-blue-600,
html.dark .group:hover .group-hover\:text-blue-700 { color: #93c5fd !important; }

/* Brand — focus rings, hover-50, has-checked plain variant, group-hover, border-100 */
html.dark .border-brand-100 { border-color: rgba(59,130,246,0.22) !important; }
html.dark .text-brand-500 { color: #60a5fa !important; }
html.dark .hover\:bg-brand-50:hover { background-color: rgba(59,130,246,0.15) !important; }
html.dark .focus\:border-brand-500:focus { border-color: #3b82f6 !important; }
html.dark .focus\:ring-brand-100:focus { --tw-ring-color: rgba(59,130,246,0.25) !important; }
html.dark .focus\:ring-brand-500:focus { --tw-ring-color: rgba(59,130,246,0.5) !important; }
html.dark .focus\:ring-brand-500\/20:focus { --tw-ring-color: rgba(59,130,246,0.3) !important; }
html.dark .has-\[\:checked\]\:bg-brand-50:has(:checked) { background-color: rgba(59,130,246,0.15) !important; }
html.dark .has-\[\:checked\]\:text-brand-700:has(:checked) { color: #60a5fa !important; }
html.dark .group:hover .group-hover\:text-brand-600,
html.dark .group:hover .group-hover\:text-brand-700 { color: #93c5fd !important; }

/* Green — full family (success states, health badges) */
html.dark .bg-green-50 { background-color: rgba(34,197,94,0.1) !important; }
html.dark .bg-green-100 { background-color: rgba(34,197,94,0.2) !important; }
html.dark .border-green-200 { border-color: rgba(34,197,94,0.3) !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-green-800 { color: #bbf7d0 !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgba(34,197,94,0.15) !important; }
html.dark .group:hover .group-hover\:text-green-600,
html.dark .group:hover .group-hover\:text-green-700 { color: #86efac !important; }

/* Orange — distinct accent (e.g. DNS-Orange warnings) */
html.dark .bg-orange-50 { background-color: rgba(249,115,22,0.1) !important; }
html.dark .text-orange-600 { color: #fb923c !important; }
html.dark .text-orange-700 { color: #fdba74 !important; }

/* Purple — hover states, text-600, group-hover */
html.dark .text-purple-600 { color: #c4b5fd !important; }
html.dark .hover\:bg-purple-50:hover { background-color: rgba(139,92,246,0.15) !important; }
html.dark .hover\:bg-purple-100:hover { background-color: rgba(139,92,246,0.25) !important; }
html.dark .hover\:border-purple-300:hover { border-color: rgba(139,92,246,0.5) !important; }
html.dark .hover\:border-purple-400:hover { border-color: rgba(139,92,246,0.65) !important; }
html.dark .hover\:text-purple-600:hover { color: #d8b4fe !important; }
html.dark .hover\:text-purple-700:hover { color: #d8b4fe !important; }
html.dark .group:hover .group-hover\:text-purple-600,
html.dark .group:hover .group-hover\:text-purple-700 { color: #c4b5fd !important; }

/* Red — text-900, hover variants */
html.dark .bg-red-100 { background-color: rgba(239,68,68,0.2) !important; }
html.dark .text-red-900 { color: #fecaca !important; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.15) !important; }
html.dark .hover\:bg-red-100:hover { background-color: rgba(239,68,68,0.25) !important; }
html.dark .hover\:border-red-300:hover { border-color: rgba(239,68,68,0.5) !important; }
html.dark .hover\:text-red-500:hover { color: #f87171 !important; }