/**
 * Estilos para Modo Claro/Escuro - Admin Module
 * 
 * SISTEMA UNIFICADO (2025-11-12):
 * - Suporta AMBOS: classe .dark E atributo [data-theme="dark"]
 * - theme-provider.js aplica os dois simultaneamente
 * - Compatível com Tailwind darkMode: ['class', '[data-theme="dark"]']
 * 
 * Por que ambos?
 * - .dark: necessário para Tailwind darkMode: 'class'
 * - [data-theme="dark"]: padrão semântico preferível
 * 
 * Usando variáveis CSS para fácil manutenção
 */

/* Configuração do Tailwind dark mode */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.1);
}

:is(.dark, [data-theme="dark"]) {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --border-color: #4b5563;
    --shadow: rgba(0, 0, 0, 0.3);
}

/* Body e container principal - REMOVIDO: conflito com theme.css */
/* body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
} */

/* Cards e containers */
:is(.dark, [data-theme="dark"]) .bg-white {
    background-color: var(--bg-primary) !important;
}

:is(.dark, [data-theme="dark"]) .bg-gray-50 {
    background-color: var(--bg-tertiary) !important;
}

:is(.dark, [data-theme="dark"]) .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

/* Textos */
:is(.dark, [data-theme="dark"]) .text-gray-500 {
    color: var(--text-secondary) !important;
}

:is(.dark, [data-theme="dark"]) .text-gray-600 {
    color: #9ca3af !important;
}

:is(.dark, [data-theme="dark"]) .text-gray-700 {
    color: #d1d5db !important;
}

:is(.dark, [data-theme="dark"]) .text-gray-800 {
    color: #e5e7eb !important;
}

:is(.dark, [data-theme="dark"]) .text-gray-900 {
    color: #f3f4f6 !important;
}

/* Bordas e divisores */
:is(.dark, [data-theme="dark"]) .border-gray-200,
:is(.dark, [data-theme="dark"]) .border-gray-300 {
    border-color: var(--border-color) !important;
}

:is(.dark, [data-theme="dark"]) .divide-gray-200 > * + * {
    border-color: var(--border-color) !important;
}

/* Inputs e selects */
:is(.dark, [data-theme="dark"]) input,
:is(.dark, [data-theme="dark"]) select,
:is(.dark, [data-theme="dark"]) textarea {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:is(.dark, [data-theme="dark"]) input::placeholder,
:is(.dark, [data-theme="dark"]) select::placeholder,
:is(.dark, [data-theme="dark"]) textarea::placeholder {
    color: var(--text-secondary) !important;
}

:is(.dark, [data-theme="dark"]) input:focus,
:is(.dark, [data-theme="dark"]) select:focus,
:is(.dark, [data-theme="dark"]) textarea:focus {
    background-color: var(--bg-primary) !important;
    border-color: #3b82f6 !important;
}

/* Hover states */
:is(.dark, [data-theme="dark"]) .hover\:bg-gray-50:hover,
:is(.dark, [data-theme="dark"]) .hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Shadows */
:is(.dark, [data-theme="dark"]) .shadow,
:is(.dark, [data-theme="dark"]) .shadow-sm,
:is(.dark, [data-theme="dark"]) .shadow-md,
:is(.dark, [data-theme="dark"]) .shadow-lg {
    box-shadow: 0 1px 3px 0 var(--shadow), 0 1px 2px 0 var(--shadow);
}

/* Tabelas */
:is(.dark, [data-theme="dark"]) table {
    background-color: var(--bg-primary) !important;
}

:is(.dark, [data-theme="dark"]) thead {
    background-color: var(--bg-tertiary) !important;
}

:is(.dark, [data-theme="dark"]) tbody tr {
    border-color: var(--border-color) !important;
}

:is(.dark, [data-theme="dark"]) tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Sidebar - manter azul */
:is(.dark, [data-theme="dark"]) aside.bg-blue-900 {
    background-color: #1e3a8a !important;
}

:is(.dark, [data-theme="dark"]) .sidebar-nav-link.bg-primary {
    background-image: linear-gradient(135deg, #0e1828, #1b2740);
    color: #f1f5f9 !important;
    border: 1px solid rgba(94, 234, 212, 0.25);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.45),
        0 8px 24px rgba(2, 6, 23, 0.55),
        inset 0 0 12px rgba(59, 130, 246, 0.35);
}

:is(.dark, [data-theme="dark"]) .sidebar-nav-link.bg-primary svg {
    color: #bae6fd !important;
}

/* Botão de theme toggle com ícones sobrepostos */
#theme-toggle {
    transition: all 0.3s ease;
    position: relative;
}

#theme-toggle:hover {
    transform: scale(1.05);
}

.theme-icon-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-block;
}

