/* =========================================================================
   Tailwind (CDN) + DaisyUI (CDN) handle almost all styling now — see
   views/partials/header.php for the <script>/<link> tags. This file only
   holds the handful of things a CDN-only setup can't express as utility
   classes: the fixed "liquid glass" mesh background, and a couple of small
   resets. Deliberately no @keyframes / heavy animation — DaisyUI's own
   built-in micro hover-transitions are left as-is (light, not "heavy"),
   nothing extra is added on top.
   ========================================================================= */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Static mesh-gradient backdrop for the "liquid glass" look — no animation,
   just several soft radial blobs behind the frosted-glass cards. */
.bg-mesh {
  background-color: #eef2ff;
  background-image:
    radial-gradient(at 12% 8%, rgba(99, 102, 241, 0.30) 0, transparent 55%),
    radial-gradient(at 88% 14%, rgba(45, 212, 191, 0.28) 0, transparent 55%),
    radial-gradient(at 92% 92%, rgba(236, 72, 153, 0.22) 0, transparent 55%),
    radial-gradient(at 8% 90%, rgba(59, 130, 246, 0.26) 0, transparent 55%),
    radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.5) 0, transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Long unbroken strings (wallet addresses, tx hashes, API keys, seed
   phrases) must never force horizontal scroll on the whole page. */
code, .break-any {
  overflow-wrap: anywhere;
  word-break: break-word;
}

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 999px; }

/* SPA-style navigation (htmx hx-boost) — thin top progress bar as the only
   loading cue; width transition only, no keyframes. */
#nprogress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(to right, #6366f1, #2dd4bf);
  z-index: 9999;
  opacity: 0;
  transition: width 400ms ease-out, opacity 150ms ease-out;
}
html.is-loading #nprogress-bar {
  width: 70%;
  opacity: 1;
}

/* =========================================================================
   Dark mode ("tun rejimi") — toggled via a `dark` class on <html> (see
   views/partials/ThemeController + header.php). DaisyUI's own components
   (btn, input, table, badge, alert…) restyle automatically because the
   data-theme attribute switches to DaisyUI's built-in "dark" theme at the
   same time. What's left here are the raw Tailwind utility classes used
   directly in the views for the "liquid glass" panels — since those are
   plain utilities (not theme-aware components), they need an explicit
   override. Selectors target the exact Tailwind-generated class names, so
   specificity (.dark .foo > .foo) wins without needing !important.
   ========================================================================= */

.dark .bg-mesh {
  background-color: #0a0d14;
  background-image:
    radial-gradient(at 12% 8%, rgba(99, 102, 241, 0.22) 0, transparent 55%),
    radial-gradient(at 88% 14%, rgba(45, 212, 191, 0.18) 0, transparent 55%),
    radial-gradient(at 92% 92%, rgba(236, 72, 153, 0.14) 0, transparent 55%),
    radial-gradient(at 8% 90%, rgba(59, 130, 246, 0.18) 0, transparent 55%),
    radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.03) 0, transparent 60%);
}

/* frosted-glass surfaces */
.dark .bg-white\/30 { background-color: rgba(30, 41, 59, 0.30); }
.dark .bg-white\/35 { background-color: rgba(30, 41, 59, 0.35); }
.dark .bg-white\/40 { background-color: rgba(30, 41, 59, 0.40); }
.dark .bg-white\/50 { background-color: rgba(20, 26, 41, 0.60); }
.dark .bg-white\/60 { background-color: rgba(24, 31, 46, 0.65); }
.dark .bg-white\/70 { background-color: rgba(30, 41, 59, 0.55); }
.dark .bg-white\/75 { background-color: rgba(30, 41, 59, 0.65); }
.dark .bg-white\/95 { background-color: rgba(15, 23, 42, 0.97); }

.dark .border-white\/50 { border-color: rgba(255, 255, 255, 0.08); }
.dark .border-white\/60 { border-color: rgba(255, 255, 255, 0.10); }
.dark .border-white\/70 { border-color: rgba(255, 255, 255, 0.12); }

/* text */
.dark .text-slate-900 { color: #f1f5f9; }
.dark .text-slate-800 { color: #e2e8f0; }
.dark .text-slate-700 { color: #cbd5e1; }
.dark .text-slate-600 { color: #cbd5e1; }
.dark .text-slate-500 { color: #94a3b8; }
.dark a.hover\:text-slate-800:hover { color: #f1f5f9; }

/* alert / status colors — keep the same hue, lift lightness + soften bg for a dark surface */
.dark .bg-emerald-50, .dark .bg-emerald-50\/80 { background-color: rgba(16, 185, 129, 0.14); }
.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35); }
.dark .text-emerald-700 { color: #6ee7b7; }
.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.14); }
.dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.35); }
.dark .text-rose-700 { color: #fda4af; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.14); }
.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); }
.dark .border-amber-300\/70 { border-color: rgba(245, 158, 11, 0.45); }
.dark .text-amber-800 { color: #fcd34d; }

/* feature icon chips (home page) */
.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18); }
.dark .text-indigo-700 { color: #a5b4fc; }
.dark .text-indigo-600 { color: #a5b4fc; }
.dark .bg-teal-100 { background-color: rgba(45, 212, 191, 0.18); }
.dark .text-teal-700 { color: #5eead4; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18); }
.dark .text-amber-700 { color: #fcd34d; }
