/* ═══════════════════════════════════════════════════════════════
   CANOPY — Night Canopy Theme
   Premium dark intelligence command center
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Font Imports ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── 2. DaisyUI Theme Override ── */
:root {
  color-scheme: dark;

  /* Base backgrounds — deep forest with green undertone */
  --b1: 0.14 0.02 163;
  --b2: 0.185 0.025 163;
  --b3: 0.24 0.03 163;
  --bc: 0.9 0.015 160;

  /* Primary — vivid emerald */
  --p: 0.72 0.19 162;
  --pc: 0.98 0.01 162;

  /* Secondary — deep indigo */
  --s: 0.55 0.13 265;
  --sc: 0.95 0.01 265;

  /* Accent — bright cyan */
  --a: 0.76 0.14 194;
  --ac: 0.145 0.04 194;

  /* Neutral */
  --n: 0.22 0.018 163;
  --nc: 0.88 0.012 160;

  /* Semantic colors */
  --su: 0.72 0.2 150;
  --suc: 0.145 0.04 150;
  --wa: 0.8 0.15 85;
  --wac: 0.2 0.04 85;
  --er: 0.65 0.22 27;
  --erc: 0.97 0.01 27;
  --in: 0.7 0.15 240;
  --inc: 0.145 0.04 240;

  /* Roundedness */
  --rounded-btn: 0.65rem;
  --rounded-box: 1rem;
  --rounded-badge: 9999px;

  /* Canopy custom properties */
  --c-glow: 0 0 80px -12px oklch(0.72 0.19 162 / 0.3);
  --c-glow-sm: 0 0 40px -8px oklch(0.72 0.19 162 / 0.15);
  --c-surface-glass: oklch(0.18 0.025 163 / 0.7);
  --c-border-glass: oklch(0.3 0.035 163 / 0.4);
  --c-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── 3. Base Styles ── */
* {
  scrollbar-color: oklch(0.3 0.03 163) transparent;
  scrollbar-width: thin;
}

/* Prevent the html root from showing a white background when content overflows
   horizontally at narrow viewports. The body background only covers body width;
   html covers the full scrollable area. */
html {
  background-color: oklch(0.10 0.015 163);
  overflow-x: hidden;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background-color: oklch(0.14 0.02 163);
  color: oklch(0.9 0.015 160);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── Mobile tap-target baseline ──
   DaisyUI btn-sm defaults to h-8 (32px). On touch screens, 44px is the
   recommended minimum. We enforce this only on narrow viewports so desktop
   stays compact. Applies to any btn-sm that hasn't been explicitly overridden
   with min-h-[44px]. */
@media (max-width: 1023px) {
  .btn-sm:not([class*="min-h"]) {
    min-height: 2.75rem; /* 44px */
  }
  /* Nav btn-ghost at exactly btn-sm also needs this */
  .navbar .btn-ghost.btn-sm {
    min-height: 2.75rem;
  }
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}

code, pre, .font-mono,
kbd {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

::selection {
  background: oklch(0.72 0.19 162 / 0.3);
  color: oklch(0.95 0.01 162);
}

/* ── 4. Atmospheric Backgrounds ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, oklch(0.25 0.08 162 / 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 90% 10%, oklch(0.3 0.08 194 / 0.08), transparent),
    radial-gradient(ellipse 70% 50% at 50% 100%, oklch(0.2 0.06 265 / 0.06), transparent);
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--c-noise);
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.4;
  pointer-events: none;
}

/* ── 5. Card & Surface Styles ── */
.surface-card,
.card {
  background: var(--c-surface-glass) !important;
  border: 1px solid var(--c-border-glass) !important;
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.15),
    0 8px 24px oklch(0 0 0 / 0.12),
    inset 0 1px 0 oklch(1 0 0 / 0.03) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.surface-card:hover,
.card:hover:not(.no-hover) {
  border-color: oklch(0.35 0.04 163 / 0.6) !important;
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.15),
    0 12px 32px oklch(0 0 0 / 0.18),
    inset 0 1px 0 oklch(1 0 0 / 0.04) !important;
}

/* Elevated variant */
.surface-elevated {
  background: oklch(0.2 0.028 163 / 0.8);
  border: 1px solid oklch(0.32 0.04 163 / 0.5);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.25);
  backdrop-filter: blur(20px);
}

/* Glass variant for modals/overlays */
.surface-glass {
  background: oklch(0.16 0.022 163 / 0.85);
  border: 1px solid oklch(0.3 0.035 163 / 0.3);
  box-shadow: 0 32px 80px oklch(0 0 0 / 0.4);
  backdrop-filter: blur(24px) saturate(1.3);
}

/* ── 6. Navigation ── */
.navbar {
  background: oklch(0.12 0.018 163 / 0.9) !important;
  border-bottom: 1px solid oklch(0.24 0.03 163 / 0.5) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

/* ── 7. Form & Input Styles ── */
.input,
.select,
.textarea {
  background: oklch(0.12 0.018 163 / 0.6) !important;
  border: 1px solid oklch(0.28 0.03 163 / 0.5) !important;
  color: oklch(0.9 0.015 160) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: oklch(0.72 0.19 162 / 0.6) !important;
  box-shadow: 0 0 0 3px oklch(0.72 0.19 162 / 0.12), 0 0 20px oklch(0.72 0.19 162 / 0.08) !important;
  outline: none;
}

.input::placeholder {
  color: oklch(0.5 0.02 163 / 0.6);
}

/* Checkbox */
.checkbox {
  border-color: oklch(0.35 0.035 163) !important;
}
.checkbox:checked {
  border-color: oklch(0.72 0.19 162) !important;
  background-color: oklch(0.72 0.19 162) !important;
}

/* ── 8. Button Enhancements ── */
.btn-primary {
  background: linear-gradient(135deg, oklch(0.65 0.18 162), oklch(0.72 0.19 162), oklch(0.68 0.17 170)) !important;
  border: none !important;
  color: oklch(0.08 0.02 162) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px oklch(0.72 0.19 162 / 0.25), inset 0 1px 0 oklch(1 0 0 / 0.15);
  transition: all 0.2s;
}

.btn-primary:hover {
  background: linear-gradient(135deg, oklch(0.68 0.19 162), oklch(0.75 0.2 162), oklch(0.71 0.18 170)) !important;
  box-shadow: 0 4px 16px oklch(0.72 0.19 162 / 0.35), 0 0 40px oklch(0.72 0.19 162 / 0.15), inset 0 1px 0 oklch(1 0 0 / 0.2);
  transform: translateY(-1px);
}

.btn-ghost {
  color: oklch(0.7 0.02 160) !important;
  transition: all 0.15s;
}

.btn-ghost:hover {
  background: oklch(0.24 0.025 163 / 0.5) !important;
  color: oklch(0.9 0.015 160) !important;
}

.btn-outline {
  border-color: oklch(0.35 0.04 163 / 0.6) !important;
  color: oklch(0.8 0.02 160) !important;
}

.btn-outline:hover {
  background: oklch(0.24 0.03 163 / 0.4) !important;
  border-color: oklch(0.72 0.19 162 / 0.5) !important;
  color: oklch(0.9 0.015 160) !important;
}

.btn-neutral {
  background: oklch(0.95 0.005 163) !important;
  color: oklch(0.12 0.02 163) !important;
  font-weight: 600;
}

.btn-neutral:hover {
  background: oklch(1 0 0) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px oklch(1 0 0 / 0.15);
}

/* ── 9. Badge & Indicator Styles ── */
.badge-primary {
  background: oklch(0.72 0.19 162 / 0.15) !important;
  color: oklch(0.72 0.19 162) !important;
  border-color: oklch(0.72 0.19 162 / 0.3) !important;
}

.badge-error {
  background: oklch(0.65 0.22 27 / 0.15) !important;
  color: oklch(0.75 0.2 27) !important;
  border-color: oklch(0.65 0.22 27 / 0.3) !important;
}

.badge-warning {
  background: oklch(0.8 0.15 85 / 0.15) !important;
  color: oklch(0.82 0.14 85) !important;
  border-color: oklch(0.8 0.15 85 / 0.3) !important;
}

.badge-success {
  background: oklch(0.72 0.2 150 / 0.15) !important;
  color: oklch(0.72 0.2 150) !important;
  border-color: oklch(0.72 0.2 150 / 0.3) !important;
}

.badge-ghost {
  background: oklch(0.24 0.025 163 / 0.5) !important;
  color: oklch(0.7 0.02 160) !important;
  border-color: oklch(0.3 0.03 163 / 0.3) !important;
}

.badge-outline {
  background: transparent !important;
  border-color: oklch(0.72 0.19 162 / 0.35) !important;
  color: oklch(0.72 0.19 162) !important;
}

/* Priority indicators */
.importance-high {
  border-left: 3px solid oklch(0.65 0.22 27) !important;
}
.importance-medium {
  border-left: 3px solid oklch(0.8 0.15 85) !important;
}
.importance-low {
  border-left: 3px solid oklch(0.35 0.03 163) !important;
}

/* ── 10. Alert Styles ── */
.alert {
  background: oklch(0.18 0.025 163 / 0.8) !important;
  border: 1px solid oklch(0.3 0.03 163 / 0.4) !important;
  backdrop-filter: blur(8px);
}

.alert-error {
  background: oklch(0.65 0.22 27 / 0.1) !important;
  border-color: oklch(0.65 0.22 27 / 0.3) !important;
  color: oklch(0.8 0.18 27) !important;
}

.alert-success {
  background: oklch(0.72 0.2 150 / 0.1) !important;
  border-color: oklch(0.72 0.2 150 / 0.3) !important;
  color: oklch(0.78 0.17 150) !important;
}

/* ── 11. Table Styles ── */
.table {
  background: oklch(0.15 0.02 163 / 0.6) !important;
}

.table thead tr {
  background: oklch(0.18 0.025 163 / 0.8) !important;
  border-bottom: 1px solid oklch(0.28 0.03 163 / 0.5) !important;
}

.table th {
  color: oklch(0.6 0.02 160) !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table tbody tr {
  border-bottom-color: oklch(0.24 0.025 163 / 0.3) !important;
}

.table tbody tr:hover {
  background: oklch(0.2 0.025 163 / 0.4) !important;
}

/* ── 12. Modal ── */
.modal-box {
  background: oklch(0.16 0.022 163 / 0.95) !important;
  border: 1px solid oklch(0.3 0.035 163 / 0.4) !important;
  box-shadow: 0 32px 80px oklch(0 0 0 / 0.5) !important;
  backdrop-filter: blur(24px);
}

.modal-backdrop {
  background: oklch(0.05 0.015 163 / 0.7) !important;
  backdrop-filter: blur(4px);
}

/* ── 13. Dropdown ── */
.dropdown-content {
  background: oklch(0.16 0.022 163 / 0.95) !important;
  border: 1px solid oklch(0.3 0.035 163 / 0.4) !important;
  box-shadow: 0 16px 48px oklch(0 0 0 / 0.35) !important;
  backdrop-filter: blur(20px);
}

.menu li > a:hover,
.menu li > button:hover {
  background: oklch(0.24 0.03 163 / 0.5) !important;
}

.menu li > a.active {
  background: oklch(0.72 0.19 162 / 0.1) !important;
  color: oklch(0.72 0.19 162) !important;
}

/* ── 14. Progress ── */
.progress {
  background: oklch(0.2 0.025 163 / 0.5) !important;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.progress-primary::-webkit-progress-value {
  background: linear-gradient(90deg, oklch(0.65 0.18 162), oklch(0.72 0.19 162)) !important;
  border-radius: 999px;
}

.progress-success::-webkit-progress-value {
  background: linear-gradient(90deg, oklch(0.65 0.18 150), oklch(0.72 0.2 150)) !important;
  border-radius: 999px;
}

/* ── 15. Skeleton Shimmer ── */
.skeleton-line {
  background: linear-gradient(
    90deg,
    oklch(0.2 0.025 163) 25%,
    oklch(0.26 0.03 163) 50%,
    oklch(0.2 0.025 163) 75%
  ) !important;
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
}

/* ── 16. Animation Keyframes ── */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px oklch(0.72 0.19 162 / 0.1); }
  50% { box-shadow: 0 0 40px oklch(0.72 0.19 162 / 0.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animation utilities */
.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out both;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out both;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out both;
}

.animate-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* ── 17. Custom Scrollbar (Webkit) ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: oklch(0.3 0.03 163 / 0.5);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(0.4 0.04 163 / 0.6);
  background-clip: padding-box;
}

/* ── 18. Utility Classes ── */

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, oklch(0.72 0.19 162), oklch(0.76 0.14 194));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-warm {
  background: linear-gradient(135deg, oklch(0.8 0.15 85), oklch(0.72 0.19 162));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow border */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, oklch(0.72 0.19 162 / 0.4), oklch(0.76 0.14 194 / 0.2), oklch(0.72 0.19 162 / 0.4));
  z-index: -1;
  filter: blur(1px);
}

/* Subtle divider */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.72 0.19 162 / 0.3), transparent);
  border: none;
}