[data-theme-icon] {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 1.5rem; /* 24px - aumentado */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme-icon="light"] {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

:is(.dark, [data-theme="dark"]) [data-theme-icon="light"] {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

[data-theme-icon="dark"] {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
}

:is(.dark, [data-theme="dark"]) [data-theme-icon="dark"] {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Detalhes expandidos */
:is(.dark, [data-theme="dark"]) .details-row,
:is(.dark, [data-theme="dark"]) .details-row.expanded {
    background-color: var(--bg-tertiary) !important;
}

/* Status badges */
:is(.dark, [data-theme="dark"]) .bg-green-100 {
    background-color: #065f46 !important;
    color: #d1fae5 !important;
}

:is(.dark, [data-theme="dark"]) .bg-yellow-100 {
    background-color: #78350f !important;
    color: #fef3c7 !important;
}

:is(.dark, [data-theme="dark"]) .bg-red-100 {
    background-color: #7f1d1d !important;
    color: #fee2e2 !important;
}

/* Links */
:is(.dark, [data-theme="dark"]) a {
    color: #60a5fa !important;
}

:is(.dark, [data-theme="dark"]) a:hover {
    color: #93c5fd !important;
}

:is(.dark, [data-theme="dark"]) .bg-blue-900 a {
    color: inherit !important;
}

/* Mapa Leaflet */
:is(.dark, [data-theme="dark"]) .leaflet-container {
    background-color: var(--bg-tertiary) !important;
}

:is(.dark, [data-theme="dark"]) .leaflet-popup-content-wrapper {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Fotos */
:is(.dark, [data-theme="dark"]) .photo-item {
    background: var(--bg-tertiary) !important;
}

/* Spinner e loading */
:is(.dark, [data-theme="dark"]) .fa-spinner {
    color: var(--text-secondary) !important;
}

/* Scrollbar */
:is(.dark, [data-theme="dark"]) ::-webkit-scrollbar {
    background-color: var(--bg-secondary);
}

:is(.dark, [data-theme="dark"]) ::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
}

/* Seletor de hover do scrollbar - apenas para navegadores WebKit */
@supports (-webkit-appearance: none) {
  .dark ::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #4b5563;
  }
}

/* ============================================
   DESTAQUE ADICIONAL NO MODO CLARO
   Bordas mais espessas e sombras mais pronunciadas
   ============================================ */

/* Aplicar bordas mais espessas e sombras mais pronunciadas em todos os containers no modo claro */
:root:not([data-theme="dark"]):not(.dark) .bg-white,
:root:not([data-theme="dark"]):not(.dark) .bg-gray-50,
:root:not([data-theme="dark"]):not(.dark) .bg-gray-100,
:root:not([data-theme="dark"]):not(.dark) .bg-surface {
    border-width: 3px !important;
    border-color: hsl(220 13% 60%) !important;
    box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.18), 3px 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root:not([data-theme="dark"]):not(.dark) .bg-white:hover,
:root:not([data-theme="dark"]):not(.dark) .bg-gray-50:hover,
:root:not([data-theme="dark"]):not(.dark) .bg-gray-100:hover,
:root:not([data-theme="dark"]):not(.dark) .bg-surface:hover {
    box-shadow: 8px 12px 32px rgba(0, 0, 0, 0.22), 4px 6px 16px rgba(0, 0, 0, 0.15) !important;
    border-color: hsl(220 13% 55%) !important;
}

/* Cards e containers com classes rounded */
:root:not([data-theme="dark"]):not(.dark) [class*="rounded-lg"]:not(.btn):not(.filter-pill),
:root:not([data-theme="dark"]):not(.dark) [class*="rounded-xl"]:not(.btn):not(.filter-pill),
:root:not([data-theme="dark"]):not(.dark) [class*="rounded-2xl"]:not(.btn):not(.filter-pill) {
    box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.18), 3px 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Aumentar sombras padrão do Tailwind no modo claro */
:root:not([data-theme="dark"]):not(.dark) .shadow {
    box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.18), 3px 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root:not([data-theme="dark"]):not(.dark) .shadow-md {
    box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.18), 3px 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root:not([data-theme="dark"]):not(.dark) .shadow-lg {
    box-shadow: 8px 12px 32px rgba(0, 0, 0, 0.22), 4px 6px 16px rgba(0, 0, 0, 0.15) !important;
}

:root:not([data-theme="dark"]):not(.dark) .shadow-xl {
    box-shadow: 10px 16px 40px rgba(0, 0, 0, 0.25), 5px 8px 20px rgba(0, 0, 0, 0.18) !important;
}

:root:not([data-theme="dark"]):not(.dark) .shadow-2xl {
    box-shadow: 12px 20px 48px rgba(0, 0, 0, 0.28), 6px 10px 24px rgba(0, 0, 0, 0.20) !important;
}

/* Destaque especial para cards de submissão no modo claro */
:root:not([data-theme="dark"]):not(.dark) .submission-card {
    border-width: 3px !important;
    border-color: hsl(220 13% 60%) !important;
    box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.18), 3px 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root:not([data-theme="dark"]):not(.dark) .submission-card:hover {
    box-shadow: 8px 12px 32px rgba(0, 0, 0, 0.22), 4px 6px 16px rgba(0, 0, 0, 0.15) !important;
    border-color: hsl(220 13% 55%) !important;
}

/* Transições suaves */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Remover transição de elementos específicos */
.no-transition,
.fa-spinner,
button,
a {
    transition: none !important;
}

/* Re-adicionar transições necessárias */
button {
    transition: transform 0.2s ease !important;
}

a {
    transition: color 0.2s ease !important;
}