/* ========================================================================
   MODO DARK - SISTEMA DE CHECKLIST CLARO
   Versão 2.0 - Design Moderno e Elegante
   ======================================================================== */

/* ========================================================================
   VARIÁVEIS CSS - PALETA DE CORES MODERNA
   ======================================================================== */
:root {
    /* Backgrounds - Tons mais suaves e profundos */
    --dark-bg-primary: #0d1117;
    --dark-bg-secondary: #161b22;
    --dark-bg-tertiary: #1f2937;
    --dark-bg-card: #1a1f2e;
    --dark-bg-hover: #21262d;

    /* Textos - Melhor contraste */
    --dark-text-primary: #f0f6fc;
    --dark-text-secondary: #c9d1d9;
    --dark-text-muted: #8b949e;
    --dark-text-disabled: #6e7681;

    /* Accent Colors - Cores Claro adaptadas */
    --dark-accent-red: #ff3b30;
    --dark-accent-red-hover: #ff453a;
    --dark-accent-blue: #0a84ff;
    --dark-accent-blue-hover: #409cff;
    --dark-accent-green: #30d158;
    --dark-accent-green-hover: #32d15a;
    --dark-accent-yellow: #ffd60a;
    --dark-accent-orange: #ff9f0a;
    --dark-accent-purple: #bf5af2;
    --dark-accent-purple-hover: #da8fff;

    /* Borders - Mais sutis */
    --dark-border: #30363d;
    --dark-border-light: #3d444d;
    --dark-border-focus: #58a6ff;

    /* Shadows - Mais profundas */
    --dark-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --dark-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --dark-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --dark-shadow-glow: 0 0 20px rgba(10, 132, 255, 0.15);

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;
}

/* ========================================================================
   BOTÃO TOGGLE DARK MODE - DESIGN MODERNO
   ======================================================================== */
.dark-mode-toggle {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 60px !important;
    height: 60px !important;
    border: none !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #1f2937 !important;
    font-size: 28px !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35), 0 0 0 0 rgba(251, 191, 36, 0.4) !important;
    transition: var(--transition-smooth) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35), 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(251, 191, 36, 0.5), 0 0 20px 5px rgba(251, 191, 36, 0.2); }
}

.dark-mode-toggle:hover {
    transform: scale(1.15) rotate(15deg) !important;
    box-shadow: 0 6px 24px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.3) !important;
    animation: none;
}

.dark-mode-toggle:active {
    transform: scale(0.9) !important;
}

body.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #f0f6fc !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35), 0 0 0 0 rgba(59, 130, 246, 0.4) !important;
    animation: pulse-dark 3s ease-in-out infinite;
}

@keyframes pulse-dark {
    0%, 100% { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35), 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5), 0 0 20px 5px rgba(59, 130, 246, 0.2); }
}

body.dark-mode .dark-mode-toggle:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.3) !important;
}

/* ========================================================================
   TRANSIÇÕES SUAVES GLOBAIS
   ======================================================================== */
