/* vOps - Custom Styles */ /* ========================================================================== DARK MODE — GitHub-Dark inspired palette Applied via . Surface hierarchy (darkest -> lightest): base #0d1117 page bg, inset panels surface #161b22 cards, panels, tbody raised #1c2129 thead, card footers, inner panels hover #21262d hover states, active rows border #30363d default borders / dividers Text hierarchy: primary #e6edf3 headings, important text secondary #8b949e body text, descriptions muted #656d76 placeholders, disabled Accent colours are kept vibrant but shifted slightly to remain legible on dark surfaces (WCAG AA contrast). ========================================================================== */ html.dark { color-scheme: dark; } /* ---------- CSS custom properties ---------- */ html.dark { --dark-base: #0d1117; --dark-surface: #161b22; --dark-raised: #1c2129; --dark-hover: #21262d; --dark-border: #30363d; --dark-border-bright: #484f58; --dark-text: #e6edf3; --dark-text-secondary:#8b949e; --dark-text-muted: #656d76; } /* ===================== BACKGROUNDS ===================== */ html.dark .bg-white, html.dark .bg-white\/90 { background-color: var(--dark-surface) !important; } html.dark .bg-gray-50, html.dark .bg-gray-50\/50, html.dark .bg-gray-50\/80 { background-color: var(--dark-raised) !important; } html.dark .bg-gray-100 { background-color: var(--dark-raised) !important; } html.dark .bg-gray-200 { background-color: var(--dark-hover) !important; } html.dark .bg-gray-300 { background-color: #30363d !important; } html.dark .bg-gray-400 { background-color: #484f58 !important; } html.dark .bg-gray-600 { background-color: #8b949e !important; } html.dark .bg-gray-800 { background-color: var(--dark-base) !important; } /* ===================== TEXT ===================== */ html.dark .text-gray-900 { color: var(--dark-text) !important; } html.dark .text-gray-800 { color: #e6edf3 !important; } html.dark .text-gray-700 { color: #c9d1d9 !important; } html.dark .text-gray-600 { color: #b1bac4 !important; } html.dark .text-gray-500 { color: var(--dark-text-secondary) !important; } html.dark .text-gray-400 { color: var(--dark-text-muted) !important; } html.dark .text-slate-800 { color: #c9d1d9 !important; } html.dark .text-slate-600 { color: #b1bac4 !important; } /* ===================== BORDERS ===================== */ html.dark .border-gray-50 { border-color: var(--dark-border) !important; } html.dark .border-gray-100 { border-color: var(--dark-border) !important; } html.dark .border-gray-200 { border-color: var(--dark-border) !important; } html.dark .border-gray-300 { border-color: var(--dark-border-bright) !important; } /* ===================== DIVIDERS ===================== */ html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dark-border) !important; } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dark-border) !important; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dark-border) !important; } html.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dark-border-bright) !important; } /* ===================== RINGS ===================== */ html.dark .ring-white { --tw-ring-color: var(--dark-surface) !important; } html.dark .ring-gray-200 { --tw-ring-color: var(--dark-border) !important; } html.dark .ring-gray-300 { --tw-ring-color: var(--dark-border-bright) !important; } html.dark .ring-gray-900\/5 { --tw-ring-color: rgba(255,255,255,.06) !important; } html.dark .ring-gray-500\/20{ --tw-ring-color: rgba(139,148,158,.2) !important; } html.dark .ring-gray-600\/20{ --tw-ring-color: rgba(139,148,158,.2) !important; } /* ===================== SHADOWS ===================== */ html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.6) !important; } html.dark .shadow { box-shadow: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px -1px rgba(0,0,0,.5) !important; } html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.6), 0 2px 4px -2px rgba(0,0,0,.5) !important; } html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.6), 0 4px 6px -4px rgba(0,0,0,.5) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.6), 0 8px 10px -6px rgba(0,0,0,.5) !important; } /* ===================== FORM CONTROLS ===================== */ html.dark input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]), html.dark select, html.dark textarea { background-color: var(--dark-base) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } html.dark input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):focus, html.dark select:focus, html.dark textarea:focus { box-shadow: 0 0 0 2px rgba(56,139,253,.4) !important; border-color: #388bfd !important; } html.dark input::placeholder, html.dark textarea::placeholder, html.dark .placeholder\:text-gray-400::placeholder { color: var(--dark-text-muted) !important; } /* radio / checkbox */ html.dark input[type="radio"], html.dark input[type="checkbox"] { border-color: var(--dark-border-bright) !important; background-color: var(--dark-base) !important; } /* ===================== HOVER STATES ===================== */ html.dark .hover\:bg-white:hover { background-color: var(--dark-hover) !important; } html.dark .hover\:bg-white\/90:hover { background-color: var(--dark-hover) !important; } html.dark .hover\:bg-white\/20:hover { background-color: rgba(255,255,255,.1) !important; } html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-50\/50:hover { background-color: var(--dark-hover) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--dark-hover) !important; } html.dark .hover\:bg-gray-200:hover { background-color: #30363d !important; } html.dark .hover\:text-gray-600:hover { color: #c9d1d9 !important; } html.dark .hover\:text-gray-700:hover { color: #c9d1d9 !important; } html.dark .hover\:text-gray-800:hover { color: var(--dark-text) !important; } html.dark .hover\:text-gray-900:hover { color: var(--dark-text) !important; } html.dark .hover\:border-gray-300:hover { border-color: var(--dark-border-bright) !important; } html.dark .hover\:border-brand-300:hover { border-color: #3fb950 !important; } html.dark .hover\:border-brand-400:hover { border-color: #3fb950 !important; } html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.5) !important; } /* table row hover */ html.dark .table-row-hover:hover { background-color: var(--dark-hover) !important; } /* ===================== STATUS BACKGROUNDS ===================== */ /* Green family */ html.dark .bg-green-50, html.dark .bg-green-50\/30, html.dark .bg-green-50\/50 { background-color: rgba(63,185,80,.10) !important; } html.dark .bg-green-100, html.dark .bg-green-100\/60 { background-color: rgba(63,185,80,.16) !important; } html.dark .bg-green-200 { background-color: rgba(63,185,80,.22) !important; } html.dark .bg-green-500 { background-color: #238636 !important; } html.dark .bg-green-600 { background-color: #238636 !important; } html.dark .bg-green-700 { background-color: #196c2e !important; } html.dark .bg-emerald-50 { background-color: rgba(63,185,80,.10) !important; } html.dark .bg-emerald-100 { background-color: rgba(63,185,80,.16) !important; } html.dark .bg-emerald-500 { background-color: #238636 !important; } html.dark .bg-emerald-600 { background-color: #238636 !important; } /* Red family */ html.dark .bg-red-50, html.dark .bg-red-50\/40, html.dark .bg-red-50\/50, html.dark .bg-red-50\/70 { background-color: rgba(248,81,73,.10) !important; } html.dark .bg-red-100, html.dark .bg-red-100\/60 { background-color: rgba(248,81,73,.16) !important; } html.dark .bg-red-200 { background-color: rgba(248,81,73,.22) !important; } html.dark .bg-red-500 { background-color: #da3633 !important; } html.dark .bg-red-600 { background-color: #da3633 !important; } html.dark .bg-red-700 { background-color: #b62324 !important; } html.dark .bg-rose-50 { background-color: rgba(248,81,73,.10) !important; } /* Blue family */ html.dark .bg-blue-50 { background-color: rgba(56,139,253,.10) !important; } html.dark .bg-blue-100 { background-color: rgba(56,139,253,.16) !important; } html.dark .bg-blue-200 { background-color: rgba(56,139,253,.22) !important; } html.dark .bg-blue-500 { background-color: #1f6feb !important; } html.dark .bg-blue-600 { background-color: #1f6feb !important; } html.dark .bg-blue-900 { background-color: rgba(56,139,253,.15) !important; } /* Indigo family */ html.dark .bg-indigo-50 { background-color: rgba(121,105,247,.10) !important; } html.dark .bg-indigo-100 { background-color: rgba(121,105,247,.16) !important; } html.dark .bg-indigo-200 { background-color: rgba(121,105,247,.22) !important; } html.dark .bg-indigo-500 { background-color: #6e40c9 !important; } html.dark .bg-indigo-600 { background-color: #6e40c9 !important; } html.dark .bg-indigo-800 { background-color: rgba(121,105,247,.22) !important; } html.dark .bg-indigo-900 { background-color: rgba(121,105,247,.12) !important; } html.dark .bg-indigo-950 { background-color: rgba(121,105,247,.10) !important; } /* Purple family */ html.dark .bg-purple-50 { background-color: rgba(163,113,247,.10) !important; } html.dark .bg-purple-100 { background-color: rgba(163,113,247,.16) !important; } /* Violet family */ html.dark .bg-violet-50 { background-color: rgba(163,113,247,.10) !important; } html.dark .bg-violet-100 { background-color: rgba(163,113,247,.16) !important; } html.dark .bg-violet-200 { background-color: rgba(163,113,247,.22) !important; } html.dark .bg-violet-500 { background-color: #8957e5 !important; } html.dark .bg-violet-600 { background-color: #8957e5 !important; } /* Amber / Yellow / Orange family */ html.dark .bg-amber-50, html.dark .bg-amber-50\/30 { background-color: rgba(210,153,34,.10) !important; } html.dark .bg-amber-100, html.dark .bg-amber-100\/60 { background-color: rgba(210,153,34,.16) !important; } html.dark .bg-amber-200 { background-color: rgba(210,153,34,.22) !important; } html.dark .bg-amber-400 { background-color: #d29922 !important; } html.dark .bg-amber-500 { background-color: #bb8009 !important; } html.dark .bg-amber-600 { background-color: #9e6a03 !important; } html.dark .bg-yellow-50 { background-color: rgba(210,153,34,.10) !important; } html.dark .bg-yellow-100 { background-color: rgba(210,153,34,.16) !important; } html.dark .bg-yellow-500 { background-color: #d29922 !important; } html.dark .bg-orange-50 { background-color: rgba(219,109,40,.10) !important; } html.dark .bg-orange-100 { background-color: rgba(219,109,40,.16) !important; } html.dark .bg-orange-500 { background-color: #db6d28 !important; } /* Teal / Cyan / Sky family */ html.dark .bg-teal-50 { background-color: rgba(31,183,161,.10) !important; } html.dark .bg-teal-100 { background-color: rgba(31,183,161,.16) !important; } html.dark .bg-cyan-50 { background-color: rgba(31,183,161,.10) !important; } html.dark .bg-sky-50 { background-color: rgba(56,139,253,.10) !important; } html.dark .bg-sky-100 { background-color: rgba(56,139,253,.16) !important; } html.dark .bg-sky-500 { background-color: #1f6feb !important; } html.dark .bg-sky-600 { background-color: #1f6feb !important; } /* Slate family */ html.dark .bg-slate-50 { background-color: var(--dark-raised) !important; } html.dark .bg-slate-100 { background-color: var(--dark-hover) !important; } html.dark .bg-slate-700 { background-color: #21262d !important; } /* Brand family */ html.dark .bg-brand-50, html.dark .bg-brand-50\/30, html.dark .bg-brand-50\/50 { background-color: rgba(63,185,80,.10) !important; } html.dark .bg-brand-100 { background-color: rgba(63,185,80,.16) !important; } /* ===================== STATUS TEXT ===================== */ /* Green */ html.dark .text-green-300 { color: #7ee787 !important; } html.dark .text-green-400 { color: #56d364 !important; } html.dark .text-green-500 { color: #3fb950 !important; } html.dark .text-green-600 { color: #3fb950 !important; } html.dark .text-green-700 { color: #3fb950 !important; } html.dark .text-green-800 { color: #56d364 !important; } html.dark .text-green-900 { color: #7ee787 !important; } html.dark .text-emerald-600 { color: #3fb950 !important; } html.dark .text-emerald-700 { color: #3fb950 !important; } html.dark .text-emerald-800 { color: #56d364 !important; } /* Red */ html.dark .text-red-300 { color: #ffa198 !important; } html.dark .text-red-400 { color: #ff7b72 !important; } html.dark .text-red-500 { color: #f85149 !important; } html.dark .text-red-600 { color: #f85149 !important; } html.dark .text-red-700 { color: #f85149 !important; } html.dark .text-red-800 { color: #ff7b72 !important; } html.dark .text-red-900 { color: #ffa198 !important; } html.dark .text-rose-600 { color: #f85149 !important; } /* Blue */ html.dark .text-blue-400 { color: #79c0ff !important; } html.dark .text-blue-500 { color: #58a6ff !important; } html.dark .text-blue-600 { color: #58a6ff !important; } html.dark .text-blue-700 { color: #58a6ff !important; } html.dark .text-blue-800 { color: #79c0ff !important; } html.dark .text-blue-900 { color: #79c0ff !important; } /* Indigo */ html.dark .text-indigo-200 { color: #d2a8ff !important; } html.dark .text-indigo-300 { color: #d2a8ff !important; } html.dark .text-indigo-400 { color: #bc8cff !important; } html.dark .text-indigo-500 { color: #a371f7 !important; } html.dark .text-indigo-600 { color: #a371f7 !important; } html.dark .text-indigo-700 { color: #a371f7 !important; } html.dark .text-indigo-800 { color: #bc8cff !important; } html.dark .text-indigo-900 { color: #d2a8ff !important; } /* Purple / Violet */ html.dark .text-purple-600 { color: #a371f7 !important; } html.dark .text-purple-700 { color: #a371f7 !important; } html.dark .text-purple-800 { color: #bc8cff !important; } html.dark .text-purple-900 { color: #d2a8ff !important; } html.dark .text-violet-600 { color: #a371f7 !important; } /* Amber / Yellow / Orange */ html.dark .text-amber-500 { color: #d29922 !important; } html.dark .text-amber-600 { color: #d29922 !important; } html.dark .text-amber-700 { color: #d29922 !important; } html.dark .text-amber-800 { color: #e3b341 !important; } html.dark .text-amber-900 { color: #e3b341 !important; } html.dark .text-yellow-400 { color: #e3b341 !important; } html.dark .text-yellow-500 { color: #d29922 !important; } html.dark .text-yellow-600 { color: #d29922 !important; } html.dark .text-yellow-700 { color: #d29922 !important; } html.dark .text-yellow-800 { color: #e3b341 !important; } html.dark .text-yellow-900 { color: #e3b341 !important; } html.dark .text-orange-400 { color: #db6d28 !important; } html.dark .text-orange-600 { color: #db6d28 !important; } html.dark .text-orange-700 { color: #db6d28 !important; } html.dark .text-orange-800 { color: #e3843f !important; } /* Teal / Cyan / Sky */ html.dark .text-teal-600 { color: #1fb8a1 !important; } html.dark .text-cyan-600 { color: #39c5cf !important; } html.dark .text-cyan-700 { color: #39c5cf !important; } html.dark .text-cyan-900 { color: #56d4dd !important; } html.dark .text-sky-600 { color: #58a6ff !important; } html.dark .text-sky-700 { color: #58a6ff !important; } html.dark .text-sky-800 { color: #79c0ff !important; } /* Brand text */ html.dark .text-brand-500 { color: #3fb950 !important; } html.dark .text-brand-600 { color: #3fb950 !important; } html.dark .text-brand-700 { color: #3fb950 !important; } html.dark .text-brand-800 { color: #56d364 !important; } html.dark .text-brand-900 { color: #7ee787 !important; } /* ===================== STATUS BORDERS ===================== */ html.dark .border-brand-200 { border-color: rgba(63,185,80,.3) !important; } html.dark .border-brand-300 { border-color: rgba(63,185,80,.4) !important; } html.dark .border-brand-400 { border-color: #3fb950 !important; } html.dark .border-brand-500 { border-color: #3fb950 !important; } html.dark .border-blue-100 { border-color: rgba(56,139,253,.2) !important; } html.dark .border-blue-200 { border-color: rgba(56,139,253,.3) !important; } html.dark .border-blue-500 { border-color: #388bfd !important; } html.dark .border-green-200 { border-color: rgba(63,185,80,.3) !important; } html.dark .border-green-300 { border-color: rgba(63,185,80,.4) !important; } html.dark .border-red-100 { border-color: rgba(248,81,73,.2) !important; } html.dark .border-red-200 { border-color: rgba(248,81,73,.3) !important; } html.dark .border-red-300 { border-color: rgba(248,81,73,.4) !important; } html.dark .border-red-500 { border-color: #f85149 !important; } html.dark .border-orange-200 { border-color: rgba(219,109,40,.3) !important; } html.dark .border-orange-300 { border-color: rgba(219,109,40,.4) !important; } html.dark .border-orange-500 { border-color: #db6d28 !important; } html.dark .border-amber-200 { border-color: rgba(210,153,34,.3) !important; } html.dark .border-amber-300 { border-color: rgba(210,153,34,.4) !important; } html.dark .border-yellow-200 { border-color: rgba(210,153,34,.3) !important; } html.dark .border-yellow-300 { border-color: rgba(210,153,34,.4) !important; } html.dark .border-yellow-500 { border-color: #d29922 !important; } html.dark .border-purple-500 { border-color: #8957e5 !important; } html.dark .border-indigo-500 { border-color: #8957e5 !important; } /* ===================== HOVER BG (accent) ===================== */ html.dark .hover\:bg-brand-50:hover, html.dark .hover\:bg-brand-50\/30:hover, html.dark .hover\:bg-brand-50\/50:hover { background-color: rgba(63,185,80,.12) !important; } html.dark .hover\:bg-brand-100:hover { background-color: rgba(63,185,80,.18) !important; } html.dark .hover\:bg-blue-100:hover { background-color: rgba(56,139,253,.18) !important; } html.dark .hover\:bg-blue-200:hover { background-color: rgba(56,139,253,.25) !important; } html.dark .hover\:bg-indigo-100:hover { background-color: rgba(121,105,247,.18) !important; } html.dark .hover\:bg-indigo-200:hover { background-color: rgba(121,105,247,.25) !important; } html.dark .hover\:bg-green-100:hover { background-color: rgba(63,185,80,.18) !important; } html.dark .hover\:bg-red-50:hover { background-color: rgba(248,81,73,.12) !important; } html.dark .hover\:bg-red-100:hover, html.dark .hover\:bg-red-100\/60:hover { background-color: rgba(248,81,73,.18) !important; } html.dark .hover\:bg-red-200:hover { background-color: rgba(248,81,73,.25) !important; } html.dark .hover\:bg-orange-100:hover { background-color: rgba(219,109,40,.18) !important; } html.dark .hover\:bg-amber-100:hover, html.dark .hover\:bg-amber-100\/60:hover { background-color: rgba(210,153,34,.18) !important; } html.dark .hover\:bg-amber-200:hover { background-color: rgba(210,153,34,.25) !important; } html.dark .hover\:bg-yellow-100:hover { background-color: rgba(210,153,34,.18) !important; } html.dark .hover\:bg-purple-100:hover { background-color: rgba(163,113,247,.18) !important; } html.dark .hover\:bg-violet-200:hover { background-color: rgba(163,113,247,.25) !important; } html.dark .hover\:bg-slate-100:hover { background-color: var(--dark-hover) !important; } html.dark .hover\:bg-teal-100:hover { background-color: rgba(31,183,161,.18) !important; } html.dark .hover\:text-brand-500:hover { color: #56d364 !important; } html.dark .hover\:text-brand-600:hover { color: #56d364 !important; } html.dark .hover\:text-brand-700:hover { color: #3fb950 !important; } html.dark .hover\:text-brand-800:hover { color: #3fb950 !important; } html.dark .hover\:text-green-600:hover { color: #56d364 !important; } html.dark .hover\:text-green-700:hover { color: #3fb950 !important; } html.dark .hover\:text-red-500:hover { color: #ff7b72 !important; } html.dark .hover\:text-red-600:hover { color: #f85149 !important; } html.dark .hover\:text-red-700:hover { color: #f85149 !important; } html.dark .hover\:text-red-800:hover { color: #ff7b72 !important; } html.dark .hover\:text-blue-900:hover { color: #79c0ff !important; } html.dark .hover\:text-indigo-900:hover { color: #d2a8ff !important; } html.dark .hover\:text-orange-600:hover { color: #e3843f !important; } html.dark .hover\:text-yellow-600:hover { color: #e3b341 !important; } html.dark .hover\:text-yellow-900:hover { color: #e3b341 !important; } html.dark .hover\:border-red-300:hover { border-color: rgba(248,81,73,.5) !important; } /* ===================== RING / FOCUS ACCENT ===================== */ html.dark .ring-brand-100 { --tw-ring-color: rgba(63,185,80,.15) !important; } html.dark .ring-brand-200 { --tw-ring-color: rgba(63,185,80,.25) !important; } html.dark .ring-brand-300 { --tw-ring-color: rgba(63,185,80,.35) !important; } html.dark .ring-brand-500 { --tw-ring-color: #3fb950 !important; } html.dark .ring-brand-500\/20{ --tw-ring-color: rgba(63,185,80,.2) !important; } html.dark .ring-brand-600 { --tw-ring-color: #3fb950 !important; } html.dark .ring-blue-200 { --tw-ring-color: rgba(56,139,253,.3) !important; } html.dark .ring-blue-500 { --tw-ring-color: #388bfd !important; } html.dark .ring-blue-600\/20 { --tw-ring-color: rgba(56,139,253,.2) !important; } html.dark .ring-blue-700\/10 { --tw-ring-color: rgba(56,139,253,.1) !important; } html.dark .ring-green-300 { --tw-ring-color: rgba(63,185,80,.35) !important; } html.dark .ring-green-600\/20{ --tw-ring-color: rgba(63,185,80,.2) !important; } html.dark .ring-red-200 { --tw-ring-color: rgba(248,81,73,.3) !important; } html.dark .ring-red-300 { --tw-ring-color: rgba(248,81,73,.4) !important; } html.dark .ring-red-500 { --tw-ring-color: #f85149 !important; } html.dark .ring-red-600 { --tw-ring-color: #f85149 !important; } html.dark .ring-red-600\/10 { --tw-ring-color: rgba(248,81,73,.1) !important; } html.dark .ring-red-600\/20 { --tw-ring-color: rgba(248,81,73,.2) !important; } html.dark .ring-purple-200 { --tw-ring-color: rgba(163,113,247,.3) !important; } html.dark .ring-purple-500 { --tw-ring-color: #8957e5 !important; } html.dark .ring-purple-600\/20{ --tw-ring-color: rgba(163,113,247,.2) !important; } html.dark .ring-indigo-500 { --tw-ring-color: #8957e5 !important; } html.dark .ring-orange-500 { --tw-ring-color: #db6d28 !important; } html.dark .ring-orange-600 { --tw-ring-color: #db6d28 !important; } html.dark .ring-orange-700\/10{ --tw-ring-color: rgba(219,109,40,.1) !important; } html.dark .ring-amber-300 { --tw-ring-color: rgba(210,153,34,.4) !important; } html.dark .ring-amber-600\/20{ --tw-ring-color: rgba(210,153,34,.2) !important; } html.dark .ring-yellow-300 { --tw-ring-color: rgba(210,153,34,.4) !important; } html.dark .ring-yellow-500 { --tw-ring-color: #d29922 !important; } html.dark .ring-yellow-600\/20{ --tw-ring-color: rgba(210,153,34,.2) !important; } /* ===================== FOCUS BORDER / RING ===================== */ html.dark .focus\:ring-brand-300:focus { --tw-ring-color: rgba(63,185,80,.4) !important; } html.dark .focus\:ring-brand-500:focus { --tw-ring-color: rgba(63,185,80,.5) !important; } html.dark .focus\:ring-brand-600:focus { --tw-ring-color: rgba(63,185,80,.5) !important; } html.dark .focus\:ring-blue-500:focus { --tw-ring-color: rgba(56,139,253,.5) !important; } html.dark .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(121,105,247,.5) !important; } html.dark .focus\:ring-red-500:focus { --tw-ring-color: rgba(248,81,73,.5) !important; } html.dark .focus\:ring-red-600:focus { --tw-ring-color: rgba(248,81,73,.5) !important; } html.dark .focus\:ring-orange-500:focus { --tw-ring-color: rgba(219,109,40,.5) !important; } html.dark .focus\:ring-orange-600:focus { --tw-ring-color: rgba(219,109,40,.5) !important; } html.dark .focus\:ring-purple-500:focus { --tw-ring-color: rgba(163,113,247,.5) !important; } html.dark .focus\:ring-yellow-500:focus { --tw-ring-color: rgba(210,153,34,.5) !important; } html.dark .focus\:border-brand-500:focus { border-color: #3fb950 !important; } html.dark .focus\:border-blue-500:focus { border-color: #388bfd !important; } html.dark .focus\:border-indigo-500:focus{ border-color: #8957e5 !important; } html.dark .focus\:border-red-500:focus { border-color: #f85149 !important; } html.dark .focus\:border-orange-500:focus{ border-color: #db6d28 !important; } html.dark .focus\:border-purple-500:focus{ border-color: #8957e5 !important; } html.dark .focus\:border-yellow-500:focus{ border-color: #d29922 !important; } /* ===================== OUTLINE ===================== */ html.dark .outline-brand-600 { outline-color: #3fb950 !important; } html.dark .outline-indigo-600 { outline-color: #8957e5 !important; } html.dark .outline-red-600 { outline-color: #f85149 !important; } /* ===================== GRADIENTS ===================== */ html.dark .from-blue-500 { --tw-gradient-from: #388bfd !important; } html.dark .to-amber-500 { --tw-gradient-to: #d29922 !important; } html.dark .from-green-50 { --tw-gradient-from: rgba(63,185,80,.10) !important; } html.dark .to-green-100 { --tw-gradient-to: rgba(63,185,80,.16) !important; } html.dark .from-red-50 { --tw-gradient-from: rgba(248,81,73,.10) !important; } html.dark .to-red-100 { --tw-gradient-to: rgba(248,81,73,.16) !important; } html.dark .via-red-500 { --tw-gradient-via: #f85149 !important; } /* ===================== OVERLAYS ===================== */ html.dark .bg-gray-900\/60 { background-color: rgba(0,0,0,.7) !important; } html.dark .bg-gray-900\/80 { background-color: rgba(0,0,0,.8) !important; } html.dark .bg-gray-500\/75 { background-color: rgba(0,0,0,.7) !important; } /* ===================== COMPONENT OVERRIDES ===================== */ /* Spinner */ html.dark .spinner { border-color: var(--dark-border); border-top-color: #388bfd; } /* Toast */ html.dark .toast { background-color: var(--dark-surface); color: var(--dark-text); box-shadow: 0 10px 15px -3px rgba(0,0,0,.5); } /* Leaflet maps */ html.dark .leaflet-container { background-color: var(--dark-surface); } html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background-color: var(--dark-surface); color: var(--dark-text); } /* Scrollbar styling for dark mode */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: var(--dark-base); } html.dark ::-webkit-scrollbar-thumb { background: var(--dark-border); border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--dark-border-bright); } /* ===================== PRINT — ALWAYS LIGHT ===================== */ @media print { html.dark .bg-white { background-color: white !important; } html.dark .text-gray-900 { color: #111827 !important; } html.dark .border-gray-200 { border-color: #e5e7eb !important; } } /* ========================================================================== GENERAL UTILITIES (light + dark) ========================================================================== */ /* Smooth transitions for sidebar */ .sidebar-link { transition: all 0.15s ease-in-out; } /* Print styles for invoices */ @media print { .no-print { display: none !important; } .print-only { display: block !important; } body { background: white; } } /* Calendar cell minimum height */ .calendar-cell { min-height: 100px; } /* Event pills in calendar */ .event-pill { font-size: 0.7rem; line-height: 1.2; padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } /* Map container styles */ .map-container { height: 400px; width: 100%; border-radius: 0.5rem; z-index: 0; } /* Hide Leaflet attribution watermark */ .leaflet-control-attribution { display: none !important; } /* Form input focus rings */ input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); } /* Table row hover */ .table-row-hover:hover { background-color: #f9fafb; } /* Status pulse animation for active items */ @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; } /* Loading spinner */ .spinner { border: 3px solid #e5e7eb; border-top: 3px solid #3b82f6; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Badge styles */ .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } /* Toast notifications */ .toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; padding: 0.75rem 1rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transform: translateY(100px); opacity: 0; transition: all 0.3s ease; } .toast.show { transform: translateY(0); opacity: 1; }