/* Status dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: oklch(0.72 0.19 162);
  box-shadow: 0 0 8px oklch(0.72 0.19 162 / 0.5);
}

.status-dot-warning {
  background: oklch(0.8 0.15 85);
  box-shadow: 0 0 8px oklch(0.8 0.15 85 / 0.5);
}

.status-dot-error {
  background: oklch(0.65 0.22 27);
  box-shadow: 0 0 8px oklch(0.65 0.22 27 / 0.5);
}

/* ── 19. Transitions ── */
a, button, .btn, .card, .badge, input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* ── 20. Typography Refinements ── */
.label-text {
  color: oklch(0.65 0.02 160) !important;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.menu-title {
  color: oklch(0.5 0.02 160) !important;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── 21. Special Components ── */

/* Toast notification */
.toast-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  animation: fadeInUp 0.3s ease-out, fadeIn 0.3s ease-out;
  backdrop-filter: blur(12px);
}

/* Stat card glow on hover */
.stat-card:hover {
  box-shadow: var(--c-glow-sm);
}

/* Feature card with colored top border */
.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, oklch(0.72 0.19 162), oklch(0.76 0.14 194));
  opacity: 0;
  transition: opacity 0.3s;
}

.feature-card:hover::before {
  opacity: 1;
}

/* Pricing card highlight */
.pricing-highlight {
  position: relative;
  border: 2px solid oklch(0.72 0.19 162 / 0.5) !important;
  box-shadow: 0 0 40px oklch(0.72 0.19 162 / 0.1), 0 20px 60px oklch(0 0 0 / 0.2);
}

