/* ========================================================= SeaDesk — Tema escuro Ativado pela classe .dark no (ver assets/js/seadesk-theme.js). Remapeia as classes utilitárias do Tailwind usadas no sistema, sem precisar editar cada tela. ========================================================= */ html.dark { color-scheme: dark; } html.dark body { background-color: #0a1022; color: #cdd5ea; } html.dark .bg-slate-100.min-h-screen, html.dark body.bg-slate-100, html.dark body.bg-slate-50 { background-color: #0a1022 !important; } html.dark .bg-white { background-color: #111a33 !important; } html.dark .bg-white\/70 { background-color: rgba(17,26,51,.7) !important; } html.dark .bg-white\/90 { background-color: rgba(17,26,51,.9) !important; } html.dark .bg-slate-50 { background-color: #16213f !important; } html.dark .bg-slate-50\/30 { background-color: rgba(22,33,63,.3) !important; } html.dark .bg-slate-50\/40 { background-color: rgba(22,33,63,.4) !important; } html.dark .bg-slate-50\/50 { background-color: rgba(22,33,63,.5) !important; } html.dark .bg-slate-50\/60 { background-color: rgba(22,33,63,.6) !important; } html.dark .bg-slate-50\/70 { background-color: rgba(22,33,63,.7) !important; } html.dark .bg-slate-100 { background-color: #1b2749 !important; } html.dark .bg-slate-200 { background-color: #22305a !important; } html.dark .bg-slate-300 { background-color: #2c3b69 !important; } html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-white:hover { background-color: #16213f !important; } html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-white\/70:hover, html.dark .hover\:bg-white\/90:hover { background-color: #1b2749 !important; } html.dark .hover\:bg-slate-200:hover, html.dark .hover\:bg-slate-300:hover { background-color: #22305a !important; } html.dark .disabled\:bg-slate-100:disabled { background-color: #1b2749 !important; } html.dark .border-slate-100, html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1b2749 !important; } html.dark .border-slate-200, html.dark .ring-slate-200 { border-color: #243259 !important; --tw-ring-color: #243259 !important; } html.dark .border-slate-300 { border-color: #2e3d6b !important; } html.dark .border-slate-800 { border-color: #2e3d6b !important; } html.dark .text-slate-900 { color: #f1f4fb !important; } html.dark .text-slate-800 { color: #e7ecf8 !important; } html.dark .text-slate-700 { color: #cdd5ea !important; } html.dark .text-slate-600 { color: #aeb8d3 !important; } html.dark .text-slate-500 { color: #8d98b8 !important; } html.dark .text-slate-400 { color: #6f7ba0 !important; } html.dark .text-slate-300 { color: #4f5b82 !important; } html.dark .text-slate-100 { color: #e7ecf8 !important; } html.dark .hover\:text-slate-600:hover, html.dark .hover\:text-slate-700:hover, html.dark .hover\:text-slate-900:hover { color: #e7ecf8 !important; } html.dark .disabled\:text-slate-500:disabled { color: #6f7ba0 !important; } html.dark .text-primary, html.dark .text-primary-700, html.dark .text-primary-800, html.dark .text-primary-900 { color: #9fb2f0 !important; } html.dark .hover\:text-primary:hover, html.dark .hover\:text-primary-700:hover, html.dark .hover\:text-primary-800:hover, html.dark .group:hover .group-hover\:text-primary { color: #c3cff7 !important; } html.dark .bg-primary-50, html.dark .bg-primary\/5, html.dark .bg-primary-50\/30, html.dark .bg-primary-50\/40, html.dark .bg-primary-50\/50 { background-color: rgba(84,114,222,.12) !important; } html.dark .bg-primary-100, html.dark .bg-primary\/10, html.dark .bg-primary\/20 { background-color: rgba(84,114,222,.2) !important; } html.dark .hover\:bg-primary-50:hover { background-color: rgba(84,114,222,.16) !important; } html.dark .border-primary-100, html.dark .border-primary-200, html.dark .border-primary\/10, html.dark .border-primary\/15, html.dark .border-primary\/30, html.dark .ring-primary-100, html.dark .ring-primary-200, html.dark .ring-primary\/10 { border-color: rgba(84,114,222,.35) !important; --tw-ring-color: rgba(84,114,222,.35) !important; } html.dark .border-primary, html.dark .focus\:border-primary:focus, html.dark .hover\:border-primary:hover { border-color: #5472de !important; } html.dark .text-primary-200\/70 { color: rgba(191,202,243,.7) !important; } html.dark .bg-primary { background-image: linear-gradient(135deg, #3a61e6 0%, #1a2f82 100%) !important; } html.dark .hover\:bg-primary:hover, html.dark .hover\:bg-primary-800:hover { background-image: linear-gradient(135deg, #4a70f0 0%, #22398f 100%) !important; } html.dark .bg-primary[class*="shadow"] { box-shadow: 0 10px 26px -8px rgba(58,97,230,.55), 0 3px 8px -2px rgba(0,0,0,.4) !important; } html.dark .bg-primary[class*="shadow"]:hover { box-shadow: 0 14px 32px -8px rgba(74,112,240,.65), 0 4px 10px -2px rgba(0,0,0,.45) !important; } html.dark .from-primary-50 { --tw-gradient-from: #16213f var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(22,33,63,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.dark .to-white, html.dark .to-sky-50 { --tw-gradient-to: #111a33 var(--tw-gradient-to-position) !important; } html.dark .bg-red-50, html.dark .bg-red-50\/30, html.dark .bg-red-50\/60, html.dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68,.12) !important; } html.dark .bg-red-100, html.dark input:checked ~ .peer-checked\:bg-red-100, html.dark .peer:checked ~ .peer-checked\:bg-red-100 { background-color: rgba(239,68,68,.2) !important; } html.dark .bg-red-200 { background-color: rgba(239,68,68,.3) !important; } html.dark .border-red-100, html.dark .border-red-200, html.dark .border-red-300, html.dark .ring-red-100, html.dark .ring-red-200, html.dark .ring-red-300, html.dark .peer:checked ~ .peer-checked\:border-red-300 { border-color: rgba(239,68,68,.35) !important; --tw-ring-color: rgba(239,68,68,.35) !important; } html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900, html.dark .peer:checked ~ .peer-checked\:text-red-700, html.dark .hover\:text-red-700:hover { color: #fca5a5 !important; } html.dark .text-red-600, html.dark .hover\:text-red-600:hover { color: #f87171 !important; } html.dark .bg-amber-50, html.dark .bg-amber-50\/30, html.dark .bg-amber-50\/60, html.dark .hover\:bg-amber-50:hover { background-color: rgba(245,158,11,.12) !important; } html.dark .bg-amber-100, html.dark input:checked ~ .peer-checked\:bg-amber-100, html.dark .peer:checked ~ .peer-checked\:bg-amber-100 { background-color: rgba(245,158,11,.2) !important; } html.dark .bg-amber-200 { background-color: rgba(245,158,11,.3) !important; } html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-300, html.dark .ring-amber-100, html.dark .ring-amber-200, html.dark .ring-amber-300, html.dark .peer:checked ~ .peer-checked\:border-amber-300 { border-color: rgba(245,158,11,.35) !important; --tw-ring-color: rgba(245,158,11,.35) !important; } html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900, html.dark .peer:checked ~ .peer-checked\:text-amber-700, html.dark .hover\:text-amber-700:hover { color: #fcd34d !important; } html.dark .text-amber-600, html.dark .hover\:text-amber-600:hover { color: #fbbf24 !important; } html.dark .bg-orange-50, html.dark .bg-orange-50\/30, html.dark .bg-orange-50\/60, html.dark .hover\:bg-orange-50:hover { background-color: rgba(249,115,22,.12) !important; } html.dark .bg-orange-100, html.dark input:checked ~ .peer-checked\:bg-orange-100, html.dark .peer:checked ~ .peer-checked\:bg-orange-100 { background-color: rgba(249,115,22,.2) !important; } html.dark .bg-orange-200 { background-color: rgba(249,115,22,.3) !important; } html.dark .border-orange-100, html.dark .border-orange-200, html.dark .border-orange-300, html.dark .ring-orange-100, html.dark .ring-orange-200, html.dark .ring-orange-300, html.dark .peer:checked ~ .peer-checked\:border-orange-300 { border-color: rgba(249,115,22,.35) !important; --tw-ring-color: rgba(249,115,22,.35) !important; } html.dark .text-orange-700, html.dark .text-orange-800, html.dark .text-orange-900, html.dark .peer:checked ~ .peer-checked\:text-orange-700, html.dark .hover\:text-orange-700:hover { color: #fdba74 !important; } html.dark .text-orange-600, html.dark .hover\:text-orange-600:hover { color: #fb923c !important; } html.dark .bg-emerald-50, html.dark .bg-emerald-50\/30, html.dark .bg-emerald-50\/60, html.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,.12) !important; } html.dark .bg-emerald-100, html.dark input:checked ~ .peer-checked\:bg-emerald-100, html.dark .peer:checked ~ .peer-checked\:bg-emerald-100 { background-color: rgba(16,185,129,.2) !important; } html.dark .bg-emerald-200 { background-color: rgba(16,185,129,.3) !important; } html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-emerald-300, html.dark .ring-emerald-100, html.dark .ring-emerald-200, html.dark .ring-emerald-300, html.dark .peer:checked ~ .peer-checked\:border-emerald-300 { border-color: rgba(16,185,129,.35) !important; --tw-ring-color: rgba(16,185,129,.35) !important; } html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900, html.dark .peer:checked ~ .peer-checked\:text-emerald-700, html.dark .hover\:text-emerald-700:hover { color: #6ee7b7 !important; } html.dark .text-emerald-600, html.dark .hover\:text-emerald-600:hover { color: #34d399 !important; } html.dark .bg-yellow-50, html.dark .bg-yellow-50\/30, html.dark .bg-yellow-50\/60, html.dark .hover\:bg-yellow-50:hover { background-color: rgba(234,179,8,.12) !important; } html.dark .bg-yellow-100, html.dark input:checked ~ .peer-checked\:bg-yellow-100, html.dark .peer:checked ~ .peer-checked\:bg-yellow-100 { background-color: rgba(234,179,8,.2) !important; } html.dark .bg-yellow-200 { background-color: rgba(234,179,8,.3) !important; } html.dark .border-yellow-100, html.dark .border-yellow-200, html.dark .border-yellow-300, html.dark .ring-yellow-100, html.dark .ring-yellow-200, html.dark .ring-yellow-300, html.dark .peer:checked ~ .peer-checked\:border-yellow-300 { border-color: rgba(234,179,8,.35) !important; --tw-ring-color: rgba(234,179,8,.35) !important; } html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900, html.dark .peer:checked ~ .peer-checked\:text-yellow-700, html.dark .hover\:text-yellow-700:hover { color: #fde047 !important; } html.dark .text-yellow-600, html.dark .hover\:text-yellow-600:hover { color: #facc15 !important; } html.dark .bg-purple-50, html.dark .bg-purple-50\/30, html.dark .bg-purple-50\/60, html.dark .hover\:bg-purple-50:hover { background-color: rgba(168,85,247,.12) !important; } html.dark .bg-purple-100, html.dark input:checked ~ .peer-checked\:bg-purple-100, html.dark .peer:checked ~ .peer-checked\:bg-purple-100 { background-color: rgba(168,85,247,.2) !important; } html.dark .bg-purple-200 { background-color: rgba(168,85,247,.3) !important; } html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-purple-300, html.dark .ring-purple-100, html.dark .ring-purple-200, html.dark .ring-purple-300, html.dark .peer:checked ~ .peer-checked\:border-purple-300 { border-color: rgba(168,85,247,.35) !important; --tw-ring-color: rgba(168,85,247,.35) !important; } html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900, html.dark .peer:checked ~ .peer-checked\:text-purple-700, html.dark .hover\:text-purple-700:hover { color: #d8b4fe !important; } html.dark .text-purple-600, html.dark .hover\:text-purple-600:hover { color: #c084fc !important; } html.dark .bg-violet-50, html.dark .bg-violet-50\/30, html.dark .bg-violet-50\/60, html.dark .hover\:bg-violet-50:hover { background-color: rgba(139,92,246,.12) !important; } html.dark .bg-violet-100, html.dark input:checked ~ .peer-checked\:bg-violet-100, html.dark .peer:checked ~ .peer-checked\:bg-violet-100 { background-color: rgba(139,92,246,.2) !important; } html.dark .bg-violet-200 { background-color: rgba(139,92,246,.3) !important; } html.dark .border-violet-100, html.dark .border-violet-200, html.dark .border-violet-300, html.dark .ring-violet-100, html.dark .ring-violet-200, html.dark .ring-violet-300, html.dark .peer:checked ~ .peer-checked\:border-violet-300 { border-color: rgba(139,92,246,.35) !important; --tw-ring-color: rgba(139,92,246,.35) !important; } html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900, html.dark .peer:checked ~ .peer-checked\:text-violet-700, html.dark .hover\:text-violet-700:hover { color: #c4b5fd !important; } html.dark .text-violet-600, html.dark .hover\:text-violet-600:hover { color: #a78bfa !important; } html.dark .bg-indigo-50, html.dark .bg-indigo-50\/30, html.dark .bg-indigo-50\/60, html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.12) !important; } html.dark .bg-indigo-100, html.dark input:checked ~ .peer-checked\:bg-indigo-100, html.dark .peer:checked ~ .peer-checked\:bg-indigo-100 { background-color: rgba(99,102,241,.2) !important; } html.dark .bg-indigo-200 { background-color: rgba(99,102,241,.3) !important; } html.dark .border-indigo-100, html.dark .border-indigo-200, html.dark .border-indigo-300, html.dark .ring-indigo-100, html.dark .ring-indigo-200, html.dark .ring-indigo-300, html.dark .peer:checked ~ .peer-checked\:border-indigo-300 { border-color: rgba(99,102,241,.35) !important; --tw-ring-color: rgba(99,102,241,.35) !important; } html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900, html.dark .peer:checked ~ .peer-checked\:text-indigo-700, html.dark .hover\:text-indigo-700:hover { color: #a5b4fc !important; } html.dark .text-indigo-600, html.dark .hover\:text-indigo-600:hover { color: #818cf8 !important; } html.dark .bg-blue-50, html.dark .bg-blue-50\/30, html.dark .bg-blue-50\/60, html.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,.12) !important; } html.dark .bg-blue-100, html.dark input:checked ~ .peer-checked\:bg-blue-100, html.dark .peer:checked ~ .peer-checked\:bg-blue-100 { background-color: rgba(59,130,246,.2) !important; } html.dark .bg-blue-200 { background-color: rgba(59,130,246,.3) !important; } html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-blue-300, html.dark .ring-blue-100, html.dark .ring-blue-200, html.dark .ring-blue-300, html.dark .peer:checked ~ .peer-checked\:border-blue-300 { border-color: rgba(59,130,246,.35) !important; --tw-ring-color: rgba(59,130,246,.35) !important; } html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900, html.dark .peer:checked ~ .peer-checked\:text-blue-700, html.dark .hover\:text-blue-700:hover { color: #93c5fd !important; } html.dark .text-blue-600, html.dark .hover\:text-blue-600:hover { color: #60a5fa !important; } html.dark .bg-sky-50, html.dark .bg-sky-50\/30, html.dark .bg-sky-50\/60, html.dark .hover\:bg-sky-50:hover { background-color: rgba(14,165,233,.12) !important; } html.dark .bg-sky-100, html.dark input:checked ~ .peer-checked\:bg-sky-100, html.dark .peer:checked ~ .peer-checked\:bg-sky-100 { background-color: rgba(14,165,233,.2) !important; } html.dark .bg-sky-200 { background-color: rgba(14,165,233,.3) !important; } html.dark .border-sky-100, html.dark .border-sky-200, html.dark .border-sky-300, html.dark .ring-sky-100, html.dark .ring-sky-200, html.dark .ring-sky-300, html.dark .peer:checked ~ .peer-checked\:border-sky-300 { border-color: rgba(14,165,233,.35) !important; --tw-ring-color: rgba(14,165,233,.35) !important; } html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900, html.dark .peer:checked ~ .peer-checked\:text-sky-700, html.dark .hover\:text-sky-700:hover { color: #7dd3fc !important; } html.dark .text-sky-600, html.dark .hover\:text-sky-600:hover { color: #38bdf8 !important; } html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.dark select, html.dark textarea { background-color: #0e1630; color: #e7ecf8; } html.dark input::placeholder, html.dark textarea::placeholder { color: #5d6990 !important; } html.dark input[type=checkbox], html.dark input[type=radio] { background-color: #0e1630; border-color: #2e3d6b; } html.dark option { background-color: #111a33; color: #e7ecf8; } html.dark .scroll-thin::-webkit-scrollbar-thumb { background: #2c3b69; } html.dark .bg-white.rounded-xl.border:hover, html.dark .bg-white.rounded-2xl.border:hover { border-color: #34498f !important; box-shadow: 0 16px 34px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(84,114,222,.15) !important; } html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md:not(.bg-primary), html.dark .shadow-lg:not(.bg-primary), html.dark .shadow-xl:not(.bg-primary) { --tw-shadow-color: rgba(0,0,0,.55); } html.dark .bg-slate-900\/60, html.dark .bg-slate-900\/50 { background-color: rgba(3,6,18,.7) !important; } html.dark .peer ~ .bg-white.rounded-full { background-color: #e7ecf8 !important; } /* Logos: troca para as versões clareadas no tema escuro */ .sd-only-dark { display: none !important; } html.dark .sd-only-light { display: none !important; } html.dark .sd-only-dark { display: block !important; } html.dark img.sd-only-dark.inline, html.dark .sd-only-dark.inline-block { display: inline-block !important; } /* Botão de tema: mostra lua no claro e sol no escuro */ html:not(.dark) .sd-icon-sun { display: none; } html.dark .sd-icon-moon { display: none; } /* ========================================================= Sidebar — tipografia de alto contraste Rótulos maiores, PRETO no tema claro e BRANCO no tema escuro. Itens ativos/hover ficam sobre o gradiente primário → texto branco. ========================================================= */ aside.sidebar-main .sidebar-label { color: #000; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; } aside.sidebar-main .sidebar-group-label { color: #000; font-size: 12px; font-weight: 700; letter-spacing: .1em; } /* Sobre fundo primário (ativo ou hover) o rótulo precisa ser branco */ aside.sidebar-main a.nav-ativo .sidebar-label, aside.sidebar-main a:hover .sidebar-label { color: #fff; } aside.sidebar-main button:hover .sidebar-group-label { color: #182e7c; } /* Ícones acompanham o contraste do rótulo */ aside.sidebar-main a:not(.nav-ativo):not(:hover) > i[data-lucide], aside.sidebar-main a:not(.nav-ativo):not(:hover) > svg { color: #1f2937; } /* Tema escuro: rótulos brancos */ html.dark aside.sidebar-main .sidebar-label, html.dark aside.sidebar-main .sidebar-group-label { color: #fff; } html.dark aside.sidebar-main a.nav-ativo .sidebar-label, html.dark aside.sidebar-main a:hover .sidebar-label { color: #fff; } html.dark aside.sidebar-main button:hover .sidebar-group-label { color: #c3cff7; } html.dark aside.sidebar-main a:not(.nav-ativo):not(:hover) > i[data-lucide], html.dark aside.sidebar-main a:not(.nav-ativo):not(:hover) > svg { color: #e7ecf8; } /* O tema escuro remapeia .text-slate-900 com !important; a sidebar tem regra própria */ html.dark aside.sidebar-main .text-slate-900 { color: #fff !important; }