/* ==========================================================
   Allin1Developers — Cyber Blue theme
   Loaded AFTER Tailwind on every page. UI only, no logic.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&display=swap');

:root {
  --a1-bg:    #02050b;
  --a1-s0:    #040b16;   /* deepest: inputs, nav, table heads */
  --a1-s1:    #08132a;   /* cards */
  --a1-s2:    #0c1d3a;   /* raised / hover */
  --a1-line:  rgba(56, 160, 255, .22);
  --a1-line2: rgba(56, 160, 255, .38);
  --a1-blue:  #1e90ff;
  --a1-blue2: #0a5cff;
  --a1-cyan:  #38d0ff;
  --a1-text:  #e8f3ff;
  --a1-body:  #b9d0ee;
  --a1-mute:  #8fb0d6;
  --a1-dim:   #5f7da3;
  --a1-glow:  0 0 0 1px rgba(56,160,255,.18), 0 18px 60px rgba(0,70,190,.28);
  color-scheme: dark;
}

/* ---------- Page ---------- */
body[class] {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(30,120,255,.20), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(0,180,255,.09), transparent 60%),
    var(--a1-bg) !important;
  background-attachment: fixed !important;
  color: var(--a1-body) !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body::before {               /* faint circuit grid, sits behind content */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(56,160,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,160,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 72%);
}
h1, h2, h3, h4 {
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  letter-spacing: .02em !important;
}
h1 { font-size: 2.1rem !important; }
::selection { background: rgba(56,208,255,.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--a1-s0); }
::-webkit-scrollbar-thumb { background: #14335a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #1d4f8c; }

/* ---------- Logo ---------- */
body img[src$="logo.png"] {
  object-fit: contain;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 14px rgba(40,150,255,.55));
  box-shadow: none !important;
}
body img.a1-hero {
  width: 9.5rem !important; height: 9.5rem !important;
  animation: a1-pulse 4.5s ease-in-out infinite;
}
@keyframes a1-pulse {
  0%,100% { filter: drop-shadow(0 0 12px rgba(40,150,255,.45)); }
  50%     { filter: drop-shadow(0 0 30px rgba(56,208,255,.85)); }
}
@media (prefers-reduced-motion: reduce) {
  body img.a1-hero { animation: none; }
}
.a1-credit {
  margin-top: 1.75rem; text-align: center; font-size: .7rem;
  letter-spacing: .12em; color: var(--a1-dim) !important;
}
.a1-credit b { color: var(--a1-cyan); font-weight: 700; }

/* ---------- Surfaces ---------- */
body nav {
  background: rgba(3, 8, 17, .86) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--a1-line) !important;
  box-shadow: 0 1px 0 rgba(56,160,255,.30), 0 10px 34px rgba(0,90,255,.10) !important;
}
body .bg-white,
body .bg-gray-800,
body .bg-slate-800,
body .bg-slate-800\/80 { background-color: var(--a1-s1) !important; }

body .bg-slate-900,
body .bg-slate-900\/80,
body .bg-slate-900\/50 { background-color: var(--a1-s0) !important; }

body .bg-gray-50,
body .bg-gray-50\/80,
body .bg-gray-50\/50,
body .bg-gray-100,
body .bg-slate-700,
body .bg-slate-800\/50 { background-color: var(--a1-s2) !important; }

body .bg-white\/60 { background-color: rgba(4,11,22,.72) !important; }

body .bg-gray-900,
body .bg-\[\#111827\] {
  background-color: #0d2a52 !important;
  box-shadow: inset 0 0 0 1px var(--a1-line2) !important;
}

/* Login / auth cards and big panels get the cyber glow */
body .rounded-\[2rem\] {
  border: 1px solid var(--a1-line2) !important;
  box-shadow: var(--a1-glow), inset 0 1px 0 rgba(130,200,255,.10) !important;
}
body .rounded-\[1\.5rem\],
body .rounded-3xl { border-color: var(--a1-line) !important; }
body .shadow-sm, body .shadow-xl, body .shadow-2xl { box-shadow: 0 10px 40px rgba(0,50,140,.22) !important; }

