/*
 * Zentrale Theme-Styles fuer Light-/Darkmode.
 * Enthalten sind Hintergruende, Kontrastfarben
 * sowie Animationen fuer Login/Delete-Overlays.
 */

/* Basisvariablen fuer Hintergrundbilder und Mobile-Zoom. */
:root {
  --bg-image: url("/background/hamburg_telekom3.webp");
  --bg-zoom-mobile: 220%;
}

/* Grundlayout mit fixiertem Hintergrundbild. */
html {
  position: relative;
  min-height: 100%;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Mobile-Hintergrund als Pseudo-Element fuer bessere Performance. */
@media (max-width: 768px) {
  html {
    background-attachment: scroll;
    background-image: none;
  }

  html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--bg-image);
    background-size: var(--bg-zoom-mobile);
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
  }
}

/* Darkmode-Variablen und globale Farbueberschreibungen. */
html.darkmode {
  background-color: #0b0f17;
  --bg-image: url('/background/hamburg_noir.webp');
}

html.darkmode body {
  color: #e5e7eb;
}

html.darkmode .bg-white:not(span) {
  background-color: #111827 !important;
}

html.darkmode .bg-gray-50 {
  background-color: #0f172a !important;
}

html.darkmode .bg-gray-100 {
  background-color: #0b1220 !important;
}

html.darkmode .bg-gray-200 {
  background-color: #1f2937 !important;
}

html.darkmode .text-gray-900 {
  color: #f1f5f9 !important;
}

html.darkmode .text-gray-800 {
  color: #e2e8f0 !important;
}

html.darkmode .text-gray-700 {
  color: #d1d5db !important;
}

html.darkmode .text-gray-600 {
  color: #b8c0cc !important;
}

html.darkmode .text-gray-500 {
  color: #a1aab8 !important;
}

html.darkmode .text-gray-400 {
  color: #8b95a6 !important;
}

html.darkmode .text-blue-600 {
  color: #93c5fd !important;
}

html.darkmode .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

html.darkmode .border-blue-200 {
  border-color: rgba(59, 130, 246, 0.35) !important;
}

html.darkmode .text-blue-700 {
  color: #bfdbfe !important;
}

html.darkmode .border-gray-200 {
  border-color: #2a3446 !important;
}

html.darkmode .border-gray-300 {
  border-color: #3a4558 !important;
}

html.darkmode .border {
  border-color: #334155 !important;
}

html.darkmode input,
html.darkmode select,
html.darkmode textarea {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: #334155;
}

html.darkmode input::placeholder,
html.darkmode textarea::placeholder {
  color: #94a3b8;
}

html.darkmode input:focus,
html.darkmode select:focus,
html.darkmode textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
}

html.darkmode .shadow,
html.darkmode .shadow-md,
html.darkmode .shadow-xl {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

html.darkmode ::selection {
  background: #1f2a44;
  color: #f8fafc;
}

html.darkmode #prefix-length,
html.darkmode #host-count {
  color: #f8fafc;
}

html.darkmode #ipv6-prefix-example .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

html.darkmode #ipv6-prefix-example .text-blue-700 {
  color: #93c5fd !important;
}

html.darkmode #ipv6-prefix-example .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.2) !important;
}

html.darkmode #ipv6-prefix-example .text-green-700 {
  color: #6ee7b7 !important;
}

html.darkmode #ipv6-prefix-example .bg-orange-100 {
  background-color: rgba(249, 115, 22, 0.2) !important;
}

html.darkmode #ipv6-prefix-example .text-orange-700 {
  color: #fdba74 !important;
}

html.darkmode #ipv6-prefix-example .text-gray-300 {
  color: #6b7280 !important;
}

/* Darkmode-Hover und Trenner fuer Notizliste in der Ablage. */
html.darkmode [data-note-item]:hover {
  background-color: #1a2333 !important;
  color: #bfdbfe !important;
}

html.darkmode [data-note-divider] {
  border-color: #253042 !important;
}

/* Animationen fuer Delete-Overlay. */
[data-delete-panel] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

[data-delete-panel].is-open {
  opacity: 1;
  pointer-events: auto;
}

[data-delete-box] {
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

[data-delete-panel].is-open [data-delete-box] {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-delete-panel],
  [data-delete-box] {
    transition: none;
  }

  [data-delete-box] {
    transform: none;
  }
}