/* ==========================================================================
   SeoLT — Tema "Crystal Neon" (senada dengan logo baru)
   Navy gelap + aksen biru kristal & ungu neon.
   Memetakan kelas Tailwind 2 yang dipakai di dashboard/admin ke palet ini.
   Selector diawali "html body" agar menang dari Tailwind tanpa bergantung urutan file.
   ========================================================================== */

:root {
  --bg:        #060a18;
  --bg-2:      #0a1024;
  --surface:   #0e1530;
  --surface-2: #141d3d;
  --surface-3: #1b2650;
  --border:    #23305c;
  --border-2:  #2f3f75;
  --text:      #e7ecff;
  --text-2:    #c3cbea;
  --muted:     #8f9bc4;
  --faint:     #66729a;
  --cyan:      #38bdf8;
  --blue:      #3b82f6;
  --indigo:    #6366f1;
  --violet:    #8b5cf6;
  --purple:    #a855f7;
  --grad:      linear-gradient(135deg, #2563eb 0%, #6d28d9 100%);
  --grad-soft: linear-gradient(135deg, rgba(56,189,248,.16), rgba(168,85,247,.16));
  --glow:      0 0 0 1px rgba(99,102,241,.25), 0 8px 30px rgba(59,130,246,.18);
  color-scheme: dark;
}

html body {
  background-color: var(--bg) !important;   /* menang dari kelas bg-gray-* yang dipasang di <body> */
  color: var(--text) !important;            /* menang dari kelas text-gray-* yang dipasang di <body> */
  background-image:
    radial-gradient(900px 500px at 8% -10%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  background-size: auto;
  color: var(--text);
}
html body ::selection { background: rgba(99,102,241,.45); color: #fff; }

/* ---------- Permukaan / kartu ---------- */
html body .bg-white,
html body .card { background-color: var(--surface) !important; }
html body .bg-white,
html body .card { border-color: var(--border) !important; }
html body .card { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.25); }
html body .bg-gray-50 { background-color: rgba(255,255,255,.025) !important; }
html body .bg-gray-100 { background-color: var(--surface-2) !important; }
html body .bg-gray-200,
html body .bg-gray-300 { background-color: var(--surface-3) !important; }
html body .bg-gray-400 { background-color: var(--border-2) !important; }
html body .bg-gray-700,
html body .bg-gray-900 { background-color: #050816 !important; }
html body .bg-opacity-90.bg-white { background-color: rgba(14,21,48,.88) !important; backdrop-filter: blur(10px); }
html body .shadow, html body .shadow-sm, html body .shadow-md, html body .shadow-lg, html body .shadow-xl, html body .shadow-2xl {
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(99,102,241,.08) !important;
}

/* ---------- Teks ---------- */
html body .text-gray-800, html body .text-gray-900, html body .text-black { color: var(--text) !important; }
html body .text-gray-700 { color: var(--text-2) !important; }
html body .text-gray-600, html body .text-gray-500 { color: var(--muted) !important; }
html body .text-gray-400 { color: var(--faint) !important; }
html body .text-gray-100 { color: var(--text) !important; }
html body .text-blue-500, html body .text-blue-600, html body .text-blue-700 { color: #7cc4ff !important; }
html body .text-indigo-600, html body .text-indigo-700 { color: #a5b4fc !important; }
html body .text-purple-600, html body .text-purple-700 { color: #c4b5fd !important; }
html body .text-red-500, html body .text-red-600 { color: #f87171 !important; }
html body .text-red-700, html body .text-red-800 { color: #fca5a5 !important; }
html body .text-green-600, html body .text-green-700, html body .text-green-800 { color: #6ee7b7 !important; }
html body .text-yellow-600, html body .text-yellow-700, html body .text-yellow-800 { color: #fcd34d !important; }
html body a.text-blue-600:hover, html body .hover\:text-blue-600:hover, html body .hover\:text-indigo-600:hover { color: var(--cyan) !important; }
html body .hover\:text-gray-700:hover { color: var(--text) !important; }
html body .hover\:text-red-600:hover, html body .hover\:text-red-700:hover { color: #fca5a5 !important; }

/* ---------- Garis ---------- */
html body .border, html body .border-t, html body .border-b, html body .border-l, html body .border-r,
html body [class*="divide-y"] > * { border-color: var(--border) !important; }
html body .border-yellow-300 { border-color: rgba(234,179,8,.35) !important; }
html body .border-red-300, html body .border-red-400 { border-color: rgba(248,113,113,.4) !important; }
html body .border-green-300, html body .border-green-500 { border-color: rgba(52,211,153,.4) !important; }
html body .border-indigo-500 { border-color: rgba(129,140,248,.6) !important; }

/* ---------- Notifikasi / badge ---------- */
html body .bg-red-100, html body .bg-red-50 { background-color: rgba(239,68,68,.12) !important; }
html body .bg-green-100, html body .bg-green-50 { background-color: rgba(16,185,129,.12) !important; }
html body .bg-yellow-50 { background-color: rgba(234,179,8,.10) !important; }
html body .bg-indigo-50, html body .bg-blue-50, html body .bg-purple-100 { background-color: rgba(99,102,241,.16) !important; }
html body .hover\:bg-red-50:hover, html body .hover\:bg-red-100:hover { background-color: rgba(239,68,68,.18) !important; }
html body .hover\:bg-green-50:hover { background-color: rgba(16,185,129,.18) !important; }
html body .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.2) !important; }
html body .hover\:bg-gray-50:hover, html body .hover\:bg-gray-100:hover { background-color: var(--surface-2) !important; }
html body .hover\:bg-gray-200:hover, html body .hover\:bg-gray-400:hover { background-color: var(--surface-3) !important; }

/* ---------- Tombol berwarna -> gradasi kristal ---------- */
html body .bg-blue-500, html body .bg-blue-600, html body .bg-indigo-500, html body .bg-indigo-600,
html body .bg-purple-600, html body .btn-primary {
  background-color: transparent !important;
  background-image: var(--grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.15);
  border-color: transparent !important;
}
html body .hover\:bg-blue-600:hover, html body .hover\:bg-blue-700:hover, html body .hover\:bg-indigo-700:hover,
html body .hover\:bg-purple-700:hover, html body .btn-primary:hover:not(:disabled) {
  background-image: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%) !important;
  box-shadow: 0 8px 28px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
html body .bg-green-500, html body .bg-green-600 { background-color: #059669 !important; color: #fff !important; }
html body .hover\:bg-green-600:hover, html body .hover\:bg-green-700:hover { background-color: #10b981 !important; }
html body .bg-red-400, html body .bg-red-500, html body .btn-danger { background-color: #dc2626 !important; color: #fff !important; }
html body .hover\:bg-red-600:hover { background-color: #ef4444 !important; }
html body .bg-yellow-500 { background-color: #d97706 !important; color: #fff !important; }
html body .hover\:bg-yellow-600:hover { background-color: #f59e0b !important; }
html body .btn-ghost { background-color: var(--surface-2) !important; color: var(--text-2) !important; }
html body .btn-ghost:hover:not(:disabled) { background-color: var(--surface-3) !important; color: var(--text) !important; }

/* ---------- Form ---------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]),
html body select, html body textarea, html body .input {
  background-color: rgba(6,10,24,.6) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}
html body input::placeholder, html body textarea::placeholder { color: var(--faint) !important; }
html body input:focus, html body select:focus, html body textarea:focus, html body .input:focus {
  outline: none !important; border-color: var(--violet) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.25) !important;
}
html body input[type=file]::file-selector-button {
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2); border-radius: .375rem; padding: .3rem .7rem; margin-right: .6rem; cursor: pointer;
}
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--violet); }
html body select option { background: var(--surface); color: var(--text); }
html body .focus\:ring:focus, html body .focus\:ring-blue-300:focus { box-shadow: 0 0 0 3px rgba(139,92,246,.25) !important; }

/* ---------- Tabel ---------- */
html body thead, html body thead tr { background-color: var(--surface-2) !important; }
html body tbody tr:hover { background-color: rgba(99,102,241,.06); }
html body code, html body pre { color: #c7d2fe; }
html body code { background: rgba(99,102,241,.14); border-radius: .25rem; padding: 0 .3rem; }

/* ---------- Komponen dashboard ---------- */
html body .tab { color: var(--muted); }
html body .tab.active { color: #fff; border-color: var(--violet); }
html body .act { color: var(--muted); }
html body .act:hover { background: var(--surface-2); color: var(--text); }
html body .badge.bg-gray-200 { color: var(--muted) !important; }
html body .project-card:hover { box-shadow: var(--glow); }
html body .img-card.selected { outline-color: var(--violet); }
html body .phone { border-color: #000 !important; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px var(--border); }
html body header.bg-white { background-color: rgba(10,16,36,.82) !important; backdrop-filter: blur(12px); }

/* ---------- Logo ---------- */
.seolt-logo { display: block; height: 46px; width: auto; filter: drop-shadow(0 0 10px rgba(56,189,248,.25)); }
.seolt-logo-lg { display: block; height: auto; width: 100%; max-width: 360px; margin: 0 auto; filter: drop-shadow(0 0 18px rgba(99,102,241,.35)); }

/* ---------- Scrollbar ---------- */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: var(--bg); }
html body ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
html body ::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* ---------- Aksesibilitas: hormati pengaturan "kurangi animasi" ---------- */
@media (prefers-reduced-motion: reduce) {
  html body .fade-in, html body .animate-fade-in { animation: none !important; opacity: 1 !important; }
}