body,
body * {
    transition: background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ========================================================================
   CORPO E BACKGROUND
   ======================================================================== */
body.dark-mode {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Background gradiente suave para dar profundidade */
body.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at top left, rgba(10, 132, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(191, 90, 242, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* ========================================================================
   CONTAINERS E CARDS
   ======================================================================== */
body.dark-mode .container,
body.dark-mode .checklist-container,
body.dark-mode .login-container,
body.dark-mode .form-container,
body.dark-mode .main-content,
body.dark-mode .content,
body.dark-mode .page-container,
body.dark-mode .wrapper {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: var(--dark-shadow-lg) !important;
    position: relative;
    z-index: 1;
}

/* Efeito de brilho sutil nos cards */
body.dark-mode .container:hover,
body.dark-mode .checklist-container:hover {
    border-color: var(--dark-border-light) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Garantir que todos os divs e sections tenham fundo escuro */
body.dark-mode div,
body.dark-mode section,
body.dark-mode article,
body.dark-mode main {
    background-color: transparent !important;
}

/* Apenas containers principais devem ter fundo */
body.dark-mode .container,
body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .panel {
    background-color: var(--dark-bg-card) !important;
}

/* ========================================================================
   TÍTULOS E TEXTOS
   ======================================================================== */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title {
    color: var(--dark-text-primary) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .section-title {
    color: var(--dark-accent-blue) !important;
    border-bottom-color: var(--dark-accent-blue) !important;
    text-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .developer-text {
    color: var(--dark-text-muted) !important;
}

/* ========================================================================
   LABELS E CAMPOS DE FORMULÁRIO
   ======================================================================== */
body.dark-mode label,
body.dark-mode .checklist li label {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode label.required-field,
body.dark-mode label.required-field::before,
body.dark-mode label.required-field::after {
    color: var(--dark-text-primary) !important;
}

body.dark-mode label.required-field::after {
    color: var(--dark-accent-red) !important;
}

body.dark-mode .input-group label,
body.dark-mode .input-group-container label,
body.dark-mode .field-group label {
    color: var(--dark-text-primary) !important;
    background: transparent !important;
}

body.dark-mode .field-group p {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
    font-weight: 600 !important;
}

/* ========================================================================
   INPUTS, TEXTAREAS E SELECTS
   ======================================================================== */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="date"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
    transition: var(--transition-smooth) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1) !important;
    outline: none !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.6;
}

/* ========================================================================
   RADIO BUTTONS E CHECKBOXES - ESTILO MODERNO
   ======================================================================== */
body.dark-mode input[type="radio"],
body.dark-mode input[type="checkbox"] {
    accent-color: var(--dark-accent-blue) !important;
    cursor: pointer;
}

body.dark-mode .radio-label,
body.dark-mode .checkbox-label {
    color: var(--dark-text-primary) !important;
}

/* ========================================================================
   BOTÕES - DESIGN MODERNO COM GRADIENTES
   ======================================================================== */
body.dark-mode button,
body.dark-mode .btn,
body.dark-mode input[type="button"],
body.dark-mode input[type="submit"] {
    background: linear-gradient(135deg, var(--dark-accent-blue) 0%, #357abd 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3) !important;
    transition: var(--transition-smooth) !important;
    font-weight: 600 !important;
}

body.dark-mode button:hover,
body.dark-mode .btn:hover {
    background: linear-gradient(135deg, var(--dark-accent-blue-hover) 0%, #4a9eff 100%) !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.5) !important;
    transform: translateY(-2px);
}

body.dark-mode button:active,
body.dark-mode .btn:active {
    transform: translateY(0);
}

/* Botões específicos com cores diferentes */
body.dark-mode .upload-btn {
    background: linear-gradient(135deg, var(--dark-accent-purple) 0%, #7950f2 100%) !important;
}

body.dark-mode .remove-btn {
    background: linear-gradient(135deg, var(--dark-accent-red) 0%, #f03e3e 100%) !important;
}

body.dark-mode .back-button,
body.dark-mode .cancel-button {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%) !important;
}

body.dark-mode .print-button {
    background: linear-gradient(135deg, var(--dark-accent-green) 0%, #37b24d 100%) !important;
}

body.dark-mode .button-view {
    background-color: #1e40af !important;
    color: #ffffff !important;
    border: 2px solid #1e3a8a !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .button-view:hover {
    background-color: #1e3a8a !important;
    border-color: #172554 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6) !important;
}

/* Botão de toggle password */
body.dark-mode #togglePassword {
    color: #6e7681 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

body.dark-mode #togglePassword:hover {
    color: #8b949e !important;
}

body.dark-mode #togglePassword:focus {
    outline: none !important;
    box-shadow: none !important;
}

body.dark-mode #togglePassword svg {
    color: #6e7681 !important;
    stroke: #6e7681 !important;
}

body.dark-mode #togglePassword:hover svg {
    color: #8b949e !important;
    stroke: #8b949e !important;
}

/* ========================================================================
   TABELAS - DESIGN MODERNO
   ======================================================================== */
body.dark-mode table {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode thead {
    background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%) !important;
}

body.dark-mode th {
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
    font-weight: 600 !important;
    background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode td {
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border) !important;
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode tbody tr {
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode tr:hover {
    background-color: var(--dark-bg-tertiary) !important;
    transition: var(--transition-smooth);
}

body.dark-mode tr:hover td {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Linhas de tabela alternadas */
body.dark-mode tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode tbody tr:nth-child(odd) {
    background-color: var(--dark-bg-card) !important;
}

/* ========================================================================
   LINKS
   ======================================================================== */
body.dark-mode a {
    color: var(--dark-accent-blue) !important;
    text-decoration: none;
    transition: var(--transition-smooth);
}

body.dark-mode a:hover {
    color: var(--dark-accent-blue-hover) !important;
    text-decoration: underline;
}

/* ========================================================================
   SCROLLBAR PERSONALIZADA - ESTILO MODERNO
   ======================================================================== */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--dark-accent-blue) 0%, var(--dark-accent-purple) 100%);
    border-radius: 10px;
    border: 2px solid var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--dark-accent-blue-hover) 0%, #9775fa 100%);
}

/* ========================================================================
   BADGES E TAGS DE STATUS
   ======================================================================== */
body.dark-mode .status-tag,
body.dark-mode .badge {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .selected-sim,
body.dark-mode .status-aprovado,
body.dark-mode .badge-success {
    background: linear-gradient(135deg, rgba(81, 207, 102, 0.2) 0%, rgba(55, 178, 77, 0.2) 100%) !important;
    color: var(--dark-accent-green) !important;
    border-color: var(--dark-accent-green) !important;
}

body.dark-mode .selected-nao,
body.dark-mode .status-reprovado,
body.dark-mode .badge-danger {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(240, 62, 62, 0.2) 100%) !important;
    color: var(--dark-accent-red) !important;
    border-color: var(--dark-accent-red) !important;
}

body.dark-mode .status-pendente,
body.dark-mode .badge-warning {
    background: linear-gradient(135deg, rgba(255, 212, 59, 0.2) 0%, rgba(255, 184, 0, 0.2) 100%) !important;
    color: var(--dark-accent-yellow) !important;
    border-color: var(--dark-accent-yellow) !important;
}

body.dark-mode .status-pendente-claro {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.25) 0%, rgba(10, 162, 192, 0.25) 100%) !important;
    color: #0dcaf0 !important;
    border: 2px solid #0aa2c0 !important;
    font-weight: 700 !important;
}

body.dark-mode .status-pendente-assinatura {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.3) 0%, rgba(123, 31, 162, 0.3) 100%) !important;
    color: #bf5af2 !important;
    border: 2px solid #7b1fa2 !important;
    font-weight: 700 !important;
}

body.dark-mode .status-pendente-delfia {
    background: linear-gradient(135deg, rgba(253, 126, 20, 0.25) 0%, rgba(220, 101, 2, 0.25) 100%) !important;
    color: #fd7e14 !important;
    border: 2px solid #dc6502 !important;
    font-weight: 700 !important;
}

body.dark-mode .status-pendente-avaliação-técnico {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.25) 0%, rgba(17, 122, 139, 0.25) 100%) !important;
    color: #17a2b8 !important;
    border: 2px solid #117a8b !important;
    font-weight: 700 !important;
}

