/* ═══════════════════════════════════════════════════════════════════════════════
   StratMap — 2026 Dark Mode System
   ─────────────────────────────────
   Palette philosophy: Cosmic Dark — near-black surfaces with subtle,
   jewel-toned tints for semantic regions. Maximum contrast, minimum eye strain.

   Scale:
     bg-root    #0A0A0A   page root
     bg-nav     #111111   navbar / persistent chrome
     bg-card    #161616   milestone cards, panels
     bg-surface #1C1C1C   inputs, nested areas
     bg-raised  #222222   hover states, dropdowns
     border-0   #1F1F1F   very subtle lines
     border-1   #2A2A2A   standard borders
     border-2   #383838   stronger / active borders
     text-1     #F2F2F2   primary (heading) text
     text-2     #A0A0A0   secondary text
     text-3     #636363   tertiary / placeholder
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Color scheme declaration ── */
:root { color-scheme: light; accent-color: #4f46e5; }
.dark  { color-scheme: dark; accent-color: #6366f1; }

/* ═══════════════════════════════════════════════════════════════════════════════
   1. SCROLLBARS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark ::-webkit-scrollbar            { width: 6px; height: 6px; }
.dark ::-webkit-scrollbar-track      { background: transparent; }
.dark ::-webkit-scrollbar-thumb      { background: #2E2E2E; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb:hover{ background: #444; }
/* Gantt horizontal scroller */
.dark .gantt-scroll::-webkit-scrollbar-track { background: #111; }
.dark .gantt-scroll::-webkit-scrollbar-thumb { background: #333; }

/* ═══════════════════════════════════════════════════════════════════════════════
   2. BODY BASE
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark body { background-color: #0A0A0A; color: #F2F2F2; }

/* ═══════════════════════════════════════════════════════════════════════════════
   3. NEUTRAL BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .bg-white        { background-color: #161616 !important; }
.dark .bg-slate-50     { background-color: #0A0A0A !important; }
.dark .bg-slate-100    { background-color: #141414 !important; }
.dark .bg-slate-200    { background-color: #1C1C1C !important; }
.dark .bg-slate-300    { background-color: #262626 !important; }
.dark .bg-slate-400    { background-color: #333333 !important; }
.dark .bg-slate-800    { background-color: #0A0A0A !important; }
.dark .bg-gray-50      { background-color: #0A0A0A !important; }
.dark .bg-gray-100     { background-color: #141414 !important; }
.dark .bg-gray-200     { background-color: #1C1C1C !important; }
.dark .bg-gray-400     { background-color: #333333 !important; }

/* ── Transparent / alpha neutrals ── */
.dark .bg-white\/80    { background-color: rgba(22,22,22,0.92) !important; }
.dark .bg-white\/60    { background-color: rgba(22,22,22,0.75) !important; }
.dark .bg-white\/50    { background-color: rgba(22,22,22,0.6)  !important; }
.dark .bg-white\/40    { background-color: rgba(22,22,22,0.5)  !important; }
.dark .bg-white\/20    { background-color: rgba(255,255,255,0.04) !important; }
.dark .bg-slate-50\/70 { background-color: rgba(10,10,10,0.75) !important; }
.dark .bg-slate-100\/80{ background-color: rgba(20,20,20,0.88) !important; }
.dark .bg-slate-200\/50{ background-color: rgba(28,28,28,0.55) !important; }
.dark .bg-black\/50    { background-color: rgba(0,0,0,0.80) !important; }
.dark .bg-black\/60    { background-color: rgba(0,0,0,0.85) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   4. JEWEL-TINT SEMANTIC BACKGROUNDS
      Principle: very dark base + subtle hue glow. Rich, not flat.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ── purple (primary brand accent) ── */
.dark .bg-purple-50     { background-color: #130F28 !important; }
.dark .bg-purple-100    { background-color: #181332 !important; }
.dark .bg-purple-600    { background-color: #6366f1 !important; }
.dark .bg-purple-700    { background-color: #4F46E5 !important; }
.dark .bg-purple-500    { background-color: #7C3AED !important; }

/* ── purple ── */
.dark .bg-purple-50     { background-color: #110F28 !important; }
.dark .bg-purple-100    { background-color: #161332 !important; }

/* ── purple ── */
.dark .bg-purple-50     { background-color: #130F28 !important; }
.dark .bg-purple-100    { background-color: #181332 !important; }
.dark .bg-purple-500    { background-color: #a855f7 !important; }

/* ── emerald (NOW column) ── */
.dark .bg-emerald-50    { background-color: #071815 !important; }
.dark .bg-emerald-100   { background-color: #0A2018 !important; }
.dark .bg-emerald-600   { background-color: #059669 !important; }
.dark .bg-emerald-700   { background-color: #047857 !important; }

/* ── Opacity variants for column backgrounds (0.10 = rich but not garish) ── */
.dark .bg-emerald-50\/60{ background-color: rgba(10, 185, 129, 0.10) !important; }
.dark .bg-orange-50\/60 { background-color: rgba(249, 115,  22, 0.10) !important; }
.dark .bg-purple-50\/60 { background-color: rgba( 99, 102, 241, 0.10) !important; }
.dark .bg-purple-50\/60 { background-color: rgba(139,  92, 246, 0.10) !important; }
.dark .bg-amber-50\/60  { background-color: rgba(245, 158,  11, 0.10) !important; }
.dark .bg-rose-50\/60   { background-color: rgba(244,  63,  94, 0.10) !important; }
.dark .bg-purple-50\/30 { background-color: rgba( 99, 102, 241, 0.08) !important; }
.dark .hover\:bg-purple-50\/30:hover { background-color: rgba(99,102,241,0.14) !important; }

/* ── green ── */
.dark .bg-green-50      { background-color: #071808 !important; }
.dark .bg-green-100     { background-color: #0A200B !important; }
/* ── teal ── */
.dark .bg-teal-50       { background-color: #061616 !important; }
.dark .bg-teal-100      { background-color: #091E1E !important; }
/* ── cyan ── */
.dark .bg-cyan-50       { background-color: #061518 !important; }
.dark .bg-cyan-100      { background-color: #091C22 !important; }
/* ── sky ── */
.dark .bg-sky-50        { background-color: #07131F !important; }
.dark .bg-sky-100       { background-color: #0A192A !important; }
/* ── blue ── */
.dark .bg-blue-50       { background-color: #0A1028 !important; }
.dark .bg-blue-100      { background-color: #0E1535 !important; }
/* ── orange ── */
.dark .bg-orange-50     { background-color: #1A1008 !important; }
.dark .bg-orange-100    { background-color: #221408 !important; }
/* ── amber ── */
.dark .bg-amber-50      { background-color: #1A1505 !important; }
.dark .bg-amber-100     { background-color: #201B07 !important; }
.dark .bg-amber-600     { background-color: #d97706 !important; }
.dark .bg-amber-700     { background-color: #b45309 !important; }
/* ── yellow ── */
.dark .bg-yellow-50     { background-color: #161300 !important; }
.dark .bg-yellow-100    { background-color: #1E1B00 !important; }
/* ── rose ── */
.dark .bg-rose-50       { background-color: #1A0B0E !important; }
.dark .bg-rose-100      { background-color: #220D12 !important; }
.dark .bg-rose-500      { background-color: #f43f5e !important; }
.dark .bg-rose-600      { background-color: #e11d48 !important; }
.dark .bg-rose-700      { background-color: #be123c !important; }
/* ── red ── */
.dark .bg-red-50        { background-color: #1A0808 !important; }
.dark .bg-red-100       { background-color: #220B0B !important; }
.dark .bg-red-500       { background-color: #ef4444 !important; }
/* ── pink ── */
.dark .bg-pink-50       { background-color: #1A0814 !important; }
.dark .bg-pink-100      { background-color: #220B1A !important; }

/* ── Emerald card success tint ── */
.dark .bg-emerald-50\/10{ background-color: rgba(10,185,129,0.05) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   5. GRADIENTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .from-slate-50  { --tw-gradient-from: #0A0A0A !important; }
.dark .from-white     { --tw-gradient-from: #161616 !important; }
.dark .to-white       { --tw-gradient-to:   #161616 !important; }
.dark .to-slate-50    { --tw-gradient-to:   #0A0A0A !important; }
/* Branded gradients (purple→purple) stay vivid in dark — intentionally not overridden */

/* ═══════════════════════════════════════════════════════════════════════════════
   6. TEXT — NEUTRALS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .text-black      { color: #F2F2F2 !important; }
.dark .text-slate-900  { color: #F2F2F2 !important; }
.dark .text-slate-800  { color: #E8E8E8 !important; }
.dark .text-slate-700  { color: #CCCCCC !important; }
.dark .text-slate-600  { color: #A0A0A0 !important; }
.dark .text-slate-500  { color: #727272 !important; }
.dark .text-slate-400  { color: #555555 !important; }
.dark .text-slate-300  { color: #404040 !important; }
.dark .text-gray-900   { color: #F2F2F2 !important; }
.dark .text-gray-800   { color: #E8E8E8 !important; }
.dark .text-gray-700   { color: #CCCCCC !important; }
.dark .text-gray-600   { color: #A0A0A0 !important; }
.dark .text-gray-500   { color: #727272 !important; }
.dark .text-gray-400   { color: #555555 !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   7. TEXT — SEMANTIC (vivid on dark backgrounds, WCAG AA compliant)
   ═══════════════════════════════════════════════════════════════════════════════ */
/* purple */
.dark .text-purple-900 { color: #c7d2fe !important; }
.dark .text-purple-800 { color: #a5b4fc !important; }
.dark .text-purple-700 { color: #a5b4fc !important; }
.dark .text-purple-600 { color: #818cf8 !important; }
.dark .text-purple-500 { color: #6366f1 !important; }
.dark .text-purple-400 { color: #818cf8 !important; }
.dark .text-purple-300 { color: #a5b4fc !important; }
.dark .text-purple-200 { color: #c7d2fe !important; }
.dark .text-purple-100 { color: #e0e7ff !important; }
/* purple */
.dark .text-purple-700 { color: #c4b5fd !important; }
.dark .text-purple-600 { color: #a78bfa !important; }
/* purple */
.dark .text-purple-700 { color: #d8b4fe !important; }
.dark .text-purple-600 { color: #c084fc !important; }
/* emerald */
.dark .text-emerald-800{ color: #6ee7b7 !important; }
.dark .text-emerald-700{ color: #6ee7b7 !important; }
.dark .text-emerald-600{ color: #34d399 !important; }
.dark .text-emerald-400{ color: #34d399 !important; }
/* green */
.dark .text-green-700  { color: #86efac !important; }
.dark .text-green-600  { color: #4ade80 !important; }
/* teal */
.dark .text-teal-700   { color: #5eead4 !important; }
.dark .text-teal-600   { color: #2dd4bf !important; }
/* cyan */
.dark .text-cyan-700   { color: #67e8f9 !important; }
.dark .text-cyan-600   { color: #22d3ee !important; }
/* sky */
.dark .text-sky-700    { color: #7dd3fc !important; }
.dark .text-sky-600    { color: #38bdf8 !important; }
/* blue */
.dark .text-blue-700   { color: #93c5fd !important; }
.dark .text-blue-600   { color: #60a5fa !important; }
/* orange */
.dark .text-orange-800 { color: #fed7aa !important; }
.dark .text-orange-700 { color: #fdba74 !important; }
.dark .text-orange-600 { color: #fb923c !important; }
.dark .text-orange-300 { color: #fed7aa !important; }
/* amber */
.dark .text-amber-800  { color: #fcd34d !important; }
.dark .text-amber-700  { color: #fcd34d !important; }
.dark .text-amber-600  { color: #fbbf24 !important; }
/* yellow */
.dark .text-yellow-700 { color: #fde047 !important; }
.dark .text-yellow-600 { color: #facc15 !important; }
/* rose */
.dark .text-rose-800   { color: #fda4af !important; }
.dark .text-rose-700   { color: #fda4af !important; }
.dark .text-rose-600   { color: #fb7185 !important; }
.dark .text-rose-400   { color: #fb7185 !important; }
/* red */
.dark .text-red-700    { color: #fca5a5 !important; }
.dark .text-red-600    { color: #f87171 !important; }
.dark .text-red-500    { color: #ef4444 !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   8. BORDERS
   ═══════════════════════════════════════════════════════════════════════════════ */
/* neutrals */
.dark .border-white      { border-color: #2A2A2A !important; }
.dark .border-slate-50   { border-color: #1A1A1A !important; }
.dark .border-slate-100  { border-color: #1F1F1F !important; }
.dark .border-slate-200  { border-color: #2A2A2A !important; }
.dark .border-slate-300  { border-color: #383838 !important; }
.dark .border-slate-700  { border-color: #383838 !important; }
.dark .border-slate-800  { border-color: #2A2A2A !important; }
.dark .border-gray-100   { border-color: #1F1F1F !important; }
.dark .border-gray-200   { border-color: #2A2A2A !important; }
.dark .border-gray-300   { border-color: #383838 !important; }
/* semantic */
.dark .border-purple-100 { border-color: #252B60 !important; }
.dark .border-purple-200 { border-color: #313880 !important; }
.dark .border-purple-300 { border-color: #424CA0 !important; }
.dark .border-purple-400 { border-color: #5560BE !important; }
.dark .border-purple-500 { border-color: #6366f1 !important; }
.dark .border-purple-600 { border-color: #6366f1 !important; }
.dark .border-purple-200 { border-color: #342270 !important; }
.dark .border-purple-300 { border-color: #463292 !important; }
.dark .border-purple-100 { border-color: #28184A !important; }
/* emerald borders — visible on #161616 cards */
.dark .border-emerald-200{ border-color: #1A4D38 !important; }
.dark .border-emerald-300{ border-color: #226048 !important; }
.dark .border-emerald-400{ border-color: #2E7860 !important; }
.dark .border-emerald-500{ border-color: #10b981 !important; }
/* orange borders */
.dark .border-orange-200 { border-color: #523520 !important; }
.dark .border-amber-200  { border-color: #3D3510 !important; }
.dark .border-amber-500  { border-color: #d97706 !important; }
.dark .border-rose-100   { border-color: #2A1018 !important; }
.dark .border-rose-200   { border-color: #3A1522 !important; }
.dark .border-rose-400   { border-color: #e11d48 !important; }
.dark .border-red-200    { border-color: #3A1515 !important; }
.dark .border-blue-100   { border-color: #152040 !important; }
.dark .border-blue-200   { border-color: #1E2D5E !important; }
.dark .border-cyan-100   { border-color: #0F2530 !important; }
.dark .border-sky-200    { border-color: #0C3A5A !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   9. HOVER STATES
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .hover\:bg-white:hover          { background-color: #222222 !important; }
.dark .hover\:bg-slate-50:hover       { background-color: #141414 !important; }
.dark .hover\:bg-slate-100:hover      { background-color: #1C1C1C !important; }
.dark .hover\:bg-slate-200:hover      { background-color: #262626 !important; }
.dark .hover\:bg-slate-200\/50:hover  { background-color: rgba(38,38,38,0.6) !important; }
.dark .hover\:bg-gray-50:hover        { background-color: #141414 !important; }
.dark .hover\:bg-gray-100:hover       { background-color: #1C1C1C !important; }
.dark .hover\:bg-purple-50:hover      { background-color: #181E50 !important; }
.dark .hover\:bg-purple-100:hover     { background-color: #1E2558 !important; }
.dark .hover\:bg-red-50:hover         { background-color: #22080B !important; }
.dark .hover\:bg-red-100:hover        { background-color: #2A0D0D !important; }
.dark .hover\:bg-rose-50:hover        { background-color: #220E14 !important; }
.dark .hover\:bg-emerald-50:hover     { background-color: #0A2218 !important; }
.dark .hover\:bg-purple-50:hover      { background-color: #191530 !important; }
.dark .hover\:bg-amber-50:hover       { background-color: #201B07 !important; }
/* text hover */
.dark .hover\:text-slate-700:hover    { color: #CCCCCC !important; }
.dark .hover\:text-slate-800:hover    { color: #E8E8E8 !important; }
.dark .hover\:text-slate-900:hover    { color: #F2F2F2 !important; }
.dark .hover\:text-purple-600:hover   { color: #818cf8 !important; }
.dark .hover\:text-purple-700:hover   { color: #a5b4fc !important; }
.dark .hover\:text-red-600:hover      { color: #f87171 !important; }
.dark .hover\:text-red-700:hover      { color: #fca5a5 !important; }
/* border hover */
.dark .hover\:border-purple-300:hover { border-color: #3A4090 !important; }
.dark .hover\:border-slate-300:hover  { border-color: #383838 !important; }
.dark .hover\:border-purple-300:hover { border-color: #3A2E7E !important; }

/* ── Primary button hover ── */
.dark .hover\:bg-purple-700:hover { background-color: #4F46E5 !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   10. DIVIDERS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .divide-slate-100 > * + * { border-color: #1F1F1F !important; }
.dark .divide-slate-200 > * + * { border-color: #2A2A2A !important; }
.dark .divide-gray-200  > * + * { border-color: #2A2A2A !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   11. RING / FOCUS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .ring-slate-50  { --tw-ring-color: #161616 !important; }
.dark .ring-white     { --tw-ring-color: #2A2A2A !important; }
.dark .hover\:ring-purple-100:hover { --tw-ring-color: #1E2355 !important; }
.dark .focus\:ring-purple-500\/20:focus,
.dark .focus\:ring-indigo-500\/20:focus,
.dark .focus\:ring-indigo-500\/30:focus {
  --tw-ring-color: rgba(99,102,241,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dark select,
.dark textarea {
  background-color: #0F0F0F !important;
  color: #E8E8E8 !important;
  border-color: #2A2A2A !important;
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus { border-color: #6366f1 !important; outline: none; }
.dark input::placeholder,
.dark textarea::placeholder { color: #505050 !important; }
.dark select option { background-color: #161616; color: #E8E8E8; }

/* ═══════════════════════════════════════════════════════════════════════════════
   13. SHADOWS  (deeper blacks for genuine depth perception)
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) !important; }
.dark .shadow     { box-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) !important; }
.dark .shadow-md  { box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; }
.dark .shadow-lg  { box-shadow: 0 8px 24px rgba(0,0,0,0.65) !important; }
.dark .shadow-xl  { box-shadow: 0 16px 40px rgba(0,0,0,0.70) !important; }
.dark .shadow-2xl { box-shadow: 0 24px 48px rgba(0,0,0,0.75) !important; }
/* hover shadow elevation */
.dark .hover\:shadow-md:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.65) !important; }
/* colored shadow → neutral */
.dark .shadow-purple-200,
.dark .shadow-purple-100 { box-shadow: 0 4px 14px rgba(79,70,229,0.25) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   14. RECHARTS SVG OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */
.dark .recharts-cartesian-axis-tick-value  { fill: #636363 !important; }
.dark .recharts-cartesian-grid line        { stroke: #1F1F1F !important; }
.dark .recharts-default-tooltip            {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 10px !important;
}
.dark .recharts-tooltip-item              { color: #CCCCCC !important; }
.dark .recharts-label                     { fill: #A0A0A0 !important; }
.dark .recharts-legend-item-text          { color: #A0A0A0 !important; }
.dark .recharts-text                      { fill: #636363 !important; }
.dark .recharts-reference-line line       { stroke: #2A2A2A !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   15. COMPONENT PATCHES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Loading screen */
.dark .min-h-screen.bg-slate-50 { background-color: #0A0A0A !important; }

/* Milestone card archived state */
.dark .border-dashed { border-color: #333333 !important; }

/* Backdrop blur + frosted glass elements */
.dark .backdrop-blur-sm { backdrop-filter: blur(8px); }

/* Avatar borders */
.dark .border-2.border-white { border-color: #222222 !important; }

/* Progress bar track */
.dark .bg-slate-100.rounded-full { background-color: #1C1C1C !important; }
.dark .bg-gray-100.rounded-full  { background-color: #1C1C1C !important; }

/* Modal overlay */
.dark .bg-black\/50    { background-color: rgba(0,0,0,0.82) !important; }
.dark .bg-black\/60    { background-color: rgba(0,0,0,0.88) !important; }

/* ── Navbar: darker than cards for visual hierarchy ── */
.dark nav.bg-white,
.dark nav { background-color: #111111 !important; border-color: #1E1E1E !important; }

/* ── Board column "count" pill (bg-white/80 in column header) ── */
.dark .bg-white\/80.rounded-full { background-color: rgba(30,30,30,0.95) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Base polish
   IBM/Maps-inspired: clean white surfaces, near-black CTAs, minimal color
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Typography refinements */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.011em;
}

/* Light mode scrollbars */
:not(.dark) ::-webkit-scrollbar            { width: 5px; height: 5px; }
:not(.dark) ::-webkit-scrollbar-track      { background: transparent; }
:not(.dark) ::-webkit-scrollbar-thumb      { background: #d1d5db; border-radius: 10px; }
:not(.dark) ::-webkit-scrollbar-thumb:hover{ background: #9ca3af; }

/* Input base: clean appearance */
:not(.dark) input[type="text"],
:not(.dark) input[type="number"],
:not(.dark) input[type="email"],
:not(.dark) input[type="date"],
:not(.dark) input[type="search"],
:not(.dark) textarea,
:not(.dark) select {
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Modal backdrop consistency */
:not(.dark) .backdrop-blur-sm {
  backdrop-filter: blur(6px);
}

/* Button active press feedback */
:not(.dark) button:active {
  transform: scale(0.98);
  transition: transform 0.08s ease;
}

/* Smoother card transitions */
:not(.dark) .rounded-xl,
:not(.dark) .rounded-2xl {
  transition: box-shadow 0.2s ease;
}