/* CloseNote dark theme — sleek charcoal grey */

.dark {
  color-scheme: dark;
  --cn-bg: #0c0c0e;
  --cn-bg-soft: #111113;
  --cn-surface: #1a1a1d;
  --cn-surface-raised: #222226;
  --cn-border: rgba(255, 255, 255, 0.08);
  --cn-border-strong: rgba(255, 255, 255, 0.12);
  --cn-text: #f4f4f5;
  --cn-text-secondary: #a1a1aa;
  --cn-text-muted: #71717a;
}

.dark body {
  background: var(--cn-bg) !important;
  color: var(--cn-text) !important;
}

.dark body.cn-dashboard-page {
  background: var(--cn-bg) !important;
}

/* Surfaces */
.dark .bg-white,
.dark .bg-white\/90,
.dark .bg-white\/95,
.dark .bg-white\/80,
.dark .bg-white\/60 {
  background-color: var(--cn-surface) !important;
}

.dark .bg-slate-50,
.dark .bg-slate-50\/40,
.dark .bg-slate-50\/80,
.dark .from-slate-50 {
  background-color: var(--cn-bg-soft) !important;
}

.dark .bg-gradient-to-b.from-slate-50.to-white {
  background: var(--cn-bg) !important;
}

.dark .bg-\[\#f8fafc\],
.dark .bg-\[\#f8fafc\]\/90 {
  background-color: var(--cn-bg) !important;
}

.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-50\/80:hover,
.dark .hover\:bg-slate-50\/70:hover {
  background-color: var(--cn-surface-raised) !important;
}

.dark .bg-blue-50\/30 {
  background-color: rgba(37, 99, 235, 0.12) !important;
}

/* Borders */
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-200\/60,
.dark .border-slate-200\/70,
.dark .border-slate-200\/80,
.dark .border-dashed.border-slate-200 {
  border-color: var(--cn-border) !important;
}

.dark .border-blue-200\/60 {
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--cn-border) !important;
}

/* Text */
.dark .text-slate-900 { color: var(--cn-text) !important; }
.dark .text-slate-800 { color: #e4e4e7 !important; }
.dark .text-slate-700 { color: #d4d4d8 !important; }
.dark .text-slate-600 { color: var(--cn-text-secondary) !important; }
.dark .text-slate-500 { color: var(--cn-text-secondary) !important; }
.dark .text-slate-400 { color: var(--cn-text-muted) !important; }
.dark .text-slate-300 { color: #52525b !important; }

.dark .placeholder\:text-slate-400::placeholder {
  color: var(--cn-text-muted) !important;
}

/* Header / footer */
.dark header {
  background-color: rgba(12, 12, 14, 0.92) !important;
  border-color: var(--cn-border) !important;
}

.dark footer {
  border-color: var(--cn-border) !important;
  background: var(--cn-bg) !important;
}

/* Cards & shadows */
.dark .shadow-sm,
.dark .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.dark .shadow-\[0_4px_16px_rgba\(15\,23\,42\,0\.06\)\]:hover,
.dark .hover\:shadow-\[0_4px_16px_rgba\(15\,23\,42\,0\.06\)\]:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

.dark .shadow-xl,
.dark .shadow-2xl,
.dark .shadow-\[0_-4px_24px_rgba\(15\,23\,42\,0\.08\)\],
.dark .shadow-\[0_-4px_24px_rgba\(15\,23\,42\,0\.06\)\] {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Status badges — toned down for dark */
.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
.dark .bg-blue-50 { background-color: rgba(37, 99, 235, 0.12) !important; }
.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.2) !important; }
.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.25) !important; }
.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.25) !important; }
.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.25) !important; }

.dark .bg-red-50\/50 { background-color: rgba(239, 68, 68, 0.08) !important; }

/* Form inputs */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark textarea,
.dark select {
  background-color: var(--cn-surface-raised) !important;
  border-color: var(--cn-border-strong) !important;
  color: var(--cn-text) !important;
}

.dark input:focus,
.dark textarea:focus {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Avatar rings on dashboard */
.dark .ring-slate-200\/60 {
  --tw-ring-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .from-slate-100.to-slate-50 {
  background: linear-gradient(to bottom right, #2a2a2e, #1f1f23) !important;
}

.dark .bg-gradient-to-br.from-blue-50.to-slate-50 {
  background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.15), #1a1a1d) !important;
}

/* Modals & overlays */
.dark .bg-slate-900\/50,
.dark .bg-slate-900\/40,
.dark .bg-slate-900\/60 {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

/* Wordmark — keep brand colors */
.dark header a span[style*="0F172A"] {
  color: #f4f4f5 !important;
}

/* Theme toggle in settings */
.cn-theme-pill {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.8);
  gap: 2px;
}

.dark .cn-theme-pill {
  border-color: var(--cn-border-strong);
  background: var(--cn-surface-raised);
}

.cn-theme-option {
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
  transition: background 0.15s, color 0.15s;
}

.cn-theme-option.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.dark .cn-theme-option {
  color: var(--cn-text-muted);
}

.dark .cn-theme-option.active {
  background: #2a2a2e;
  color: var(--cn-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}