/* ========================================================
   FSB Help-desk - Modo Escuro (Dark Mode)
   Padrão idêntico ao SiGA: Overrides CSS globais ativados 
   quando a classe .dark é aplicada à tag <html>.
======================================================== */

/* 1. Fundos Principais (Corpo, Views e Estrutura Base) */
html.dark,
html.dark body,
html.dark #main-content,
html.dark #app-content,
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.dark #view-agent-dashboard,
html.dark #view-agent-ticket-detail,
html.dark #view-agent-analytics,
html.dark #view-admin-panel,
html.dark #view-knowledge-base,
html.dark #view-client-dashboard {
    background-color: #0b1329 !important; /* Fundo profundo noturno */
    color: #f8fafc !important;
}

/* 2. Topbar e Cabeçalho do Sistema */
html.dark #app-header {
    background-color: #0c192c !important;
    border-bottom: 1px solid #1e293b !important;
}

html.dark #mobile-menu {
    background-color: #0c192c !important;
    border-color: #1e293b !important;
}

/* 3. Painéis, Cards, Modais e Superfícies (que antes eram bg-white) */
html.dark .bg-white,
html.dark .bg-white\/95,
html.dark .bg-white\/90,
html.dark .bg-white\/80 {
    background-color: #152238 !important; /* Azul escuro refinado / Slate noturno */
    color: #f8fafc !important;
}

html.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

html.dark .bg-gray-200 {
    background-color: #243552 !important;
}

html.dark .bg-gray-300 {
    background-color: #334155 !important;
}

/* Hover states para itens e linhas */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-blue-50:hover {
    background-color: #1c2d4a !important;
}

/* 4. Bordas e Divisores */
html.dark .border,
html.dark .border-t,
html.dark .border-b,
html.dark .border-l,
html.dark .border-r,
html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #243552 !important;
}

html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #243552 !important;
}

/* 5. TÍTULOS E FONTES CLARAS COM EXCELENTE CONTRASTE */
/* Títulos Principais de Seções, Cards e Modais */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark .text-gray-950,
html.dark .text-gray-900,
html.dark .text-black {
    color: #ffffff !important; /* Branco cristalino de alto contraste */
}

/* Textos Secundários / Títulos Menores */
html.dark .text-gray-800 {
    color: #f8fafc !important; /* slate-50 */
}

html.dark .text-gray-700 {
    color: #e2e8f0 !important; /* slate-200 */
}

/* Textos Descritivos, Subtítulos de Seções e Parágrafos Explicativos */
html.dark .text-gray-600,
html.dark p.text-xs.text-gray-500,
html.dark p.text-sm.text-gray-500,
html.dark p.text-xs.text-gray-600,
html.dark p.text-sm.text-gray-600,
html.dark .text-gray-500:not(.text-gray-400) {
    color: #cbd5e1 !important; /* slate-300 (perfeitamente legível e suave) */
}

/* Textos Muted, Metadados e Placeholders */
html.dark .text-gray-400 {
    color: #94a3b8 !important; /* slate-400 */
}

/* Labels de Formulários e Campos */
html.dark label {
    color: #cbd5e1 !important;
}

/* Ícones de Cabeçalho dos Cards e Seções Administrativas */
html.dark h2 svg.text-hepic-primary,
html.dark h3 svg.text-hepic-primary,
html.dark h4 svg.text-hepic-primary,
html.dark .text-hepic-primary {
    color: #60a5fa !important; /* Azul claro e vibrante */
}

html.dark h2 svg.text-purple-600,
html.dark h3 svg.text-purple-600,
html.dark .text-purple-600 {
    color: #c084fc !important; /* Roxo claro */
}

html.dark h2 svg.text-indigo-600,
html.dark h3 svg.text-indigo-600,
html.dark .text-indigo-600 {
    color: #818cf8 !important; /* Índigo claro */
}

html.dark h2 svg.text-blue-600,
html.dark h3 svg.text-blue-600,
html.dark .text-blue-600 {
    color: #60a5fa !important; /* Azul claro */
}

html.dark h2 svg.text-emerald-600,
html.dark h3 svg.text-emerald-600,
html.dark .text-emerald-600 {
    color: #6ee7b7 !important; /* Verde esmeralda claro */
}

/* 6. Inputs, Selects, Textareas e Formulários */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html.dark select,
html.dark textarea {
    background-color: #101c30 !important;
    color: #f8fafc !important;
    border-color: #2a3c5a !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 1px #3b82f6 !important;
    background-color: #13223b !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
    background-color: #0b1526 !important;
    color: #64748b !important;
    border-color: #1e293b !important;
}

/* 7. Barra de Filtros e Fila de Tickets */
html.dark #agent-filters-sidebar {
    background-color: #132037 !important;
    border-color: #243552 !important;
}