.pricing-highlight::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, oklch(0.72 0.19 162 / 0.3), transparent 40%, oklch(0.76 0.14 194 / 0.2));
  z-index: -1;
  filter: blur(2px);
}

/* ── 22. Footer ── */
footer {
  background: oklch(0.1 0.015 163 / 0.8) !important;
  border-top: 1px solid oklch(0.24 0.025 163 / 0.3) !important;
}

footer a {
  color: oklch(0.6 0.02 160);
  transition: color 0.15s;
}

footer a:hover {
  color: oklch(0.72 0.19 162);
}

/* ── 23. Dark Theme Text Readability Overrides ──
   DaisyUI's text-base-content/NN opacity classes are too dim on dark backgrounds.
   Boost all reduced-opacity text to readable levels. */

/* /30 → effectively 50% */
[class*="text-base-content/30"] { color: oklch(0.9 0.015 160 / 0.5) !important; }
/* /40 → effectively 60% */
[class*="text-base-content/40"] { color: oklch(0.9 0.015 160 / 0.6) !important; }
/* /50 → effectively 70% */
[class*="text-base-content/50"] { color: oklch(0.9 0.015 160 / 0.7) !important; }
/* /60 → effectively 80% */
[class*="text-base-content/60"] { color: oklch(0.9 0.015 160 / 0.8) !important; }

/* Boost low-opacity elements that contain text */
.opacity-30 { opacity: 0.5 !important; }
.opacity-40 { opacity: 0.55 !important; }
.opacity-50 { opacity: 0.65 !important; }
.opacity-60 { opacity: 0.75 !important; }