/* ========================================================================
   MODAIS E OVERLAYS
   ======================================================================== */
body.dark-mode .modal-overlay {
    background-color: rgba(15, 20, 25, 0.85) !important;
    backdrop-filter: blur(4px);
}

body.dark-mode .modal-content {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .modal-title {
    color: var(--dark-text-primary) !important;
}

/* ========================================================================
   PREVIEW DE IMAGENS
   ======================================================================== */
body.dark-mode .preview-img,
body.dark-mode img {
    border-color: var(--dark-border) !important;
    box-shadow: var(--dark-shadow) !important;
    opacity: 0.95;
}

body.dark-mode .preview-img:hover,
body.dark-mode img:hover {
    opacity: 1;
    box-shadow: var(--dark-shadow-lg) !important;
}

/* ========================================================================
   CANVAS E ASSINATURAS
   ======================================================================== */
body.dark-mode canvas {
    background-color: white !important;
    border: 2px solid var(--dark-border) !important;
    border-radius: 8px;
}

body.dark-mode .signature-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* ========================================================================
   CARDS E GRIDS
   ======================================================================== */
body.dark-mode .summary-grid,
body.dark-mode .grid-container {
    background-color: transparent !important;
}

body.dark-mode .summary-grid-item,
body.dark-mode .card {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
    transition: var(--transition-smooth);
}

body.dark-mode .summary-grid-item:hover,
body.dark-mode .card:hover {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-light) !important;
    transform: translateY(-2px);
    box-shadow: var(--dark-shadow-lg) !important;
}

/* ========================================================================
   SIDEBAR E NAVEGAÇÃO
   ======================================================================== */
