/* style.css — Agent Zero supplement to Tailwind CDN */

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Custom scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* ── Nav blur glass ───────────────────────────────────────────────────────── */
#navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Hero gradient ────────────────────────────────────────────────────────── */
.hero-gradient {
  background: radial-gradient(ellipse 120% 80% at 50% -20%,
    rgba(99,102,241,.35) 0%,
    rgba(168,85,247,.18) 40%,
    transparent 70%);
}

.dark .hero-gradient {
  background: radial-gradient(ellipse 120% 80% at 50% -20%,
    rgba(99,102,241,.25) 0%,
    rgba(168,85,247,.12) 40%,
    transparent 70%);
}

/* ── Gradient text ────────────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Service cards hover glow ────────────────────────────────────────────── */
.service-card:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,.35), 0 8px 30px rgba(99,102,241,.12);
}

/* ── Floating blobs (hero decorations) ────────────────────────────────────── */
@keyframes blob {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(20px,-20px) scale(1.05); }
  66%       { transform: translate(-12px,12px) scale(.95); }
}
.blob { animation: blob 8s ease-in-out infinite; }
.blob-delay { animation-delay: 3s; }

/* ── OTP inputs ───────────────────────────────────────────────────────────── */
.otp-input:focus { outline: none; }
.otp-input { caret-color: transparent; text-align: center; }

/* ── Kanban drag ghost ────────────────────────────────────────────────────── */
.kanban-card[draggable="true"]:active { cursor: grabbing; }

/* ── DataTables overrides (dark compat) ─────────────────────────────────── */
.dark table.dataTable thead th,
.dark table.dataTable thead td {
  border-bottom-color: #374151;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #d1d5db !important;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #4f46e5 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
}
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter {
  color: #9ca3af;
}
.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
  background: #1f2937;
  color: #f9fafb;
  border-color: #374151;
}

/* ── Leaflet dark tile overlay ────────────────────────────────────────────── */
.dark .leaflet-tile {
  filter: brightness(.7) invert(1) contrast(3) hue-rotate(200deg) saturate(.3) brightness(.7);
}

/* ── Print: hide nav / sidebar ────────────────────────────────────────────── */
@media print {
  #navbar, aside, header { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; }
}

/* ── Focus-visible for accessibility ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}