html.dark #agent-filters-sidebar select,
html.dark #agent-filters-sidebar input {
    background-color: #0e1726 !important;
    border-color: #243552 !important;
}

html.dark .ticket-card,
html.dark .ticket-row,
html.dark #agent-tickets-list-container > div {
    border-color: #243552 !important;
}

html.dark #agent-tickets-list-container > div:hover {
    background-color: #1c2d4a !important;
}

/* Pílulas de Filtros da Fila de Tickets */
html.dark [data-filter].bg-hepic-soft {
    background-color: #1e3a8a !important;
    color: #93c5fd !important;
}

html.dark [data-filter]:not(.bg-hepic-soft) {
    color: #cbd5e1 !important;
    border-color: #243552 !important;
    background-color: transparent !important;
}

html.dark [data-filter]:not(.bg-hepic-soft):hover {
    background-color: #1c2d4a !important;
    color: #f8fafc !important;
}

html.dark [data-filter="trash"] {
    background-color: rgba(127, 29, 29, 0.25) !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

html.dark [id^="badge-count-"] {
    background-color: #0f1c30 !important;
    border-color: #243552 !important;
    color: #93c5fd !important;
}

/* Ações Rápidas nos Tickets (Selects em Linha) */
html.dark .quick-action-priority,
html.dark .quick-action-group,
html.dark .quick-action-agent,
html.dark .quick-action-category {
    background-color: #101c30 !important;
    color: #f1f5f9 !important;
    border-color: #2a3c5a !important;
}

/* 8. Pílulas e Badges de Status / Prioridade / RBAC */
html.dark .bg-blue-50,
html.dark .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.45) !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

html.dark .text-blue-800,
html.dark .text-blue-700 {
    color: #93c5fd !important;
}

html.dark .bg-amber-50,
html.dark .bg-yellow-50,
html.dark .bg-amber-100,
html.dark .bg-yellow-100 {
    background-color: rgba(120, 53, 15, 0.45) !important;
    color: #fde68a !important;
    border-color: #b45309 !important;
}

html.dark .text-amber-800,
html.dark .text-amber-700 {
    color: #fcd34d !important;
}

html.dark .bg-emerald-50,
html.dark .bg-green-50,
html.dark .bg-emerald-100,
html.dark .bg-green-100 {
    background-color: rgba(6, 78, 59, 0.45) !important;
    color: #a7f3d0 !important;
    border-color: #059669 !important;
}

html.dark .text-emerald-800,
html.dark .text-green-800,
html.dark .text-emerald-700,
html.dark .text-green-700 {
    color: #86efac !important;
}

html.dark .bg-red-50,
html.dark .bg-red-100 {
    background-color: rgba(127, 29, 29, 0.45) !important;
    color: #fecaca !important;
    border-color: #dc2626 !important;
}

html.dark .text-red-800,
html.dark .text-red-700 {
    color: #fca5a5 !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-100 {
    background-color: rgba(88, 28, 135, 0.45) !important;
    color: #e9d5ff !important;
    border-color: #7e22ce !important;
}

html.dark .text-purple-800,
html.dark .text-purple-700 {
    color: #d8b4fe !important;
}

html.dark .bg-indigo-50,
html.dark .bg-indigo-100 {
    background-color: rgba(49, 46, 129, 0.45) !important;
    color: #c7d2fe !important;
    border-color: #4338ca !important;
}

html.dark .text-indigo-800,
html.dark .text-indigo-700 {
    color: #a5b4fc !important;
}

/* 9. Visualização do Detalhe do Ticket (#view-agent-ticket-detail) */
html.dark #tab-btn-chat,
html.dark #tab-btn-portugal {
    color: #94a3b8 !important;
}

html.dark #tab-btn-chat.border-hepic-primary {
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

html.dark #tab-btn-portugal.border-hepic-primary {
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

/* Barra de Abas do Ticket */
html.dark #view-agent-ticket-detail .border-b.bg-gray-50\/70,
html.dark #view-agent-ticket-detail .border-b.bg-gray-50 {
    background-color: #101c30 !important;
    border-color: #243552 !important;
}

/* Mensagens do Atendimento */
html.dark .agent-msg-bubble-public {
    background-color: rgba(30, 58, 138, 0.3) !important;
    border-color: #1e40af !important;
}

html.dark .agent-msg-bubble-internal {
    background-color: rgba(120, 53, 15, 0.3) !important;
    border-color: #92400e !important;
}

html.dark .agent-msg-bubble-client {
    background-color: #132037 !important;
    border-color: #243552 !important;
}

/* Aba Portugal */
html.dark #tab-content-portugal .bg-emerald-50\/70,
html.dark #tab-content-portugal .bg-emerald-50\/50,
html.dark #tab-content-portugal .bg-emerald-50\/80 {
    background-color: rgba(6, 78, 59, 0.35) !important;
    border-color: #047857 !important;
}