body.dark-mode .sidebar,
body.dark-mode nav {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .sidebar a,
body.dark-mode nav a {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .sidebar a:hover,
body.dark-mode nav a:hover {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-accent-blue) !important;
}

/* ========================================================================
   ALERTAS E NOTIFICAÇÕES
   ======================================================================== */
body.dark-mode .alert,
body.dark-mode .notification {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .alert-success {
    background-color: rgba(81, 207, 102, 0.1) !important;
    border-color: var(--dark-accent-green) !important;
    color: var(--dark-accent-green) !important;
}

body.dark-mode .alert-danger {
    background-color: rgba(255, 107, 107, 0.1) !important;
    border-color: var(--dark-accent-red) !important;
    color: var(--dark-accent-red) !important;
}

/* ========================================================================
   CHECKLISTS E LISTAS
   ======================================================================== */
body.dark-mode .checklist,
body.dark-mode ul,
body.dark-mode ol {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .checklist li,
body.dark-mode ul li,
body.dark-mode ol li {
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* ========================================================================
   CÓDIGOS E PRE
   ======================================================================== */
body.dark-mode pre,
body.dark-mode code {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-accent-green) !important;
    border: 1px solid var(--dark-border) !important;
}

/* ========================================================================
   HR E DIVISORES
   ======================================================================== */
body.dark-mode hr {
    border-color: var(--dark-border) !important;
    opacity: 0.3;
}

/* ========================================================================
   ANIMAÇÕES E TRANSIÇÕES
   ======================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

body.dark-mode {
    animation: fadeIn 0.5s ease-out;
}

/* ========================================================================
   RESPONSIVIDADE
   ======================================================================== */
@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    /* Filtros em mobile - Dark Mode */
    body.dark-mode .filtros-container {
        padding: 15px !important;
    }

    body.dark-mode .filtro-group {
        min-width: 100% !important;
    }

    body.dark-mode .filtro-group select {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .dark-mode-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        bottom: 10px !important;
        right: 10px !important;
    }

    /* Cards de tabela em mobile - Dark Mode */
    body.dark-mode table tr {
        background-color: var(--dark-bg-card) !important;
        border-color: var(--dark-border) !important;
    }

    body.dark-mode table td::before {
        color: var(--dark-text-primary) !important;
    }
}

/* ========================================================================
   ÁREAS DE CONTEÚDO E LISTAS
   ======================================================================== */
body.dark-mode .search-bar,
body.dark-mode .search-container,
body.dark-mode .filter-bar {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .search-input,
body.dark-mode input[type="search"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Lista de items/cards */
body.dark-mode .item-list,
body.dark-mode .list-group,
body.dark-mode .data-list {
    background-color: transparent !important;
}

body.dark-mode .list-item,
body.dark-mode .list-group-item,
body.dark-mode .data-row {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .list-item:hover,
body.dark-mode .list-group-item:hover,
body.dark-mode .data-row:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Headers de seções */
body.dark-mode .section-header,
body.dark-mode .page-header,
body.dark-mode .content-header {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-bottom-color: var(--dark-border) !important;
}

/* Footers */
body.dark-mode footer,
body.dark-mode .footer,
body.dark-mode .page-footer {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-muted) !important;
    border-top-color: var(--dark-border) !important;
}

/* Áreas vazias / placeholders */
body.dark-mode .empty-state,
body.dark-mode .no-data,
body.dark-mode .placeholder {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-muted) !important;
}

/* Separadores */
body.dark-mode .separator,
body.dark-mode .divider {
    background-color: var(--dark-border) !important;
    border-color: var(--dark-border) !important;
}

/* ========================================================================
   FILTROS E CONTROLES DE PAGINAÇÃO
   ======================================================================== */
body.dark-mode .filtros-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .filtro-group label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .filtro-group select {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .filtro-group select:focus {
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15) !important;
}

body.dark-mode .filtro-group select option {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-filtro {
    background: linear-gradient(135deg, var(--dark-accent-blue) 0%, #357abd 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3) !important;
}

body.dark-mode .btn-filtro:hover {
    background: linear-gradient(135deg, var(--dark-accent-blue-hover) 0%, #4a9eff 100%) !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.5) !important;
}

body.dark-mode .btn-limpar {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%) !important;
    color: white !important;
}

body.dark-mode .btn-limpar:hover {
    background: linear-gradient(135deg, #5a6268 0%, #3d4349 100%) !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

/* Controles de Paginação */
body.dark-mode .pagination-container {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: var(--dark-shadow) !important;
}

body.dark-mode .pagination-info {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .pagination-btn {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
    background-color: var(--dark-accent-blue) !important;
    color: white !important;
    border-color: var(--dark-accent-blue) !important;
}

body.dark-mode .pagination-btn:disabled {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-disabled) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .pagination-number {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .pagination-number:hover {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-accent-blue) !important;
}

body.dark-mode .pagination-number.active {
    background: linear-gradient(135deg, var(--dark-accent-blue) 0%, #357abd 100%) !important;
    color: white !important;
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3) !important;
}

/* Consulta Container */
body.dark-mode .consulta-container {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: var(--dark-shadow-lg) !important;
}

body.dark-mode .main-title {
    color: var(--dark-text-primary) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode #pesquisa {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode #pesquisa:focus {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1) !important;
}

body.dark-mode #pesquisa::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.6;
}

/* Table Container */
body.dark-mode .table-container {
    background-color: transparent !important;
}

/* Action Cell Buttons - Dark Mode */
body.dark-mode .button-edit {
    background-color: #f59e0b !important;
    color: #1a1a1a !important;
    border-color: #d97706 !important;
}

body.dark-mode .button-edit:hover {
    background-color: #d97706 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

body.dark-mode .button-sign {
    background-color: #bf5af2 !important;
    color: white !important;
    border-color: #7b1fa2 !important;
}

body.dark-mode .button-sign:hover {
    background-color: #7b1fa2 !important;
    box-shadow: 0 4px 12px rgba(191, 90, 242, 0.5) !important;
}

body.dark-mode .button-delete {
    background-color: #ef4444 !important;
    color: white !important;
    border-color: #dc2626 !important;
}

body.dark-mode .button-delete:hover {
    background-color: #dc2626 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
}

body.dark-mode .button-evaluate {
    background-color: #f59e0b !important;
    color: white !important;
    border-color: #d97706 !important;
}

body.dark-mode .button-evaluate:hover {
    background-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5) !important;
}

/* ========================================================================
   HOMEPAGE ESPECÍFICO - DARK MODE
   ======================================================================== */
/* Menu Toggle Button */
body.dark-mode .menu-toggle {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .menu-toggle svg {
    stroke: var(--dark-text-primary) !important;
}

/* Profile Container */
body.dark-mode .profile-container {
    background-color: var(--dark-bg-card) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .profile-name {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .profile-icon {
    border: 2px solid var(--dark-border) !important;
}

/* Dropdown Menu */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .dropdown-menu p {
    color: var(--dark-text-primary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-menu button {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .dropdown-menu button:hover {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-accent-blue) !important;
}

/* Sidebar */
body.dark-mode .sidebar {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .sidebar-header {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .nav-menu {
    background-color: transparent !important;
}

body.dark-mode .nav-item a {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .nav-item a:hover,
body.dark-mode .nav-item a.active {
    background-color: var(--dark-accent-red) !important;
    color: white !important;
}

/* Dashboard Header */
body.dark-mode .dashboard-header {
    background-color: transparent !important;
}

body.dark-mode .greeting-title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .greeting-subtitle {
    color: var(--dark-text-secondary) !important;
}

/* Dashboard Grid e Cards */
body.dark-mode .dashboard-grid {
    background-color: transparent !important;
}

body.dark-mode .dashboard-grid .card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .dashboard-grid .card:hover {
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}

body.dark-mode .card-title {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .card-value {
    color: var(--dark-accent-blue) !important;
    text-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
}

/* Tabela de Checklists Recentes */
body.dark-mode .table-container {
    background-color: transparent !important;
}

body.dark-mode .table-container table {
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode .table-container th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .table-container td {
    color: var(--dark-text-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .table-container tbody tr:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .table-container tbody tr:hover td {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Tags de Status na Homepage */
body.dark-mode .status-tag {
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 15px !important;
}

body.dark-mode .status-pendente {
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: #ffc107 !important;
    border: 2px solid #ffc107 !important;
}

body.dark-mode .status-aprovado {
    background-color: rgba(40, 167, 69, 0.25) !important;
    color: #28a745 !important;
    border: 2px solid #28a745 !important;
}

body.dark-mode .status-reprovado {
    background-color: rgba(220, 53, 69, 0.25) !important;
    color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
}

body.dark-mode .status-pendente-avaliação-técnico {
    background-color: rgba(23, 162, 184, 0.25) !important;
    color: #17a2b8 !important;
    border: 2px solid #17a2b8 !important;
}

/* Developer Text */
body.dark-mode .developer-text {
    color: var(--dark-text-muted) !important;
}

/* ========================================================================
   CONSULTA PAGE - BOTÕES DE AÇÃO
   ======================================================================== */
/* Botões de ação nas linhas da tabela */
body.dark-mode .action-buttons {
    background-color: transparent !important;
}

body.dark-mode .action-buttons button,
body.dark-mode .action-buttons a {
    margin: 2px !important;
}

/* Garantir que todos os botões sejam visíveis */
body.dark-mode .button-view,
body.dark-mode .button-edit,
body.dark-mode .button-delete,
body.dark-mode .button-sign,
body.dark-mode .button-evaluate {
    border: 2px solid !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Botão View - Azul */
body.dark-mode .button-view {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

body.dark-mode .button-view:hover {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6) !important;
}

/* Botão Edit - Laranja */
body.dark-mode .button-edit {
    background-color: #f59e0b !important;
    color: #1a1a1a !important;
    border-color: #d97706 !important;
}

body.dark-mode .button-edit:hover {
    background-color: #d97706 !important;
    color: #000000 !important;
    border-color: #b45309 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6) !important;
}

/* Botão Delete - Vermelho */
body.dark-mode .button-delete {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

body.dark-mode .button-delete:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6) !important;
}

/* Botão Sign - Roxo */
body.dark-mode .button-sign {
    background-color: #a855f7 !important;
    color: #ffffff !important;
    border-color: #9333ea !important;
}

body.dark-mode .button-sign:hover {
    background-color: #9333ea !important;
    border-color: #7e22ce !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.6) !important;
}

/* Botão Evaluate - Amarelo/Dourado */
body.dark-mode .button-evaluate {
    background-color: #f59e0b !important;
    color: #1a1a1a !important;
    border-color: #d97706 !important;
}

body.dark-mode .button-evaluate:hover {
    background-color: #d97706 !important;
    color: #000000 !important;
    border-color: #b45309 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6) !important;
}

/* ========================================================================
   FORMULÁRIOS - DARK MODE
   ======================================================================== */
/* Formulários de checklist */
body.dark-mode .form-section {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .form-section-title {
    color: var(--dark-text-primary) !important;
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .form-row {
    background-color: transparent !important;
}

body.dark-mode .form-field label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .required-star {
    color: var(--dark-accent-red) !important;
}

/* Radio buttons container */
body.dark-mode .radio-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .radio-option {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .radio-option:hover {
    background-color: var(--dark-bg-hover) !important;
    border-color: var(--dark-accent-blue) !important;
}

body.dark-mode .radio-option.selected {
    background-color: var(--dark-accent-blue) !important;
    color: white !important;
    border-color: var(--dark-accent-blue) !important;
}

/* File upload */
body.dark-mode .file-upload-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .file-upload-label {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .file-name {
    color: var(--dark-accent-blue) !important;
}

/* Preview de imagens */
body.dark-mode .image-preview {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .remove-image-btn {
    background-color: var(--dark-accent-red) !important;
    color: white !important;
}

body.dark-mode .remove-image-btn:hover {
    background-color: #dc2626 !important;
}

/* ========================================================================
   BOTÕES GERAIS - GARANTIR VISIBILIDADE
   ======================================================================== */
/* Todos os botões devem ter contraste adequado */
body.dark-mode button:not([class*="button-"]):not(.dark-mode-toggle):not(.menu-toggle) {
    background: linear-gradient(135deg, var(--dark-accent-blue) 0%, #357abd 100%) !important;
    color: white !important;
    border: 2px solid transparent !important;
    font-weight: 600 !important;
}

body.dark-mode button:not([class*="button-"]):not(.dark-mode-toggle):not(.menu-toggle):hover {
    background: linear-gradient(135deg, var(--dark-accent-blue-hover) 0%, #4a9eff 100%) !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.5) !important;
}

/* Botões desabilitados */
body.dark-mode button:disabled,
body.dark-mode .btn:disabled {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    color: var(--dark-text-disabled) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* Links que parecem botões */
body.dark-mode a.btn,
body.dark-mode a[role="button"] {
    background: linear-gradient(135deg, var(--dark-accent-blue) 0%, #357abd 100%) !important;
    color: white !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

body.dark-mode a.btn:hover,
body.dark-mode a[role="button"]:hover {
    background: linear-gradient(135deg, var(--dark-accent-blue-hover) 0%, #4a9eff 100%) !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.5) !important;
}

/* ========================================================================
   IMPRESSÃO - DESABILITAR DARK MODE
   ======================================================================== */
@media print {
    body.dark-mode {
        background: white !important;
        color: black !important;
    }

    body.dark-mode * {
        background: white !important;
        color: black !important;
        border-color: #ccc !important;
    }

    .dark-mode-toggle {
        display: none !important;
    }
}