/* ---------- Borders & dividers ---------- */
body .border-gray-50,
body .border-gray-100,
body .border-gray-200,
body .border-gray-200\/60,
body .border-gray-300,
body .border-gray-700,
body .border-slate-700,
body .border-slate-700\/80,
body .border-slate-700\/50,
body .border-slate-800 { border-color: var(--a1-line) !important; }
body .border-blue-50,
body .border-blue-100 { border-color: var(--a1-line2) !important; }
body .border-indigo-900\/50 { border-color: rgba(56,160,255,.25) !important; }
body .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body .divide-slate-700\/60 > :not([hidden]) ~ :not([hidden]) { border-color: var(--a1-line) !important; }

/* ---------- Text ---------- */
body .text-gray-900,
body .text-gray-800,
body .text-black,
body .text-slate-200 { color: var(--a1-text) !important; }
body .text-gray-700,
body .text-gray-600,
body .text-slate-300 { color: var(--a1-body) !important; }
body .text-gray-500,
body .text-slate-400 { color: var(--a1-mute) !important; }
body .text-gray-400,
body .text-gray-300,
body .text-slate-500,
body .text-slate-600 { color: var(--a1-dim) !important; }

body .text-blue-500,
body .text-blue-600,
body .text-blue-700,
body .text-blue-800 { color: var(--a1-cyan) !important; }
body .text-blue-300,
body .text-blue-400 { color: #7cc7ff !important; }
body .text-purple-400,
body .text-purple-500,
body .text-purple-600 { color: #67e8f9 !important; }
body .text-indigo-200 { color: #a9d4ff !important; }

body .hover\:text-blue-600:hover,
body .hover\:text-blue-800:hover { color: #9be6ff !important; }
body .hover\:text-gray-600:hover { color: var(--a1-text) !important; }

/* ---------- Brand tints (pastel -> glass) ---------- */
body .bg-blue-50,
body .bg-blue-50\/50,
body .bg-blue-100 { background-color: rgba(30,144,255,.13) !important; }
body .bg-purple-50\/50,
body .bg-purple-100 { background-color: rgba(56,208,255,.09) !important; }
body .bg-purple-500\/10 { background-color: rgba(56,208,255,.10) !important; }
body .border-purple-50,
body .border-purple-500\/20 { border-color: rgba(56,208,255,.28) !important; }

/* ---------- Primary buttons ---------- */
body .bg-blue-600,
body .bg-blue-700 {
  background-image: linear-gradient(135deg, var(--a1-blue), var(--a1-blue2)) !important;
  background-color: var(--a1-blue2) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(120,200,255,.35), 0 8px 26px rgba(10,92,255,.40) !important;
}
body .bg-purple-600,
body .bg-purple-700,
body .hover\:bg-purple-700:hover {
  background-image: linear-gradient(135deg, #0ea5c9, #0b6fd6) !important;
  background-color: #0b6fd6 !important;
  box-shadow: 0 0 0 1px rgba(103,232,249,.35), 0 8px 26px rgba(6,140,200,.35) !important;
}
body .bg-blue-600:hover,
body .bg-purple-600:hover,
body button.bg-gray-900:hover { filter: brightness(1.18); }
body .hover\:bg-blue-500:hover,
body .hover\:bg-blue-700:hover { background-color: #1a74ff !important; }

/* ---------- Hover surfaces (kept dark) ---------- */
body .hover\:bg-white:hover,
body .hover\:bg-gray-50\/50:hover,
body .hover\:bg-gray-100:hover,
body .hover\:bg-blue-50:hover,
body .hover\:bg-blue-100:hover,
body .hover\:bg-purple-50:hover,
body .hover\:bg-slate-700:hover,
body .hover\:bg-slate-600:hover,
body .hover\:bg-slate-700\/30:hover { background-color: rgba(30,144,255,.16) !important; }
body .hover\:bg-red-50:hover,
body .hover\:bg-rose-50:hover,
body .hover\:bg-red-100:hover { background-color: rgba(244,63,94,.16) !important; }
body .hover\:bg-black:hover { background-color: #0f3366 !important; }
body .hover\:shadow-sm:hover,
body .hover\:shadow-md:hover { box-shadow: 0 0 0 1px var(--a1-line2) !important; }

/* ---------- Gradient banners ---------- */
body .from-emerald-600 {            /* "Active plan" banner -> cyber blue */
  background-image: linear-gradient(120deg, #06235a 0%, #0a59d6 55%, #12a8e8 100%) !important;
  box-shadow: 0 0 0 1px var(--a1-line2), 0 18px 50px rgba(10,92,255,.28) !important;
}
body .text-emerald-100 { color: #d4ecff !important; }
body .text-emerald-300 { color: #8fd8ff !important; }
body .bg-emerald-400\/30 { background-color: rgba(255,255,255,.14) !important; }
body .border-emerald-300\/30 { border-color: rgba(255,255,255,.28) !important; }

body .from-red-500 {                /* "Plan expired" banner stays an alert, just darker */
  background-image: linear-gradient(120deg, #6b1230 0%, #b3123f 60%, #8f1239 100%) !important;
  box-shadow: 0 0 0 1px rgba(251,113,133,.35), 0 18px 50px rgba(190,18,63,.25) !important;
}
body a.bg-white.text-rose-600 {     /* CTA inside red banner stays white */
  background-color: #fff !important; color: #be123c !important;
}
body .from-slate-900 {              /* running-period mini panel */
  background-image: linear-gradient(135deg, #020814, #07224a) !important;
  box-shadow: inset 0 0 0 1px var(--a1-line) !important;
}

/* ---------- Status colours (readable on dark) ---------- */
body .bg-emerald-50,
body .bg-emerald-50\/40,
body .bg-emerald-100,
body .bg-green-50 { background-color: rgba(16,185,129,.13) !important; }
body .text-emerald-600,
body .text-emerald-700,
body .text-green-600 { color: #34d399 !important; }
body .border-emerald-100,
body .border-green-500 { border-color: rgba(52,211,153,.32) !important; }

body .bg-red-50,
body .bg-red-100,
body .bg-rose-50,
body .bg-rose-100 { background-color: rgba(244,63,94,.13) !important; }
body .text-red-600,
body .text-red-800,
body .text-rose-600 { color: #fb7185 !important; }
body .border-rose-100,
body .border-red-200 { border-color: rgba(251,113,133,.32) !important; }

body .bg-amber-50,
body .bg-amber-100 { background-color: rgba(245,158,11,.13) !important; }
body .text-amber-500,
body .text-amber-600,
body .text-amber-800 { color: #fbbf24 !important; }
body .border-amber-100,
body .border-amber-200,
body .border-amber-500 { border-color: rgba(251,191,36,.34) !important; }

/* ---------- Forms ---------- */
body input,
body select,
body textarea {
  background-color: var(--a1-s0) !important;
  border: 1px solid var(--a1-line) !important;
  color: var(--a1-text) !important;
}
body input::placeholder,
body textarea::placeholder { color: var(--a1-dim) !important; opacity: 1; }
body input:focus,
body select:focus,
body textarea:focus {
  outline: none !important;
  border-color: var(--a1-cyan) !important;
  background-color: #050f20 !important;
  box-shadow: 0 0 0 3px rgba(56,208,255,.20), 0 0 18px rgba(56,208,255,.14) !important;
}
body select option { background: var(--a1-s1); color: var(--a1-text); }
body input:-webkit-autofill {
  -webkit-text-fill-color: var(--a1-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--a1-s0) inset !important;
  caret-color: var(--a1-text);
}
body code { background-color: var(--a1-s2) !important; color: #9be6ff !important; }

/* ---------- Tables / misc ---------- */
body thead { background-color: var(--a1-s0) !important; }
body .backdrop-blur-\[2px\] { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body a:focus-visible, body button:focus-visible {
  outline: 2px solid var(--a1-cyan); outline-offset: 2px;
}

/* keep fixed-size icon boxes from squishing on narrow screens */
body [class~="w-16"][class~="h-16"],
body [class~="w-14"][class~="h-14"],
body [class~="w-12"][class~="h-12"],
body [class~="w-10"][class~="h-10"] { flex-shrink: 0; }