/* 10. Quill Rich Text Editor no Modo Escuro */
html.dark .ql-toolbar.ql-snow {
    background-color: #16243d !important;
    border-color: #2a3c5a !important;
}

html.dark .ql-toolbar.ql-snow .ql-stroke {
    stroke: #cbd5e1 !important;
}

html.dark .ql-toolbar.ql-snow .ql-fill {
    fill: #cbd5e1 !important;
}

html.dark .ql-toolbar.ql-snow .ql-picker {
    color: #cbd5e1 !important;
}

html.dark .ql-toolbar.ql-snow .ql-picker-options {
    background-color: #16243d !important;
    border-color: #2a3c5a !important;
    color: #f8fafc !important;
}

html.dark .ql-container.ql-snow {
    background-color: #101c30 !important;
    border-color: #2a3c5a !important;
    color: #f8fafc !important;
}

html.dark .ql-editor.ql-blank::before {
    color: #64748b !important;
}

/* 11. Modais, Menus Dropdown e Diálogos */
html.dark .modal-container,
html.dark #profile-modal > div,
html.dark #manual-modal > div,
html.dark #modal-bulk-assign > div,
html.dark #modal-create-ticket > div,
html.dark #modal-create-contact > div,
html.dark #modal-create-company > div,
html.dark #modal-role-permissions-view > div,
html.dark #custom-confirm-modal > div,
html.dark #modal-user-manual > div {
    background-color: #152238 !important;
    color: #f8fafc !important;
    border-color: #2a3c5a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

html.dark #header-btn-new-dropdown > div {
    background-color: #152238 !important;
    border-color: #2a3c5a !important;
}

html.dark #header-btn-new-dropdown a {
    color: #f1f5f9 !important;
    border-color: #243552 !important;
}

html.dark #header-btn-new-dropdown a:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

/* 12. Tabelas e Cabeçalhos (Admin, Relatórios e Cliente) */
html.dark table thead tr,
html.dark table thead th {
    background-color: #0f1c30 !important;
    border-color: #243552 !important;
    color: #cbd5e1 !important;
}

html.dark table td {
    border-color: #243552 !important;
}

html.dark table tbody tr:hover {
    background-color: #1b2c48 !important;
}

/* 13. MÓDULO DE ADMINISTRAÇÃO & RBAC */
/* Abas do Painel Administrativo */
html.dark #admin-panel-tabs button:not(.bg-hepic-primary) {
    background-color: #152238 !important;
    color: #cbd5e1 !important;
    border-color: #243552 !important;
}

html.dark #admin-panel-tabs button:not(.bg-hepic-primary):hover {
    background-color: #1c2d4a !important;
    color: #ffffff !important;
}

html.dark #admin-panel-tabs button.bg-hepic-primary {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Select especial de Perfil RBAC na tabela de usuários */
html.dark .access-role-select {
    background-color: rgba(88, 28, 135, 0.35) !important;
    color: #f3e8ff !important;
    border-color: #6b21a8 !important;
}

/* Card Explicativo RBAC (Púrpura no Modo Escuro) */
html.dark #admin-tab-content-roles .bg-purple-50\/50,
html.dark #admin-tab-content-roles .bg-purple-50 {
    background-color: rgba(88, 28, 135, 0.25) !important;
    border-color: #6b21a8 !important;
}

html.dark #admin-tab-content-roles h4.text-purple-950 {
    color: #f3e8ff !important;
}

html.dark #admin-tab-content-roles p.text-purple-800 {
    color: #d8b4fe !important;
}

html.dark #admin-tab-content-roles .bg-purple-100 {
    background-color: #581c87 !important;
    color: #f3e8ff !important;
}

/* Cards de Integrações e Backup */
html.dark #view-admin-panel .bg-gray-50 {
    background-color: #101c30 !important;
    border-color: #243552 !important;
}

html.dark #view-admin-panel code {
    background-color: #0b1526 !important;
    color: #93c5fd !important;
    border: 1px solid #1e293b;
}

/* 14. Relatórios e Indicadores (#view-agent-analytics) */
html.dark #view-agent-analytics .bg-white {
    background-color: #152238 !important;
    border-color: #243552 !important;
}

/* 15. Base de Conhecimento e Manual */
html.dark #view-knowledge-base .bg-white,
html.dark #manual-modal .bg-white,
html.dark #modal-user-manual .bg-white {
    background-color: #152238 !important;
    border-color: #243552 !important;
}

/* 16. Custom Scrollbars no Modo Escuro */
html.dark ::-webkit-scrollbar {
    background-color: #0b1329;
}

html.dark ::-webkit-scrollbar-track {
    background: #0f1c30;
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #334155;
    border: 2px solid #0f1c30;
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #475569;
}

html.dark .custom-scrollbar {
    scrollbar-color: #334155 #0f1c30;
}