/* Grupo Zaka - Helpdesk Styles */ /* Custom styles for the helpdesk application */ /* Main colors are defined via Tailwind config: - zaka-red: #EE3137 - zaka-yellow: #FFDB25 - zaka-blue: #0045B5 */ /* Smooth transitions */ * { transition-property: color, background-color, border-color; transition-duration: 150ms; transition-timing-function: ease-in-out; } /* Focus styles */ input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 69, 181, 0.2); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #0045B5; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #003399; } /* ───────────────────────── LIGHT THEME OVERRIDES ───────────────────────── */ /* Activated when has class "light". */ /* Mantém a mesma paleta visual, apenas inverte os tons neutros. */ html.light body { background-color: #f1f5f9 !important; color: #1e293b !important; } /* Backgrounds neutros (slate / arbitrários, com e sem opacidade) */ html.light .bg-\[\#0f172a\], html.light .bg-\[\#0f172a\]\/95, html.light .bg-\[\#0f172a\]\/90, html.light .bg-\[\#0f172a\]\/80, html.light .bg-\[\#0f172a\]\/50 { background-color: #f1f5f9 !important; } html.light .bg-slate-950, html.light .bg-slate-950\/95, html.light .bg-slate-950\/80, html.light .bg-slate-950\/70, html.light .bg-slate-950\/60, html.light .bg-slate-950\/50, html.light .bg-slate-950\/40, html.light .bg-slate-950\/30 { background-color: #f8fafc !important; } html.light .bg-slate-900, html.light .bg-slate-900\/95, html.light .bg-slate-900\/80, html.light .bg-slate-900\/70, html.light .bg-slate-900\/60, html.light .bg-slate-900\/50, html.light .bg-slate-900\/40, html.light .bg-slate-900\/30 { background-color: rgba(255, 255, 255, 0.92) !important; } html.light .bg-slate-800, html.light .bg-slate-800\/80, html.light .bg-slate-800\/70, html.light .bg-slate-800\/60, html.light .bg-slate-800\/50, html.light .bg-slate-800\/40, html.light .bg-slate-800\/30, html.light .bg-slate-800\/20, html.light .bg-slate-800\/10 { background-color: #f1f5f9 !important; } html.light .bg-slate-700, html.light .bg-slate-700\/50, html.light .bg-slate-700\/40, html.light .bg-slate-700\/30, html.light .bg-slate-700\/20 { background-color: #e2e8f0 !important; } /* Hover backgrounds */ html.light [class*="hover:bg-slate-800"]:hover { background-color: #e2e8f0 !important; } html.light [class*="hover:bg-slate-700"]:hover { background-color: #cbd5e1 !important; } html.light [class*="hover:bg-slate-900"]:hover { background-color: #f1f5f9 !important; } /* Texto neutro (slate + branco puro) */ html.light .text-white { color: #0f172a !important; } html.light .text-slate-100 { color: #0f172a !important; } html.light .text-slate-200 { color: #1e293b !important; } html.light .text-slate-300 { color: #334155 !important; } html.light .text-slate-400 { color: #475569 !important; } html.light .text-slate-500 { color: #64748b !important; } html.light .text-slate-600 { color: #64748b !important; } html.light [class*="hover:text-white"]:hover { color: #0f172a !important; } html.light [class*="hover:text-slate-100"]:hover { color: #0f172a !important; } html.light [class*="hover:text-slate-200"]:hover { color: #1e293b !important; } html.light [class*="hover:text-slate-300"]:hover { color: #334155 !important; } html.light .group:hover [class*="group-hover:text-slate-300"] { color: #334155 !important; } html.light .group:hover [class*="group-hover:text-white"] { color: #0f172a !important; } /* EXCEÇÃO: texto branco DEVE permanecer branco em botões com fundo colorido sólido (caso contrário fica preto sobre rosa/verde/azul vibrante e fica ilegível). */ html.light .bg-pink-600.text-white, html.light .bg-pink-500.text-white, html.light .bg-pink-700.text-white, html.light .bg-emerald-600.text-white, html.light .bg-emerald-500.text-white, html.light .bg-emerald-700.text-white, html.light .bg-purple-600.text-white, html.light .bg-purple-500.text-white, html.light .bg-purple-700.text-white, html.light .bg-blue-600.text-white, html.light .bg-blue-500.text-white, html.light .bg-blue-700.text-white, html.light .bg-red-600.text-white, html.light .bg-red-500.text-white, html.light .bg-red-700.text-white, html.light .bg-yellow-600.text-white, html.light .bg-yellow-500.text-white, html.light .bg-amber-600.text-white, html.light .bg-indigo-600.text-white, html.light .bg-indigo-500.text-white, html.light .bg-cyan-600.text-white, html.light .bg-cyan-500.text-white, html.light .bg-teal-600.text-white, html.light .bg-teal-500.text-white, html.light .bg-orange-600.text-white, html.light .bg-orange-500.text-white, html.light .bg-rose-600.text-white, html.light .bg-rose-500.text-white { color: #ffffff !important; } /* Bordas neutras */ html.light .border-slate-800, html.light .border-slate-800\/50, html.light .border-slate-800\/30 { border-color: #e2e8f0 !important; } html.light .border-slate-700, html.light .border-slate-700\/50, html.light .border-slate-700\/40, html.light .border-slate-700\/30 { border-color: #cbd5e1 !important; } html.light .border-slate-600, html.light .border-slate-600\/50, html.light .border-slate-600\/40, html.light .border-slate-600\/30 { border-color: #94a3b8 !important; } html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } html.light .divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color: #cbd5e1 !important; } /* Inputs / selects / textareas */ html.light input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html.light select, html.light textarea { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; } html.light input::placeholder, html.light textarea::placeholder { color: #94a3b8 !important; } html.light .placeholder-slate-400::placeholder, html.light .placeholder-slate-500::placeholder, html.light .placeholder-slate-600::placeholder { color: #94a3b8 !important; } /* Selects: opções nativas com fundo branco */ html.light select option { background-color: #ffffff !important; color: #0f172a !important; } /* Tabelas */ html.light thead.bg-slate-800, html.light thead.bg-slate-900, html.light thead { background-color: #f8fafc !important; } html.light tbody tr:hover { background-color: #f1f5f9 !important; } /* Texto em gradiente (logo, títulos) — usa cor sólida em light */ html.light .bg-clip-text.text-transparent { -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; background: none !important; } /* Sombras mais leves */ html.light .shadow-2xl, html.light .shadow-xl, html.light .shadow-lg { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important; } /* Scrollbar light */ html.light ::-webkit-scrollbar-track { background: #e2e8f0; } /* ─────────── Estados "selecionados" (peer-checked) em light ─────────── Em dark, fundos como bg-purple-500/10 funcionam sobre slate-900. Em light, ficam quase invisíveis sobre branco. Reforçamos aqui: - fundo um pouco mais saturado - borda colorida sólida - texto escuro em vez do tom 400 desbotado */ html.light .peer:checked ~ [class*="peer-checked:bg-purple-500"] { background-color: #ede9fe !important; } html.light .peer:checked ~ [class*="peer-checked:bg-blue-500"] { background-color: #dbeafe !important; } html.light .peer:checked ~ [class*="peer-checked:bg-emerald-500"] { background-color: #d1fae5 !important; } html.light .peer:checked ~ [class*="peer-checked:bg-pink-500"] { background-color: #fce7f3 !important; } html.light .peer:checked ~ [class*="peer-checked:bg-yellow-500"] { background-color: #fef3c7 !important; } html.light .peer:checked ~ [class*="peer-checked:bg-red-500"] { background-color: #fee2e2 !important; } html.light .peer:checked ~ [class*="peer-checked:border-purple-500"] { border-color: #7c3aed !important; } html.light .peer:checked ~ [class*="peer-checked:border-blue-500"] { border-color: #2563eb !important; } html.light .peer:checked ~ [class*="peer-checked:border-emerald-500"] { border-color: #059669 !important; } html.light .peer:checked ~ [class*="peer-checked:border-pink-500"] { border-color: #db2777 !important; } html.light .peer:checked ~ [class*="peer-checked:border-yellow-500"] { border-color: #d97706 !important; } html.light .peer:checked ~ [class*="peer-checked:border-red-500"] { border-color: #dc2626 !important; } html.light .peer:checked ~ * [class*="peer-checked:text-purple-400"], html.light .peer:checked ~ [class*="peer-checked:text-purple-400"] { color: #6d28d9 !important; } html.light .peer:checked ~ * [class*="peer-checked:text-blue-400"], html.light .peer:checked ~ [class*="peer-checked:text-blue-400"] { color: #1d4ed8 !important; } html.light .peer:checked ~ * [class*="peer-checked:text-emerald-400"], html.light .peer:checked ~ [class*="peer-checked:text-emerald-400"] { color: #047857 !important; } html.light .peer:checked ~ * [class*="peer-checked:text-pink-400"], html.light .peer:checked ~ [class*="peer-checked:text-pink-400"] { color: #be185d !important; } html.light .peer:checked ~ * [class*="peer-checked:text-yellow-400"], html.light .peer:checked ~ [class*="peer-checked:text-yellow-400"] { color: #b45309 !important; } html.light .peer:checked ~ * [class*="peer-checked:text-red-400"], html.light .peer:checked ~ [class*="peer-checked:text-red-400"] { color: #b91c1c !important; } /* Toggle switches (peer-checked:bg-purple-500 sólido) */ html.light .peer:checked ~ .peer-checked\:bg-purple-500 { background-color: #7c3aed !important; } html.light .peer:checked ~ .peer-checked\:bg-emerald-500 { background-color: #059669 !important; } html.light .peer:checked ~ .peer-checked\:bg-blue-500 { background-color: #2563eb !important; } /* Chips/pills selecionados com fundo sólido (peer-checked:bg-{cor}-600) */ html.light .peer:checked ~ .peer-checked\:bg-emerald-600 { background-color: #059669 !important; color: #ffffff !important; } html.light .peer:checked ~ .peer-checked\:bg-purple-600 { background-color: #7c3aed !important; color: #ffffff !important; } html.light .peer:checked ~ .peer-checked\:bg-blue-600 { background-color: #2563eb !important; color: #ffffff !important; } html.light .peer:checked ~ .peer-checked\:bg-pink-600 { background-color: #db2777 !important; color: #ffffff !important; } html.light .peer:checked ~ .peer-checked\:bg-red-600 { background-color: #dc2626 !important; color: #ffffff !important; } html.light .peer:checked ~ .peer-checked\:bg-yellow-600 { background-color: #d97706 !important; color: #ffffff !important; } /* Garante que o texto branco prevaleça sobre o override genérico .text-white→#0f172a */ html.light .peer:checked ~ .peer-checked\:text-white { color: #ffffff !important; } /* Tints coloridos translúcidos comuns (badges, cards informativos) Tornam o estado visível em light mantendo a cor da identidade. */ html.light .bg-purple-500\/10, html.light .bg-purple-500\/5 { background-color: #ede9fe !important; } html.light .bg-purple-500\/20 { background-color: #ddd6fe !important; } html.light .bg-purple-600\/20 { background-color: #ddd6fe !important; } html.light .bg-purple-600\/40 { background-color: #c4b5fd !important; } html.light .bg-blue-500\/10, html.light .bg-blue-500\/5 { background-color: #dbeafe !important; } html.light .bg-blue-500\/20 { background-color: #bfdbfe !important; } html.light .bg-emerald-500\/10, html.light .bg-emerald-500\/5 { background-color: #d1fae5 !important; } html.light .bg-emerald-500\/20 { background-color: #a7f3d0 !important; } html.light .bg-pink-500\/10 { background-color: #fce7f3 !important; } html.light .bg-pink-500\/20 { background-color: #fbcfe8 !important; } html.light .bg-yellow-500\/5, html.light .bg-yellow-500\/10 { background-color: #fef3c7 !important; } html.light .bg-yellow-500\/20 { background-color: #fde68a !important; } html.light .bg-red-500\/10 { background-color: #fee2e2 !important; } html.light .bg-red-500\/20 { background-color: #fecaca !important; } /* Textos em tons claros (-400) ficam ilegíveis em fundo branco */ html.light .text-purple-400 { color: #6d28d9 !important; } html.light .text-purple-300 { color: #6d28d9 !important; } html.light .text-blue-400 { color: #1d4ed8 !important; } html.light .text-blue-300 { color: #1d4ed8 !important; } html.light .text-emerald-400 { color: #047857 !important; } html.light .text-emerald-300 { color: #047857 !important; } html.light .text-pink-400 { color: #be185d !important; } html.light .text-pink-300 { color: #be185d !important; } html.light .text-yellow-400 { color: #b45309 !important; } html.light .text-yellow-300 { color: #b45309 !important; } html.light .text-red-400 { color: #b91c1c !important; } html.light .text-red-300 { color: #b91c1c !important; } /* Bordas coloridas translúcidas */ html.light .border-purple-500\/20, html.light .border-purple-500\/30, html.light .border-purple-500\/50 { border-color: #c4b5fd !important; } html.light .border-blue-500\/20, html.light .border-blue-500\/50 { border-color: #93c5fd !important; } html.light .border-emerald-500\/20, html.light .border-emerald-500\/50 { border-color: #6ee7b7 !important; } html.light .border-pink-500\/20, html.light .border-pink-500\/50 { border-color: #f9a8d4 !important; } html.light .border-yellow-500\/20, html.light .border-yellow-500\/50 { border-color: #fcd34d !important; } html.light .border-red-500\/20, html.light .border-red-500\/50 { border-color: #fca5a5 !important; } /* Glass cards (estilo customizado em vários templates) */ html.light .glass-card { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(15, 23, 42, 0.08) !important; } /* Cores neutras adicionais (gray-* usadas em alguns templates) */ html.light .bg-gray-900 { background-color: #ffffff !important; } html.light .bg-gray-800 { background-color: #f1f5f9 !important; } html.light .text-gray-100 { color: #0f172a !important; } html.light .text-gray-200 { color: #1e293b !important; } html.light .text-gray-300 { color: #334155 !important; } html.light .text-gray-400 { color: #475569 !important; } html.light .border-gray-800 { border-color: #e2e8f0 !important; } html.light .border-gray-700 { border-color: #cbd5e1 !important; } /* Botão toggle de tema */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.light .theme-toggle .icon-sun { display: block; } html.light .theme-toggle .icon-moon { display: none; } /* ───────────────────────── MOBILE RESPONSIVENESS ───────────────────────── */ /* Ajustes globais para telas pequenas mantendo o mesmo design system. */ /* Quebra suave para qualquer container "max-w" (usado em todas páginas) */ @media (max-width: 640px) { /* Container principal: padding lateral menor, vertical reduzido */ .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { padding-left: 0.875rem !important; padding-right: 0.875rem !important; } /* Header sticky: reduz padding e mantém tap targets */ header .max-w-7xl { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } header h1, header .text-xl { font-size: 1.05rem !important; } } /* Telas muito pequenas: oculta texto da marca para evitar overflow no header */ @media (max-width: 380px) { header .text-xl { display: none; } } @media (max-width: 640px) { /* Tipografia de títulos grandes */ .text-5xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } .text-4xl { font-size: 1.625rem !important; line-height: 2rem !important; } .text-3xl { font-size: 1.375rem !important; line-height: 1.75rem !important; } .text-2xl { font-size: 1.2rem !important; line-height: 1.6rem !important; } /* Padding excessivo em cards/containers principais */ .p-12 { padding: 1.25rem !important; } .p-10 { padding: 1.1rem !important; } .p-8 { padding: 1rem !important; } .p-7 { padding: 0.95rem !important; } .p-6 { padding: 0.9rem !important; } .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-7 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-12 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .py-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-8 { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; } /* Gaps grandes em grids/flex */ .gap-12 { gap: 1rem !important; } .gap-10 { gap: 1rem !important; } .gap-8 { gap: 0.9rem !important; } .gap-7 { gap: 0.85rem !important; } .gap-6 { gap: 0.8rem !important; } /* Margens grandes verticais */ .mb-12 { margin-bottom: 1.25rem !important; } .mb-10 { margin-bottom: 1rem !important; } .mb-8 { margin-bottom: 0.9rem !important; } .mt-12 { margin-top: 1.25rem !important; } .mt-10 { margin-top: 1rem !important; } .mt-8 { margin-top: 0.9rem !important; } /* Grids sem prefixo responsivo: força fluidez em mobile. Layouts já com sm:/md:/lg: mantêm seu comportamento (vencidos por especificidade idêntica de classe, mas a mídia-query é a que importa). */ .grid.grid-cols-12:not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]) { grid-template-columns: 1fr !important; } .grid.grid-cols-12:not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]) > [class*="col-span-"] { grid-column: span 1 / span 1 !important; } .grid.grid-cols-6:not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]), .grid.grid-cols-5:not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid.grid-cols-4:not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* grid-cols-3 e grid-cols-2 sem prefixo permanecem (geralmente são caixas pequenas) */ /* Tabelas: encolhe fontes e padding em mobile (mantém alinhamento de colunas) */ table { font-size: 0.8rem !important; } table th, table td { padding: 0.5rem 0.5rem !important; } /* Quando a tabela está dentro de um wrapper sem overflow, força scroll do wrapper */ .overflow-x-auto { -webkit-overflow-scrolling: touch; } /* Modais que usam max-w-* e p-8: full width */ .fixed.inset-0 .max-w-2xl, .fixed.inset-0 .max-w-3xl, .fixed.inset-0 .max-w-4xl, .fixed.inset-0 .max-w-5xl { width: calc(100vw - 1.5rem) !important; max-width: calc(100vw - 1.5rem) !important; margin-left: 0.75rem !important; margin-right: 0.75rem !important; } /* Sidebar: ocupa toda a tela em devices muito pequenos */ #sidebarMenu { width: min(20rem, 88vw) !important; } /* Inputs maiores para evitar zoom automático no iOS (font-size >= 16px) */ input, select, textarea { font-size: 16px !important; } /* Botões com texto inteiro quebram em mobile sem partir layout */ button, a.btn, .btn { white-space: normal !important; } /* Esconde colunas auxiliares marcadas com utilitário .hide-on-mobile */ .hide-on-mobile { display: none !important; } /* Badges (pill labels) menores e mais compactos em mobile */ .rounded-full.uppercase { padding-left: 0.5rem !important; padding-right: 0.5rem !important; padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; letter-spacing: 0.05em !important; } .text-\[10px\] { font-size: 9px !important; } /* Botões de ação em cards: tamanho de toque adequado e texto compacto */ article button, article a.btn, article .btn { min-height: 36px; } } /* Tablets: ajustes intermediários */ @media (min-width: 641px) and (max-width: 1023px) { .text-5xl { font-size: 2.25rem !important; line-height: 2.5rem !important; } .text-4xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } .gap-12 { gap: 1.5rem !important; } .gap-10 { gap: 1.5rem !important; } } /* Garante que flex containers com itens largos embrulhem em telas estreitas. Aplica apenas a flex já com gap (heurística para layouts em "linha de itens"). */ @media (max-width: 640px) { .flex.gap-4:not(.flex-nowrap):not(.flex-col), .flex.gap-6:not(.flex-nowrap):not(.flex-col), .flex.gap-8:not(.flex-nowrap):not(.flex-col) { flex-wrap: wrap; } } /* Fallback global de scroll horizontal para tabelas em wrappers conhecidos */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }