/* ==========================================================================
   1. ESTILOS GLOBAIS E VARIÁVEIS
   ========================================================================== */

/* 🎨 VARIÁVEIS DE TEMA - Light Mode (Padrão) */
:root {
    /* Cores principais */
    --primary-color: #0066cc;           /* Azul mais vibrante e moderno */
    --primary-hover-color: #0052a3;     /* Hover mais escuro */
    --secondary-color: #6c757d;         /* Cinza neutro */
    --secondary-hover-color: #5a6268;   /* Hover mais escuro */
    --danger-color: #dc3545;
    --success-color: #198754;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    
    /* Cores da logo Oasis */
    --oasis-green-dark: #008B8B;
    --oasis-green-light: #40E0D0;
    --background-gradient: linear-gradient(135deg, #008B8B 0%, #00CED1 50%, #40E0D0 100%);
    
    /* Tema Light Mode (Padrão) */
    --bg-primary: #ffffff;           /* Fundo branco */
    --bg-secondary: #f8f9fa;         /* Fundo cinza clarinho */
    --bg-elevated: #ffffff;          /* Fundo elevado branco */
    --bg-hover: #e9ecef;             /* Fundo ao passar mouse */
    --text-primary: #212529;         /* Texto escuro */
    --text-secondary: #495057;       /* Texto secundário */
    --text-muted: #6c757d;           /* Texto desbotado */
    --border-color: #dee2e6;         /* Bordas claras */
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);  /* Sombra suave */
    
    /* Sidebar Light */
    --sidebar-bg: #212529;           /* Sidebar escura para contraste */
    --sidebar-text: #adb5bd;
    --sidebar-text-hover: #ffffff;
    
    /* Estados */
    --light-gray-bg: #f8f9fa;
    --text-color: #495057;
    --success-bg: #d1e7dd;
    --success-text: #0f5132;
    --error-bg: #f8d7da;
    --error-text: #842029;
    --warning-bg: #fff3cd;
    --warning-text: #664d03;
}

/* 🌙 VARIÁVEIS DE TEMA - Dark Mode */
[data-theme="dark"] {
    /* Tema Dark Mode */
    --bg-primary: #1a1d23;           /* Fundo principal escuro */
    --bg-secondary: #23262e;         /* Fundo secundário (cards, painéis) */
    --bg-elevated: #2c3038;          /* Fundo elevado (hover, popups) */
    --bg-hover: #363940;             /* Fundo ao passar mouse */
    --text-primary: #e4e6eb;         /* Texto principal claro */
    --text-secondary: #b0b3b8;       /* Texto secundário */
    --text-muted: #8a8d91;           /* Texto desbotado */
    --border-color: #3a3d44;         /* Bordas sutis */
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    
    /* Sidebar Dark */
    --sidebar-bg: #212529;
    --sidebar-text: #adb5bd;
    --sidebar-text-hover: #ffffff;
    
    /* Estados */
    --light-gray-bg: #2c3038;        /* Substitui fundo cinza claro */
    --text-color: #e4e6eb;           /* Texto geral */
    --success-bg: #1c3d2a;
    --success-text: #4ade80;
    --error-bg: #3d1c1c;
    --error-text: #f87171;
    --warning-bg: #3d321c;
    --warning-text: #fbbf24;
}

* { box-sizing: border-box; }


/* ==========================================================================
   MELHORIAS DE TIPOGRAFIA
   ========================================================================== */

body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background-color: var(--light-gray-bg);
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-top: 0;
    color: var(--text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 1rem;
    line-height: 1.7;
}


body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background-color: var(--light-gray-bg);
    color: var(--text-color);
    font-size: 16px;
}

/* <<< INÍCIO DA MELHORIA: Regra global para imagens responsivas >>> */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaços extras abaixo da imagem */
}
/* <<< FIM DA MELHORIA >>> */

/* Classe para travar a rolagem quando um modal está aberto */
.body-modal-open {
    overflow: hidden;
}
/* ==========================================================================
   2. TELA DE LOGIN (NOVO LAYOUT)
   ========================================================================== */
.login-split-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background-color: #f0f2f5;
}

.login-branding {
    flex: 1;
    background: var(--background-gradient);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 30px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.login-branding .login-logo {
    max-width: 200px;
    margin-bottom: 20px;
}

.login-branding h1 {
    font-size: 2.8em;
    margin-bottom: 10px;
    font-weight: 700;

/* CORREÇÃO A: Cor do texto de boas-vindas para branco */
.login-branding h1,
.login-branding p {
    color: #ffffff !important; /* Força a cor branca */
    text-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Sombra para legibilidade */
}
}

.login-branding p {
    font-size: 1.2em;
    max-width: 400px;
    line-height: 1.5;
}

.login-form-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.login-box {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.login-box h2 {
    margin-bottom: 30px;
    color: var(--secondary-color);
    font-size: 2em;
}

.login-box .input-group {
    margin-bottom: 25px;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
}
.login-box .input-group .icon {
    position: absolute;
    left: 15px;
    color: #a0a0a0;
    font-size: 18px;
    z-index: 1;
}
/* CORREÇÃO B: Campos de input claros e com padding ajustado */
.login-box .input-group input {
    width: 100%;
    padding: 12px 12px 12px 45px; /* Padding ajustado para o ícone */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--bg-elevated); /* Fundo claro */
    color: var(--text-primary); /* Texto escuro */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-box .input-group input::placeholder {
    color: var(--text-muted); /* Placeholder com cor de contraste */
}
.login-box .input-group input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.login-box .input-group label {
    display: none;
}

.login-box .btn-login {
    width: 100%;
    padding: 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: 15px;
}
.login-box .btn-login:hover { background-color: var(--primary-hover-color); transform: translateY(-2px); }
.login-box .error-message { color: var(--danger-color); margin-top: 20px; min-height: 20px; font-weight: 500; }
.login-box .forgot-password { display: block; margin-top: 20px; color: var(--primary-color); text-decoration: none; font-size: 0.9em; }
.login-box .forgot-password:hover { text-decoration: underline; }

/* ==========================================================================
   3. LAYOUT GERAL DAS TELAS INTERNAS (DESKTOP)
   ========================================================================== */
.layout-container { display: flex; height: 100vh; position: relative; }

.sidebar { 
    width: 260px; 
    background-color: var(--sidebar-bg); 
    color: var(--sidebar-text); 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    transition: transform 0.3s ease-in-out; 
    z-index: 1000;
    height: 100vh; /* Garante que a sidebar ocupe a altura total da tela */
}

.main-wrapper { flex-grow: 1; display: flex; flex-direction: column; width: 100%; height: 100vh; min-width: 0; }
.main-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background-color: #ffffff; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.main-content { flex-grow: 1; padding: 30px; overflow-y: auto; }
.header-left { display: flex; align-items: center; gap: 15px; }
.sidebar-header { 
    display: flex; 
    align-items: center; 
    padding: 20px; 
    border-bottom: 1px solid #343a40; 
    flex-shrink: 0; /* Impede que o cabeçalho encolha */
}
.logo-icon { font-size: 32px; color: var(--primary-color); margin-right: 15px; }
.logo-text { font-size: 18px; font-weight: bold; color: var(--sidebar-text-hover); line-height: 1.2; }

/* INÍCIO DA CORREÇÃO ESTRUTURAL FINAL */
.sidebar-nav { 
    flex-grow: 1; /* Faz a área de navegação ocupar todo o espaço vertical disponível */
    min-height: 0; /* Correção crucial para o funcionamento do overflow em flex containers */
    overflow-y: auto; /* ATIVA A BARRA DE ROLAGEM para todo o conteúdo da navegação */
    padding: 20px 0; /* Adiciona um respiro no início e no final da lista */
}
/* FIM DA CORREÇÃO ESTRUTURAL FINAL */

.nav-title { padding: 10px 20px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #6c757d; }

.nav-item { 
    position: relative; 
    display: flex; 
    align-items: center; 
    padding: 12px 20px;
    color: var(--sidebar-text); 
    text-decoration: none; 
    transition: background-color 0.2s, color 0.2s; 
}
.nav-item:hover, .nav-item.active { 
    background-color: #343a40; 
    color: var(--sidebar-text-hover); 
}
.nav-item i { 
    width: 20px; 
    margin-right: 15px; 
    text-align: center; 
    font-size: 18px; 
}

/* Regra para o link de Sair, adicionando uma borda superior para separação visual */
.nav-item-logout {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #343a40;
}

.nav-item-trigger {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}
.nav-item-trigger .nav-item-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}
.nav-item-group.is-open > .nav-item-trigger .nav-item-arrow {
    transform: rotate(180deg);
}

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,0.2);
    transition: max-height 0.4s ease-out;
}
.nav-item-group.is-open > .nav-submenu {
    max-height: 900px; /* Mantém um valor alto para a animação */
}

.nav-submenu-item {
    padding-left: 30px;
}
.nav-submenu-item i {
    font-size: 16px;
}

.sidebar-footer { display: none; } /* Oculta o antigo rodapé, que não é mais usado */

.header-title h2 { margin: 0; font-size: 24px; color: var(--secondary-color); }
.header-title p { margin: 0; font-size: 14px; color: var(--secondary-color); }
.menu-toggle { display: none; }

/* ==========================================================================
   4. COMPONENTES COMUNS (FORMULÁRIOS, TABELAS, BOTÕES)
   ========================================================================== */
.main-content .content-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.main-content .content-header h1 { margin: 0; display: flex; align-items: center; gap: 10px; }
.main-content .content-header p { margin: 5px 0 0; color: var(--secondary-color); }
.panel { background: #ffffff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin-bottom: 25px; }

/* INÍCIO DAS MELHORIAS DE UX (Seção 4) */
.panel h2 { 
    margin-top: 0; 
    margin-bottom: 20px;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    color: var(--secondary-color);
    font-size: 1.3em; /* Fonte ligeiramente reduzida para acomodar a busca */
}
/* Novas regras para estilizar os campos de busca de forma consistente */
.panel-search-wrapper {
    position: relative;
    margin-bottom: 15px;
}
.panel-search-wrapper .fa-search {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #adb5bd;
    /* MELHORIA 2: Impede que o ícone interfira no clique e sobreponha o texto */
    pointer-events: none; /* Permite clicar através do ícone */
    z-index: 1; /* Garante que fica atrás do texto digitado */
}
.panel-search-wrapper input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.panel-search-wrapper input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Correção específica para campo de pesquisa do bloco Indicações */
#category-search {
    padding-left: 40px !important; /* Garante espaçamento adequado para o ícone de lupa */
}
/* FIM DAS MELHORIAS DE UX (Seção 4) */

.form-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; }
.form-group { flex: 1; min-width: 250px; display: flex; flex-direction: column; }
.form-group label { margin-bottom: 8px; font-weight: 600; font-size: 14px; color: var(--text-color); }
.form-group input, 
.form-group select, 
.form-group textarea { padding: 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 16px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }
.form-group label .fa-info-circle { color: #6c757d; cursor: help; margin-left: 5px; }
.form-group-static { flex: 1; min-width: 250px; }
.form-group-static label { margin-bottom: 8px; font-weight: 600; font-size: 14px; color: var(--text-color); display: block; }
.form-group-static-placeholder, .form-group-static p { margin: 0; padding: 12px; background-color: var(--light-gray-bg); border: 1px solid transparent; border-radius: 6px; min-height: 48px; display: flex; align-items: center; }
.form-group-static-placeholder strong { color: var(--danger-color); }
#destinatario-container > select { width: 100%; padding: 11px; border: 1px solid #ced4da; border-radius: 6px; font-size: 16px; font-family: inherit; background-color: white; }
.permissions-fieldset { border: 1px solid var(--border-color); border-radius: 6px; padding: 15px; margin-top: 10px; }
.permissions-fieldset legend { font-weight: 600; padding: 0 10px; }
.permissions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 15px; }
.checkbox-label input { margin-right: 10px; width: 18px; height: 18px; }
.form-actions { margin-top: 25px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { padding: 12px 22px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.2s, transform 0.1s; }
.btn:active { transform: scale(0.98); }
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-hover-color); }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5a6268; }
.table-container table { width: 100%; border-collapse: collapse; }
.table-container th, .table-container td { padding: 15px; border-bottom: 1px solid #e9ecef; text-align: left; vertical-align: middle; }
.table-container thead th { background-color: var(--sidebar-bg); color: white; font-size: 14px; text-transform: uppercase; }
.status { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.status.ativo { background-color: var(--success-bg); color: var(--success-text); }
.status.inativo { background-color: var(--error-bg); color: var(--error-text); }
.status.aguardando { background-color: var(--warning-bg); color: var(--warning-text); }
.btn-icon { background: transparent; border: none; cursor: pointer; font-size: 18px; padding: 8px; color: var(--secondary-color); transition: color 0.2s; }
.btn-icon.btn-edit:hover { color: var(--primary-color); }
.btn-icon.btn-toggle-status:hover { color: var(--danger-color); }
.message { margin-top: 15px; padding: 12px; border-radius: 6px; }
.message.success { background-color: var(--success-bg); color: var(--success-text); }
.message.error { background-color: var(--error-bg); color: var(--error-text); }
.pagination-container { margin-top: 20px; text-align: center; }
.pagination-info { margin: 0 15px; font-weight: bold; }
.spinner-container { display: flex; justify-content: center; align-items: center; padding: 40px; }
.spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--primary-color); animation: spin 1s ease infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==========================================================================
   5. ESTILOS DA TELA DE ESTRUTURA
   ========================================================================== */
.structure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; align-items: flex-start; }
.structure-form { display: flex; gap: 10px; margin-bottom: 20px; }
.structure-form input { flex-grow: 1; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 16px; }
.structure-form button { flex-shrink: 0; }
.structure-list { list-style-type: none; padding: 0; margin: 0; max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; }
.structure-list li { padding: 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; font-weight: 500; }
.structure-list li:last-child { border-bottom: none; }
.structure-list li:hover { background-color: var(--light-gray-bg); }
.structure-list li.active { background-color: var(--primary-color); color: white; font-weight: bold; border-color: var(--primary-color); }
#apartamentos-placeholder { padding: 40px 20px; text-align: center; color: #6c757d; background-color: var(--light-gray-bg); border-radius: 6px; }

/* ==========================================================================
   6. ESTILOS DA GRID DE ENTREGAS
   ========================================================================== */
.table-container td.actions-cell { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.btn-action-grid { padding: 6px 12px; font-size: 12px; font-weight: bold; border-radius: 4px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s; }
.btn-action-grid i { font-size: 14px; }
.btn-action-grid.pending { background-color: #fff; color: var(--secondary-color); border-color: #ccc; }
.btn-action-grid.pending:hover { background-color: var(--secondary-color); color: white; border-color: var(--secondary-color); }
.btn-action-grid.confirmed { background-color: var(--success-color); color: white; border-color: var(--success-color); cursor: default; }
.btn-action-grid:disabled { opacity: 0.7; cursor: not-allowed !important; }
.btn-action-grid:disabled:hover { background-color: var(--secondary-color); color: white; }
.btn-action-grid.confirmed:disabled:hover { background-color: var(--success-color); }

/* ==========================================================================
   7. DETALHES DE ENTREGAS (TELA DE PENDENTES E HISTÓRICO)
   ========================================================================== */
.detalhes-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }

/* <<< INÍCIO DA MELHORIA: Estilos para o novo layout de fotos >>> */

/* Container geral para todas as fotos */
#foto-entrega {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CORREÇÃO 4: Modificado para alinhar fotos verticalmente (uma em cima da outra) */
.fotos-wrapper {
    display: flex;
    flex-direction: column; /* Mudado de row (padrão) para column para empilhar verticalmente */
    gap: 15px;
}

/* Estilo individual para cada item de foto (título + imagem) */
.foto-item {
    /* CORREÇÃO 4: Removido flex: 1 para permitir que cada item use seu tamanho natural */
    /* flex: 1; - REMOVIDO */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%; /* Garante que cada foto use toda a largura disponível */
}

.foto-item h4 {
    margin: 0;
    font-size: 1em;
    color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Estilo consistente para TODAS as imagens de detalhe */
#foto-entrega img { 
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    background-color: #f0f0f0;
    cursor: zoom-in; /* Adiciona o cursor de lupa para indicar que é clicável */
    transition: transform 0.2s ease-in-out;
}

#foto-entrega img:hover {
    transform: scale(1.03); /* Efeito sutil de zoom ao passar o mouse */
}
/* <<< FIM DA MELHORIA >>> */

.clickable-row { cursor: pointer; }
.clickable-row:hover { background-color: #f1f1f1; }
.clickable-row.active { background-color: var(--success-bg); }
.hidden { display: none; }
.panel-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.filter-form { display: flex; align-items: flex-end; gap: 15px; flex-wrap: wrap; }
.filter-form .form-group { display: flex; flex-direction: column; gap: 5px; }
.filter-form label { font-size: 12px; font-weight: bold; color: var(--secondary-color); }
.filter-form select { padding: 8px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; background-color: white; }
.filter-form .btn { padding: 8px 16px; font-size: 14px; }

.filter-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
.export-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
/* ==========================================================================
   8. RESPONSIVIDADE (MOBILE-FIRST)
   ========================================================================== */
@media (max-width: 992px) {
    .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 1000; transform: translateX(-100%); }
    .sidebar.is-visible { transform: translateX(0); box-shadow: 0 0 20px rgba(0,0,0,0.2); }
    .main-wrapper { width: 100%; }
    .menu-toggle { display: inline-block; font-size: 24px; background: none; border: none; cursor: pointer; color: var(--primary-color); }
    .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; }
    .overlay.hidden { display: none; }
    .login-split-container { flex-direction: column; }
    .login-branding { flex: 0; padding: 25px 20px; min-height: auto; }
    .login-branding h1 { font-size: 1.8em; margin-bottom: 8px; }
    .login-branding p { font-size: 0.95em; }
    .login-branding .login-logo { max-width: 120px; margin-bottom: 15px; }
    .login-form-wrapper { flex-grow: 1; align-items: flex-start; padding: 20px; }
    .login-box { padding: 30px 20px; box-shadow: none; border-radius: 0; margin: 0; max-width: 100%; width: 100%; }
    .login-box h2 { font-size: 1.6em; margin-bottom: 25px; }
    .structure-grid, .detalhes-grid { grid-template-columns: 1fr; }
    .main-content { padding: 15px; }
    .main-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px; }
    .header-left, .user-info { width: 100%; }
    
    /* <<< INÍCIO DA MELHORIA: Ajuste no alinhamento para o novo layout do user-info >>> */
    .user-info { 
        justify-content: flex-end; 
        display: flex; 
        align-items: flex-end; /* Garante o alinhamento correto do bloco à direita */
    }
    /* <<< FIM DA MELHORIA >>> */

    .content-header h1 { font-size: 22px; }
    .form-row { flex-direction: column; gap: 15px; }
    .structure-form { flex-direction: column; align-items: stretch; gap: 10px; }
    .structure-form button { width: 100%; }
    .panel-header { flex-direction: column; align-items: stretch; }
    
    .guide-container .panel-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .filter-form { flex-direction: column; align-items: stretch; }
    .filter-form .form-group, .filter-form .form-actions { width: 100%; }
    .filter-form .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .table-container thead { display: none; }
    .table-container tr { display: block; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; padding: 15px; }
    .table-container td { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border-color); text-align: right; }
    .table-container td:last-child { border-bottom: none; }
    .table-container td::before { content: attr(data-label); font-weight: bold; margin-right: 15px; text-align: left; }
    .table-container td.actions-cell { flex-direction: column; align-items: stretch; }
    .table-container td.actions-cell > * { width: 100%; justify-content: center; margin-bottom: 5px; }
    .table-container td.actions-cell .btn-icon { width: auto; border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; }
    .table-container td.actions-cell .btn-icon:last-child { margin-bottom: 0; }
    .pagination-container { display: flex; flex-direction: column; gap: 10px; }
    .pagination-container .btn { width: 100%; }
    .feedback-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .remetente-info, .contato-details { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
    
    .feedback-meta { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

    .feedback-footer { flex-direction: column; align-items: flex-start; gap: 15px; }
    .feedback-actions { width: 100%; }
    .btn-action-feedback { width: 100%; justify-content: center; }
    .registration-container { padding: 15px; align-items: flex-start; }
    .registration-box { padding: 25px 20px; box-shadow: none; border-radius: 0; }

    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    /* CORREÇÃO 3: GRIDS E TABELAS RESPONSIVAS */
    
    /* Estilo base para a "linha" que vira um card */
    .table-container tr {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 15px;
        background-color: var(--bg-secondary); /* Fundo do tema */
        box-shadow: var(--shadow);
    }

    .table-container td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dashed var(--border-color);
        text-align: right;
        color: var(--text-primary); /* Cor do texto do valor */
    }

    .table-container td:last-child {
        border-bottom: none;
    }

    /* Estilo do "rótulo" (ex: "Destinatário:") */
    .table-container td::before {
        content: attr(data-label);
        font-weight: 600; /* Destaque para o rótulo */
        margin-right: 15px;
        text-align: left;
        color: var(--text-secondary); /* Cor secundária para o rótulo */
        font-size: 0.9em;
    }

    /* ========================================================================
       CORREÇÃO DARK MODE MOBILE: Grids/Tabelas com fundo escuro e texto claro
       ======================================================================== */
    
    /* Fundo escuro para os cards das tabelas no dark mode mobile */
    [data-theme="dark"] .table-container tr {
        background-color: #2d3748 !important; /* Fundo escuro dos cards */
        border-color: #4a5568 !important;     /* Borda dos cards */
    }

    /* Texto claro para os valores das células no dark mode mobile */
    [data-theme="dark"] .table-container td {
        color: #e2e8f0 !important;            /* Texto claro dos valores */
        border-bottom-color: #4a5568 !important; /* Borda entre linhas */
    }

    /* Texto dos rótulos (labels) no dark mode mobile */
    [data-theme="dark"] .table-container td::before {
        color: #a0aec0 !important;            /* Rótulo menos brilhante mas legível */
    }
    .export-actions {
        justify-content: flex-end;
        width: 100%;
    }
    .export-actions .btn {
        flex-grow: 1;
    }

    /* ========================================================================
       🚀 OTIMIZAÇÃO MOBILE: REDUÇÃO DE ESPAÇAMENTO EM FORMULÁRIOS
       Objetivo: Aumentar quantidade de campos visíveis sem rolar
       Data: 2025-10-20
       ======================================================================== */
    
    /* ========================================================================
       🚀 OTIMIZAÇÃO MOBILE AGRESSIVA: REDUÇÃO MÁXIMA DE ESPAÇAMENTOS
       Objetivo: Maximizar campos visíveis sem scroll (densidade alta)
       Baseado nas imagens de referência fornecidas
       Data: 2025-10-20
       ======================================================================== */
    
    /* Redução AGRESSIVA entre grupos de campos */
    .form-row {
        gap: 6px !important;           /* 12px → 6px (50% redução) */
        margin-bottom: 4px !important;  /* 10px → 4px (60% redução) */
    }
    
    .form-group {
        margin-bottom: 6px !important;  /* 12px → 6px (50% redução) */
    }
    
    /* Redução AGRESSIVA de espaçamento de labels */
    .form-group label,
    label {
        margin-bottom: 3px !important;  /* 6px → 3px (50% redução) */
    }
    
    /* Redução AGRESSIVA de padding interno de campos */
    .form-group input,
    .form-group select,
    .form-group textarea,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        padding: 6px 10px !important;   /* 10px 12px → 6px 10px (40% redução) */
        margin-bottom: 0 !important;
    }
    
    /* Redução AGRESSIVA de espaçamento de containers */
    .panel,
    .content-wrapper,
    .card-body {
        padding: 10px !important;       /* 15px → 10px (33% redução) */
    }
    
    .registration-box,
    .login-box {
        padding: 12px 10px !important;  /* 20px 15px → 12px 10px (40% redução) */
    }
    
    /* Redução AGRESSIVA de gap em containers flex */
    .structure-form {
        gap: 6px !important;            /* 8px → 6px (25% redução) */
    }
    
    /* Redução AGRESSIVA de espaçamento de botões */
    .btn {
        margin-top: 6px !important;     /* 10px → 6px (40% redução) */
        margin-bottom: 6px !important;  /* 10px → 6px (40% redução) */
        padding: 8px 14px !important;   /* 10px 16px → 8px 14px (20% redução) */
    }
    
    .form-actions .btn,
    .filter-form .form-actions .btn {
        margin-top: 6px !important;     /* 8px → 6px (25% redução) */
        margin-bottom: 6px !important;  /* 8px → 6px (25% redução) */
    }
    
    /* Redução AGRESSIVA em form-group-static */
    .form-group-static {
        margin-bottom: 6px !important;  /* 12px → 6px (50% redução) */
    }
    
    .form-group-static label {
        margin-bottom: 3px !important;  /* 6px → 3px (50% redução) */
    }
    
    .form-group-static-placeholder,
    .form-group-static p {
        padding: 6px 10px !important;   /* 10px 12px → 6px 10px (40% redução) */
        min-height: 38px !important;    /* 42px → 38px */
    }
    
    /* Redução AGRESSIVA de radio groups */
    .form-group-radio {
        margin-bottom: 6px !important;  /* 12px → 6px (50% redução) */
    }
    
    .form-group-radio .radio-group {
        gap: 6px !important;            /* 10px → 6px (40% redução) */
    }
    
    /* Redução AGRESSIVA de textarea */
    textarea {
        padding: 6px 10px !important;   /* 10px 12px → 6px 10px (40% redução) */
        min-height: 60px !important;    /* 80px → 60px (25% redução) */
    }
    
    /* Redução AGRESSIVA de content-header */
    .content-header {
        margin-bottom: 8px !important;  /* 12px → 8px (33% redução) */
        padding-bottom: 6px !important; /* 10px → 6px (40% redução) */
    }
    
    .content-header h1 {
        margin-bottom: 6px !important;  /* 8px → 6px (25% redução) */
    }
    
    /* Redução AGRESSIVA de filter-form */
    .filter-form {
        gap: 6px !important;            /* 10px → 6px (40% redução) */
        margin-bottom: 10px !important; /* 15px → 10px (33% redução) */
    }
    
    .filter-form .form-group {
        margin-bottom: 6px !important;  /* 10px → 6px (40% redução) */
    }
    
    /* Redução AGRESSIVA de panel-content */
    .panel-content {
        padding: 8px !important;        /* 12px → 8px (33% redução) */
    }
    
    .card-body form {
        padding: 0 !important;
    }

}
/* ==========================================================================
   9. ESTILOS PARA O PAINEL DE FEEDBACKS E MODAL
   ========================================================================== */
.feedback-container { display: flex; flex-direction: column; gap: 1rem; }
.feedback-card { background-color: #ffffff; border: 1px solid var(--border-color); border-left-width: 5px; border-radius: 8px; padding: 1.25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.feedback-card.status-aberto { border-left-color: var(--primary-color); }
.feedback-card.status-lido { border-left-color: #6c757d; }
.feedback-card.status-fechado { border-left-color: var(--success-color); }
.feedback-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e9ecef; }
.remetente-info { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.remetente-info strong { font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.remetente-info a, .remetente-info span { color: var(--text-color); text-decoration: none; transition: color 0.3s; font-size: 0.95em; display: inline-flex; align-items: center; gap: 6px; }
.remetente-info a:hover { color: #218838; }
.contato-details { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.feedback-meta { display: flex; align-items: center; gap: 15px; }
.status-badge { padding: 5px 12px; border-radius: 15px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; }
.status-badge.status-aberto { background-color: var(--primary-color); }
.status-badge.status-lido { background-color: #6c757d; }
.status-badge.status-fechado { background-color: var(--success-color); }

.status-badge.type-erro { background-color: var(--danger-color); }
.status-badge.type-sugestao { background-color: var(--info-color); }

.feedback-date { font-size: 0.9em; color: #6c757d; display: inline-flex; align-items: center; gap: 6px; }
.feedback-body p { margin: 0; line-height: 1.6; word-wrap: break-word; }
.feedback-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e9ecef; }
.feedback-attachment-container { flex-grow: 1; }
.view-image-link { color: var(--primary-color); text-decoration: none; font-weight: bold; }
.view-image-link:hover { text-decoration: underline; }
.btn-action-feedback { padding: 8px 16px; font-size: 14px; font-weight: bold; background-color: var(--secondary-color); color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
.btn-action-feedback:hover { background-color: #5a6268; }

/* <<< INÍCIO DA MELHORIA: Renomeia o seletor antigo e adiciona os estilos para o novo modal de imagem >>> */
#anuncio-modal.modal, #image-modal.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    padding-top: 60px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
}
.modal-content { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
}
#modal-caption { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
    text-align: center; 
    color: #ccc; 
    padding: 10px 0; 
    height: 150px; 
}
.modal-content, #modal-caption { 
    animation-name: zoom; 
    animation-duration: 0.6s; 
}
@keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }
.close-modal { 
    position: absolute; 
    top: 15px; 
    right: 35px; 
    color: #f1f1f1; 
    font-size: 40px; 
    font-weight: bold; 
    transition: 0.3s; 
    cursor: pointer; 
}
.close-modal:hover, .close-modal:focus { color: #bbb; }
/* <<< FIM DA MELHORIA >>> */

/* ==========================================================================
   10. ESTILOS PARA PÁGINAS PÚBLICAS E MODAIS
   ========================================================================== */
.public-page-bg { background: var(--light-gray-bg); }
.registration-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 30px; }
.registration-box { background-color: white; padding: 40px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); width: 100%; max-width: 600px; }
.registration-header { text-align: center; margin-bottom: 25px; }
.registration-header .logo-icon { font-size: 40px; margin-bottom: 10px; color: var(--primary-color); }
.registration-header h2 { margin: 0 0 10px 0; color: var(--secondary-color); }
.validation-message { text-align: center; padding: 20px; }
.validation-message p { font-size: 1.1em; font-weight: 500; }
.validation-message .error-message { color: var(--danger-color); }
.apartamento-info { background-color: var(--light-gray-bg); border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; text-align: center; margin-bottom: 25px; }
.apartamento-info p { margin: 0; font-size: 0.95em; color: var(--text-color); }
.apartamento-info h3 { margin: 5px 0 0 0; font-size: 1.3em; color: var(--primary-color); }
.btn-full-width { width: 100%; }
.success-message { font-size: 1.2em; color: var(--success-text); text-align: center; margin-bottom: 20px; }

/* <<< INÍCIO DA MELHORIA: Estilos do modal de convite movidos para a seção de modais globais >>> */
.modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; }
.modal-header h2 { margin: 0; font-size: 1.5em; }
.modal-body { padding: 10px 0; }
.modal-body textarea { 
    width: 100%; /* Garante que o textarea ocupe todo o espaço */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 1em;
    height: 80px; 
    resize: none; 
    color: var(--text-color); 
    background-color: #fff; 
}
.close-modal-btn { font-size: 28px; line-height: 1; opacity: 0.7; }
.close-modal-btn:hover { opacity: 1; }
/* <<< FIM DA MELHORIA >>> */

.list-item-container { display: flex; justify-content: space-between; align-items: center; }
.btn-invite { color: var(--primary-color); }
.btn-invite:hover { color: var(--primary-hover-color); }
li.active .btn-invite { color: white; }
.list-item-empty { color: #999; font-style: italic; cursor: default; }
.list-item-empty:hover { background-color: transparent; }

/* ==========================================================================
   11. ESTILOS DE ALERTAS E NOTIFICAÇÕES
   ========================================================================== */
.notification-badge {
    background-color: var(--danger-color);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.header-alert {
    background-color: var(--warning-bg);
    border-bottom: 2px solid var(--warning-color);
    padding: 10px 18px; /* Padding ajustado para mobile */
    text-align: center;
    font-size: 09px; /* Tamanho base ajustado */
}

.header-alert a {
    color: var(--warning-text);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em; /* Gap relativo ao tamanho da fonte */
    flex-wrap: wrap; /* Permite que o texto quebre naturalmente se necessário */
    transition: color 0.2s;
}

.header-alert a:hover {
    color: #333;
}

.header-alert strong {
    font-weight: 700;
}

/* INÍCIO DA MELHORIA: Estilos para as partes do alerta */
.header-alert .alert-message {
    margin-right: 0.3em; /* Adiciona um pequeno espaço antes da chamada para ação */
}

.header-alert .alert-cta {
    text-decoration: underline; /* Deixa claro que é a parte clicável */
    font-weight: 600;
}
/* FIM DA MELHORIA */

/* Ajuste para telas maiores */
@media (min-width: 992px) {
    .header-alert {
        padding: 12px 30px;
        font-size: 15px;
    }
}

/* ==========================================================================
   12. ESTILOS PARA FORMULÁRIOS COM OPÇÕES (RADIO BUTTON)
   ========================================================================== */
.form-group-radio .radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 48px; /* Mesma altura dos outros inputs */
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
}
.radio-label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
}
.radio-label input[type="radio"]:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    transform: translate(-50%, -50%);
}

/* Ajuste de responsividade */
@media (max-width: 992px) {
    .header-alert {
        padding: 12px 15px;
        font-size: 14px;
    }
    .header-alert a {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .export-actions {
        justify-content: flex-end;
        width: 100%;
    }
    .export-actions .btn {
        flex-grow: 1;
    }
    .form-group-radio .radio-group {
        gap: 15px;
        justify-content: space-between;
    }
    .radio-label {
        flex-grow: 1; /* Faz as opções ocuparem o espaço */
    }
}

/* ==========================================================================
   13. ESTILOS PARA TELA HOME (GUIA COMERCIAL) E MODAL <DIALOG>
   ========================================================================== */

#category-list-container {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 5px;
    max-height: 500px; /* Aumentado de 240px para 500px para visualizar mais categorias */
    scroll-behavior: smooth; /* Adiciona rolagem suave */
}

#category-list-container ul { list-style-type: none; padding: 0; margin: 0; }
#category-list-container li { padding: 12px 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s, color 0.2s; font-weight: 500; }
#category-list-container li:last-child { border-bottom: none; }
#category-list-container li:hover, #category-list-container li.active { background-color: var(--primary-color); color: white; border-radius: 4px; }
.listing-card { padding: 15px; border-bottom: 1px solid var(--border-color); }
.listing-card:last-child { border-bottom: none; }
.listing-card h3 { margin: 0 0 10px 0; font-size: 1.1em; color: var(--primary-color); }
.listing-card p { margin: 5px 0; display: flex; align-items: center; gap: 8px; }
.listing-card a { color: var(--text-color); text-decoration: none; }
.listing-card a:hover { text-decoration: underline; }

/* 🎨 Carrossel de Banners - SOLUÇÃO PROFISSIONAL com background-image + cover
   ✅ Sem fundos brancos
   ✅ Sem cortes feios
   ✅ Totalmente responsivo
   ✅ Padrão de mercado (Netflix, iFood, Amazon)
*/
#banner-swiper { 
    width: 100%; 
    height: 200px; /* Mobile: altura otimizada para smartphones */
    border-radius: 12px; 
    overflow: hidden; 
    background-color: var(--bg-elevated, #f5f5f5); 
    margin-bottom: 24px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra sutil para destaque */
}

/* 🔹 Slide individual - Usa background-image ao invés de <img> */
.swiper-slide { 
    width: 100%; 
    height: 100%; 
    /* Background será aplicado via JavaScript inline (style="background-image: url(...)") */
    background-size: cover; /* Preenche todo o espaço, cortando bordas se necessário */
    background-position: center; /* Centraliza a imagem (safe area) */
    background-repeat: no-repeat; 
    cursor: pointer; 
    border-radius: 12px;
    transition: transform 0.3s ease; /* Efeito de hover suave */
}

.swiper-slide:hover {
    transform: scale(1.02); /* Zoom sutil no hover (apenas desktop) */
}

/* Remove <img> se ainda existir (fallback) */
.swiper-slide img { 
    display: none !important; 
}

/* 📱 Tablets e telas médias (768px - 1199px) */
@media (min-width: 768px) { 
    #banner-swiper { 
        height: 280px; /* Tablet: altura intermediária */
    } 
}

/* 💻 Desktop e telas grandes (1200px+) */
@media (min-width: 1200px) { 
    #banner-swiper { 
        height: 320px; /* Desktop: altura máxima para melhor visualização */
        max-width: 1400px; /* Limita largura em telas muito grandes */
        margin-left: auto;
        margin-right: auto;
    } 
}

/* 📱 Mobile pequeno (até 480px) */
@media (max-width: 480px) { 
    #banner-swiper { 
        height: 180px; /* Smartphones pequenos: altura reduzida */
        border-radius: 8px; /* Bordas menos arredondadas */
    }
    
    .swiper-slide:hover {
        transform: none; /* Desabilita hover no mobile */
    }
}

/* --- ESTILOS DO MODAL <DIALOG> --- */
#anuncio-modal {
    border: none;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    margin: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#anuncio-modal:not([open]) { display: none; }
#anuncio-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    transition: background-color 0.3s ease;
}
.modal-guia-content {
    background-color: #fefefe;
    padding: 25px;
    position: relative;
    border-radius: 12px;
}
.modal-guia-close {
    background: transparent;
    border: none;
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.modal-guia-close:hover,
.modal-guia-close:focus { color: black; }
#modal-guia-body h2 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.5em;
}

/* INÍCIO DA ALTERAÇÃO: Corrige a quebra de texto dentro do modal */
#modal-guia-body p {
    margin: 12px 0;
    display: flex;
    align-items: flex-start; /* Alinha o ícone ao topo da linha */
    gap: 10px;
    font-size: 1.05em; /* Ajuste fino de fonte */
    line-height: 1.6;
    overflow-wrap: break-word; /* Força a quebra de palavras longas (padrão) */
    word-break: break-all;     /* Garante a quebra em URLs/emails sem espaços */
}
#modal-guia-body p strong {
    white-space: nowrap; /* Impede que o "label" (ex: "Telefone:") quebre */
}

/* CORREÇÃO ADICIONAL: Ícones do modal de anúncio (Crepe) */
#modal-guia-body p .fas {
    color: var(--text-secondary);
}
/* FIM DA ALTERAÇÃO */

#modal-guia-body a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
#modal-guia-body a:hover { text-decoration: underline; }

/* ==========================================================================
   14. ESTILOS ESPECÍFICOS DA PÁGINA HOME
   ========================================================================== */

.home-layout .main-content {
    overflow-y: auto; /* HABILITADO SCROLL */
    display: flex;
    flex-direction: column;
}

.home-layout .guide-container {
    flex-grow: 1;
    min-height: 0;
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr;
    position: relative; /* Contexto para o posicionamento da camada */
}

.home-layout #categories-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.home-layout #listings-section {
    display: none; /* Mantém escondido por padrão */
}

/* Regras de visibilidade e layout */
@media (max-width: 991px) {
    .home-layout .main-content {
    overflow-y: auto; /* HABILITADO SCROLL */
        padding: 15px;
    }

    /* INÍCIO DA VERSÃO FINAL E CORRIGIDA */
    .home-layout .guide-container.details-visible #listings-section {
        display: flex !important;
        flex-direction: column;
        
        /* 1. Posicionamento e dimensionamento da camada COM ALTURA FIXA */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65vh; /* O SEU VALOR DESEJADO ESTÁ DE VOLTA! */
        z-index: 10;

        /* 2. Estilo da camada */
        margin-bottom: 0;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
        
        /* 3. A CORREÇÃO MÁGICA: Bordas arredondadas no topo e overflow */
        border-top-left-radius: 12px;  /* Arredonda o canto superior esquerdo */
        border-top-right-radius: 12px; /* Arredonda o canto superior direito */
        overflow: hidden;              /* Esconde os cantos retos do conteúdo interno */
        
        /* Animação */
        animation: slide-up 0.4s ease-out;
    }
    
    .home-layout .guide-container.details-visible::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 5;
        backdrop-filter: blur(2px);
    }
    
    @keyframes slide-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    /* FIM DA VERSÃO FINAL E CORRIGIDA */
}

@media (min-width: 992px) {
    .home-layout .guide-container {
        grid-template-columns: 350px 1fr;
    }
    .home-layout #listings-section {
        display: none;
        flex-direction: column;
        flex-grow: 1;
        min-height: 0;
    }
    .home-layout .guide-container.details-visible #listings-section {
        display: flex !important;
        /* MELHORIA 1: Adiciona altura máxima e overflow para scroll funcionar no desktop */
        max-height: calc(100vh - 200px); /* Ajusta altura baseada no viewport */
        overflow-y: auto; /* Ativa scroll vertical */
    }
}

#listings-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    /* CORREÇÃO 1: Adicionado padding-top para evitar sobreposição da barra de pesquisa */
    padding-top: 5px;
}

/* CORREÇÃO 5: Estilos para o contador de condôminos na tela de estrutura */
.stats-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.stat-box i {
    font-size: 2.5em;
    color: var(--primary-color);
}

.stat-box h3 {
    margin: 0;
    font-size: 2em;
    color: var(--text-primary);
    font-weight: bold;
}

.stat-box p {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* ==========================================================================
   15. ESTILOS PARA TELA DE CANAIS DE AJUDA
   ========================================================================== */

.help-channels-grid {
    display: grid;
    grid-template-columns: 1fr; /* Layout base de 1 coluna para mobile */
    gap: 25px;
}

/* Em telas maiores, o layout se expande para mais colunas */
@media (min-width: 768px) {
    .help-channels-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.help-card {
    margin-bottom: 0; /* Remove a margem padrão do .panel para alinhar na grid */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.help-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.help-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.help-card-header .fa-phone-alt {
    color: var(--primary-color);
    font-size: 1.5em;
    flex-shrink: 0;
}

.help-card-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: var(--secondary-color);
}

.help-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz esta área ocupar o espaço restante no card */
}

.help-card-description {
    font-size: 0.95em;
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1; /* Ocupa o espaço vertical, alinhando os botões na base */
}

.help-card-phone-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: var(--light-gray-bg);
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: bold;
    color: var(--primary-color);
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
}

.help-card-phone-link:hover {
    background-color: var(--primary-color);
    color: white;
}

.help-card-phone-link span {
    flex-grow: 1;
}

.help-card-phone-link .fa-external-link-alt {
    font-size: 0.7em;
    opacity: 0.7;
    margin-left: 10px;
}

/* ==========================================================================
   16. ESTILOS DO BOTÃO E MODAL DE TROCA DE SENHA
   ========================================================================== */

/* Ajuste no container de informações do usuário para permitir o botão abaixo */
.user-info {
    position: relative;
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: flex-end;  /* Alinha os itens à direita */
    gap: 4px; /* Pequeno espaço entre o nome e o botão */
}

/* Estilo para o novo botão de troca de senha */
.btn-change-password {
    background: none;
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-change-password:hover {
    background-color: var(--light-gray-bg);
    border-color: #adb5bd;
}

/* Overlay do modal (fundo escurecido) */
.modal-overlay {
    display: none; /* Inicia oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* Container do modal (o painel central) */
.modal-container {
    display: none; /* Inicia oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 1050;
    width: 90%;
    max-width: 500px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-container.is-visible {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Reutiliza a classe .panel para manter o estilo consistente */
.modal-container .panel {
    margin-bottom: 0;
}


/* ==========================================================================
   🌓 TOGGLE DARK/LIGHT MODE - Botão e Animações
   ========================================================================== */

.theme-toggle {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--bg-elevated);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: var(--shadow);
    margin-right: 15px;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    fill: var(--text-primary);
}

/* Animação de entrada/saída dos ícones */
[data-theme="light"] .icon-sun {
    opacity: 0;
    transform: scale(0) rotate(90deg);
}

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

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

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

/* Animação de pulso ao clicar */
@keyframes theme-toggle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.theme-toggle-pulse {
    animation: theme-toggle-pulse 0.3s ease-out;
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .theme-toggle {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    
    .theme-toggle svg {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================================
   🎨 AJUSTES DE TEMA PARA ELEMENTOS PRINCIPAIS
   ========================================================================== */

/* Atualiza o corpo do documento para usar as novas variáveis */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Atualiza painéis e cards */
.panel,
.content-wrapper,
.login-box {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Atualiza inputs e selects */
input,
select,
textarea {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* Atualiza tabelas */
table {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

table thead {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

table tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Atualiza o header */
.main-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Sidebar já usa as variáveis corretas */
#main-sidebar {
    background-color: var(--sidebar-bg);
}

.nav-item {
    color: var(--sidebar-text);
}

.nav-item:hover {
    color: var(--sidebar-text-hover);
}

/* Modais */
.modal-container {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Transições suaves para todos os elementos temáticos */
* {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Exceções para animações específicas */
.spinner,
.spinner::before,
.spinner::after,
.theme-toggle,
.theme-toggle svg {
    transition-property: transform, opacity, background-color;
}
/* ==========================================================================
   CORREÇÕES DE CONTRASTE DARK/LIGHT MODE
   Aplicar estas correções ao final do arquivo style.css
   Data: 2025-10-16
   ========================================================================== */

/* 1. CORREÇÃO: Panel (cards) */
.panel {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.panel h2 {
    color: var(--text-primary) !important;
}

/* 2. CORREÇÃO: Login container */
.login-split-container {
    background-color: var(--bg-primary) !important;
}

.login-box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.login-box h2 {
    color: var(--text-primary) !important;
}

.login-box .input-group .icon {
    color: var(--text-secondary) !important;
}

.login-box .input-group input {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 3. CORREÇÃO: Sidebar navigation */
.nav-title {
    color: var(--text-secondary) !important;
}

.nav-item:hover,
.nav-item.active {
    background-color: var(--bg-hover) !important;
    color: var(--sidebar-text-hover) !important;
}

/* 4. CORREÇÃO: Botões secundários */
.btn-secondary {
    background-color: var(--text-secondary) !important;
    color: var(--bg-primary) !important;
}

.btn-secondary:hover {
    background-color: var(--text-muted) !important;
}

/* 5. CORREÇÃO: Tabelas - clickable rows */
.clickable-row:hover {
    background-color: var(--bg-hover) !important;
}

/* 6. CORREÇÃO: Placeholders e textos de ajuda */
#apartamentos-placeholder {
    color: var(--text-secondary) !important;
    background-color: var(--bg-elevated) !important;
}

.form-group label .fa-info-circle {
    color: var(--text-secondary) !important;
}

/* 7. CORREÇÃO: Inputs, selects e textareas - garantir contraste */
.form-group input,
.form-group select,
.form-group textarea {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8 !important;
}

/* 8. CORREÇÃO: Panel search wrapper */
.panel-search-wrapper .fa-search {
    color: var(--text-secondary) !important;
}

.panel-search-wrapper input {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 9. CORREÇÃO: Destinatário container select */
#destinatario-container > select {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 10. CORREÇÃO: Structure list */
.structure-list li:hover {
    background-color: var(--bg-hover) !important;
}

/* 11. CORREÇÃO: Filter form */
.filter-form label {
    color: var(--text-primary) !important;
}

.filter-form select {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 12. CORREÇÃO: Foto entrega background */
#foto-entrega img {
    background-color: var(--bg-elevated) !important;
}

/* 13. CORREÇÃO: Status badges */
.status-badge.status-lido {
    background-color: var(--text-secondary) !important;
}

.btn-action-feedback:hover {
    background-color: var(--bg-hover) !important;
}

/* 14. CORREÇÃO: Feedback card */
.feedback-card.status-lido {
    border-left-color: var(--text-secondary) !important;
}

/* 15. CORREÇÃO: Modal */
.modal-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* 16. CORREÇÃO: Banner swiper */
#banner-swiper,
.swiper-slide {
    background-color: var(--bg-elevated) !important;
}

/* 17. CORREÇÃO: Títulos gerais */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* 18. CORREÇÃO: Parágrafos e spans gerais */
p {
    color: var(--text-primary) !important;
}

/* 19. CORREÇÃO: Labels gerais */
label {
    color: var(--text-primary) !important;
}

/* 20. CORREÇÃO: Table cells */
.table-container td {
    color: var(--text-primary) !important;
}

/* 21. CORREÇÃO: Content header */
.main-content .content-header p {
    color: var(--text-secondary) !important;
}

/* 22. CORREÇÃO: Permissions fieldset */
.permissions-fieldset {
    border-color: var(--border-color) !important;
}

.checkbox-label {
    color: var(--text-primary) !important;
}

/* 23. CORREÇÃO: Structure form input */
.structure-form input {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 24. CORREÇÃO: Garantir que todos os inputs herdem as variáveis */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8 !important;
}

/* 25. CORREÇÃO: Garantir contraste em options de select */
option {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

/* FIM DAS CORREÇÕES */

/* ========================================
   MELHORIAS UX - SEPARAÇÃO VISUAL
   Data: 2025-10-16
   Objetivo: Bordas, sombras e contraste
   ======================================== */

/* 1. CARDS E PAINÉIS - Light Mode */
[data-theme="light"] .panel,
[data-theme="light"] .card,
[data-theme="light"] .content-box,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .stats-card,
[data-theme="light"] .form-container {
    border: 1px solid #d0d0d0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background: var(--bg-secondary) !important;
    border-radius: 8px !important;
}

/* 1. CARDS E PAINÉIS - Dark Mode */
.panel,
.card,
.content-box,
.dashboard-card,
.stats-card,
.form-container {
    border: 1px solid #404040 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    background: var(--bg-secondary) !important;
    border-radius: 8px !important;
}

/* 2. FORMULÁRIOS - INPUTS, SELECTS, TEXTAREAS - Light Mode */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
    border: 1px solid #c0c0c0 !important;
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    outline: none !important;
}

/* 2. FORMULÁRIOS - INPUTS, SELECTS, TEXTAREAS - Dark Mode */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border: 1px solid #505050 !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: #4a9eff !important;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2) !important;
    outline: none !important;
}

/* 3. PLACEHOLDERS - CONTRASTE AUMENTADO - Light Mode */
[data-theme="light"] ::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

[data-theme="light"] ::-webkit-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

[data-theme="light"] ::-moz-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

/* 3. PLACEHOLDERS - CONTRASTE AUMENTADO - Dark Mode */
::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

::-webkit-input-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

::-moz-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* 4. TABELAS - Light Mode */
[data-theme="light"] table {
    border: 1px solid #d0d0d0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

[data-theme="light"] table thead {
    background-color: #f0f0f0 !important;
    border-bottom: 2px solid #c0c0c0 !important;
}

[data-theme="light"] table thead th {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}

[data-theme="light"] table tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;
    transition: background-color 0.2s ease !important;
}

[data-theme="light"] table tbody tr:hover {
    background-color: #f8f8f8 !important;
}

[data-theme="light"] table tbody td {
    padding: 12px 16px !important;
    color: #333333 !important;
}

/* 4. TABELAS - Dark Mode */
table {
    border: 1px solid #404040 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

table thead {
    background-color: #2a2a2a !important;
    border-bottom: 2px solid #505050 !important;
}

table thead th {
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}

table tbody tr {
    border-bottom: 1px solid #353535 !important;
    transition: background-color 0.2s ease !important;
}

table tbody tr:hover {
    background-color: #333333 !important;
}

table tbody td {
    padding: 12px 16px !important;
    color: #e0e0e0 !important;
}

/* 5. MODAIS E ALERTAS - Light Mode */
[data-theme="light"] .modal-content,
[data-theme="light"] .alert,
[data-theme="light"] .notification {
    border: 1px solid #d0d0d0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
}

/* 5. MODAIS E ALERTAS - Dark Mode */
.modal-content,
.alert,
.notification {
    border: 1px solid #404040 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
}

/* 6. CHECKBOXES E RADIO BUTTONS - Light Mode */
[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"] {
    border: 2px solid #999999 !important;
    background-color: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

[data-theme="light"] input[type="checkbox"]:checked,
[data-theme="light"] input[type="radio"]:checked {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

/* 6. CHECKBOXES E RADIO BUTTONS - Dark Mode */
input[type="checkbox"],
input[type="radio"] {
    border: 2px solid #666666 !important;
    background-color: #2a2a2a !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #4a9eff !important;
    border-color: #4a9eff !important;
}

/* 7. BOTÕES SECUNDÁRIOS - Light Mode */
[data-theme="light"] .btn-secondary,
[data-theme="light"] button.secondary {
    border: 1px solid #c0c0c0 !important;
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] button.secondary:hover {
    background-color: #e0e0e0 !important;
    border-color: #a0a0a0 !important;
}

/* 7. BOTÕES SECUNDÁRIOS - Dark Mode */
.btn-secondary,
button.secondary {
    border: 1px solid #505050 !important;
    background-color: #3a3a3a !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-secondary:hover,
button.secondary:hover {
    background-color: #454545 !important;
    border-color: #606060 !important;
}

/* 8. SIDEBAR (MENU LATERAL) - Light Mode */
[data-theme="light"] .sidebar,
[data-theme="light"] nav.sidebar,
[data-theme="light"] aside {
    border-right: 1px solid #d0d0d0 !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

/* 8. SIDEBAR (MENU LATERAL) - Dark Mode */
.sidebar,
nav.sidebar,
aside {
    border-right: 1px solid #404040 !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
}

/* 9. LABELS DE FORMULÁRIO - Light Mode */
[data-theme="light"] label {
    color: #333333 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* 9. LABELS DE FORMULÁRIO - Dark Mode */
label {
    color: #e0e0e0 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* 10. SEPARADORES E DIVISORES - Light Mode */
[data-theme="light"] hr,
[data-theme="light"] .divider {
    border-color: #d0d0d0 !important;
    opacity: 1 !important;
}

/* 10. SEPARADORES E DIVISORES - Dark Mode */
hr,
.divider {
    border-color: #404040 !important;
    opacity: 1 !important;
}

/* 11. ESPAÇAMENTO CONSISTENTE */
.form-group,
.input-group {
    margin-bottom: 16px !important;
}

.section-spacing {
    margin-bottom: 24px !important;
}

/* 12. ESTADOS DISABLED - Light Mode */
[data-theme="light"] input:disabled,
[data-theme="light"] select:disabled,
[data-theme="light"] textarea:disabled,
[data-theme="light"] button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #f0f0f0 !important;
    border-color: #d0d0d0 !important;
}

/* 12. ESTADOS DISABLED - Dark Mode */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

/* FIM DAS MELHORIAS UX */


/* ==========================================================================
   MELHORIAS UI/UX - ÍCONES COLORIDOS
   ========================================================================== */

/* Ícones com cores específicas para melhor identificação visual */
.icon-primary { color: var(--primary-color) !important; }
.icon-success { color: var(--success-color) !important; }
.icon-danger { color: var(--danger-color) !important; }
.icon-warning { color: var(--warning-color) !important; }
.icon-info { color: var(--info-color) !important; }
.icon-secondary { color: var(--secondary-color) !important; }

/* Ícones específicos do sistema com cores */
.fa-home, .fa-house { color: #0066cc; }
.fa-truck, .fa-truck-fast { color: #198754; }
.fa-clipboard-list, .fa-list { color: #ffc107; }
.fa-users, .fa-user-group { color: #0dcaf0; }
.fa-user, .fa-user-circle { color: #6c757d; }
.fa-building, .fa-sitemap { color: #dc3545; }
.fa-clock-rotate-left, .fa-history { color: #6c757d; }
.fa-right-from-bracket, .fa-sign-out-alt { color: #dc3545; }
.fa-plus-circle, .fa-circle-plus { color: #198754; }
.fa-save, .fa-floppy-disk { color: #0066cc; }
.fa-eraser, .fa-times-circle { color: #6c757d; }
.fa-edit, .fa-pencil { color: #ffc107; }
.fa-trash, .fa-trash-alt { color: #dc3545; }
.fa-filter { color: #0dcaf0; }
.fa-tags { color: #ff6b6b; }
.fa-search { color: #6c757d; }

/* ==========================================================================
   MELHORIAS UI/UX - BOTÕES MODERNOS
   ========================================================================== */

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: none;
    letter-spacing: 0.01em;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    border: 2px solid transparent;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border: 2px solid transparent;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
}

.btn-success {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
    color: white;
    border: 2px solid transparent;
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%);
    color: white;
    border: 2px solid transparent;
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

/* ==========================================================================
   MELHORIAS UI/UX - BORDAS PRONUNCIADAS
   ========================================================================== */

.panel {
    background-color: var(--bg-elevated);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.panel:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 102, 204, 0.3);
}

.form-container {
    border: 2px solid var(--border-color);
}

.table-container {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
    border: 2px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ==========================================================================
   MELHORIAS UI/UX - GRID E LAYOUT APRIMORADO
   ========================================================================== */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.guide-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .guide-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MELHORIAS UI/UX - EFEITOS MODERNOS
   ========================================================================== */

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

/* Cards com efeito de elevação */
.card {
    background: var(--bg-elevated);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Itens de lista com hover */
.sidebar-nav a {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
    background-color: var(--bg-hover);
    border-left-color: var(--primary-color);
    transform: translateX(4px);
}

.sidebar-nav a.active {
    border-left-color: var(--primary-color);
    background-color: var(--bg-hover);
}

/* Badges e tags modernos */
.badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-success {
    background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
    color: #0f5132;
}

.badge-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    color: #664d03;
}

.badge-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
    color: #842029;
}

/* Skeleton loading animation */
@keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        var(--bg-hover) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover-color) 100%);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover-color);
}

/* ==========================================================================
   MELHORIAS UI/UX - SIDEBAR APRIMORADA
   ========================================================================== */

.sidebar {
    background: linear-gradient(180deg, #212529 0%, #1a1d23 100%);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
    border-right: 2px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--sidebar-text-hover);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   MELHORIAS UI/UX - TABELAS MODERNAS
   ========================================================================== */

.table-container table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-container thead th {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    color: white;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 16px;
    border-bottom: 3px solid var(--primary-color);
}

/* ========================================================================
   CORREÇÃO MODO LIGHT: Cabeçalhos de tabela claros
   ======================================================================== */

/* Cabeçalhos de tabela no modo LIGHT - gradiente claro */
[data-theme="light"] .table-container thead th {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%) !important;
    color: #1a1a1a !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 16px;
    border-bottom: 3px solid var(--primary-color);
}


.table-container tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.table-container tbody tr:hover {
    background-color: var(--bg-hover);
    transform: scale(1.01);
}

.table-container tbody td {
    padding: 16px;
    vertical-align: middle;
}

/* ==========================================================================
   MELHORIAS UI/UX - RESPONSIVIDADE APRIMORADA
   ========================================================================== */

@media (max-width: 768px) {
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .panel {
        padding: 16px;
        border-radius: 8px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

/* ==========================================================================
   MELHORIAS UI/UX - CORREÇÃO TEMA DARK NAS GRIDS
   ========================================================================== */

/* Correção de contraste para painéis e cards no modo Dark */
[data-theme="dark"] .panel {
    background-color: #2d3748;
    border: 1px solid #4a5568;
}

[data-theme="dark"] .panel h2 {
    color: #e2e8f0;
}

/* Correção para tabelas no modo Dark */
[data-theme="dark"] table {
    background-color: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] table thead {
    background-color: #1a202c;
    border-color: #4a5568;
}

[data-theme="dark"] table thead th {
    color: #e2e8f0;
    border-color: #4a5568;
}

[data-theme="dark"] table tbody tr {
    border-color: #4a5568;
}

[data-theme="dark"] table tbody tr:hover {
    background-color: #374151;
}

[data-theme="dark"] table tbody td {
    color: #e2e8f0;
    border-color: #4a5568;
}

/* Correção para cards de listagem */
[data-theme="dark"] .listing-card {
    background-color: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .listing-card h3 {
    color: #60a5fa;
}

[data-theme="dark"] .listing-card p {
    color: #e2e8f0;
}

[data-theme="dark"] .listing-card a {
    color: #e2e8f0;
}

/* Correção para feedback cards */
[data-theme="dark"] .feedback-card {
    background-color: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .feedback-card h3,
[data-theme="dark"] .feedback-card p,
[data-theme="dark"] .feedback-card span {
    color: #e2e8f0;
}

/* Correção para help cards */
[data-theme="dark"] .help-card {
    background-color: #2d3748;
    border: 1px solid #4a5568;
}

[data-theme="dark"] .help-card h3,
[data-theme="dark"] .help-card p {
    color: #e2e8f0;
}

/* Correção para formulários no modo Dark */
[data-theme="dark"] .form-group label {
    color: #a0aec0;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background-color: #374151;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: #60a5fa;
    background-color: #1f2937;
}

/* Correção para campos de busca */
[data-theme="dark"] .panel-search-wrapper input {
    background-color: #374151;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .panel-search-wrapper input::placeholder {
    color: #6b7280;
}

[data-theme="dark"] .panel-search-wrapper .fa-search {
    color: #9ca3af;
}

/* Correção para filtros */
[data-theme="dark"] .filter-form select {
    background-color: #374151;
    border-color: #4a5568;
    color: #e2e8f0;
}

[data-theme="dark"] .filter-form label {
    color: #a0aec0;
}


/* ==========================================================================
   MELHORIAS UI/UX - CORREÇÃO MENU HAMBURGUER
   ========================================================================== */

/* Melhor contraste para itens ativos no modo Dark */
[data-theme="dark"] .sidebar .nav-item.active {
    background-color: #4a5568;
    color: #ffffff;
    border-left: 4px solid #4299e1;
}

[data-theme="dark"] .sidebar .nav-item {
    color: #e2e8f0;
}

[data-theme="dark"] .sidebar .nav-item:hover {
    background-color: #374151;
    color: #ffffff;
}

[data-theme="dark"] .sidebar .nav-submenu-item.active {
    background-color: #4a5568;
    color: #ffffff;
    border-left: 4px solid #4299e1;
}

[data-theme="dark"] .sidebar .nav-submenu-item {
    color: #e2e8f0;
}

[data-theme="dark"] .sidebar .nav-submenu-item:hover {
    background-color: #374151;
    color: #ffffff;
}

/* CORREÇÃO 2: MENU LATERAL LIGHT MODE - SELEÇÃO VISÍVEL */
/* Sobrescreve o estilo do item ativo APENAS no tema claro */
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .sidebar .nav-item-group.is-open > .nav-item-trigger {
    background-color: #e9ecef; /* Um fundo cinza claro sutil */
    color: var(--primary-color); /* Texto e ícone na cor primária */
    font-weight: 600;
}

[data-theme="light"] .sidebar .nav-submenu-item.active {
    background-color: rgba(0,0,0,0.05);
    color: var(--primary-color);
}


/* ==========================================================================
   MELHORIAS UI/UX - CORREÇÃO MODAL DE ANÚNCIOS
   ========================================================================== */

/* Correção para modais no modo Dark */
[data-theme="dark"] .modal-container,
[data-theme="dark"] .modal-guia-content {
    background-color: #2d3748;
}

[data-theme="dark"] .modal-container h2,
[data-theme="dark"] .modal-container h3,
[data-theme="dark"] .modal-guia-content h2,
[data-theme="dark"] .modal-guia-content h3 {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="dark"] .modal-container p,
[data-theme="dark"] .modal-container span,
[data-theme="dark"] .modal-container label,
[data-theme="dark"] .modal-guia-content p,
[data-theme="dark"] .modal-guia-content span {
    color: #e2e8f0;
}

[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] dialog {
    background-color: #2d3748;
    color: #e2e8f0;
}

[data-theme="dark"] dialog h2,
[data-theme="dark"] dialog h3 {
    color: #ffffff;
}


/* ==========================================================================
   MELHORIAS UI/UX - LAYOUT HORIZONTAL DO HEADER
   ========================================================================== */

/* Layout horizontal para user-info */
.user-info {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-direction: row !important;
}

.user-info > * {
    margin: 0 !important;
}

#user-info-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.btn-change-password {
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 14px;
}


/* ==========================================================================
   MELHORIAS UI/UX - ÍCONES COLORIDOS E MODERNOS
   ========================================================================== */

/* Ícones coloridos no menu */
.sidebar .nav-item i {
    width: 24px;
    text-align: center;
}

/* Início - Verde */
.sidebar a[href="home.html"] i {
    color: #48bb78;
}

/* Registrar Entrega - Azul */
.sidebar a[href="registrar_entrega.html"] i {
    color: #4299e1;
}

/* Entregas Pendentes - Laranja */
.sidebar a[href="entregas_pendentes.html"] i {
    color: #ed8936;
}

/* Minhas Entregas - Roxo */
.sidebar a[href="minhas_entregas.html"] i {
    color: #9f7aea;
}

/* Meu Histórico - Amarelo */
.sidebar a[href="meu_historico.html"] i {
    color: #ecc94b;
}

/* Canais de Ajuda - Teal */
.sidebar a[href="ajuda.html"] i {
    color: #38b2ac;
}

/* Enviar Feedback - Rosa */
.sidebar a[href="feedback.html"] i {
    color: #ed64a6;
}

/* Gerenciamento - Cinza */
.sidebar .nav-item-trigger i {
    color: #a0aec0;
}

/* Colaboradores - Azul */
.sidebar a[href="cad_colaborador.html"] i {
    color: #4299e1;
}

/* Condôminos - Verde */
.sidebar a[href="cad_condomino.html"] i {
    color: #48bb78;
}

/* Estrutura - Laranja */
.sidebar a[href="cad_estrutura.html"] i {
    color: #ed8936;
}

/* Anúncios - Roxo */
.sidebar a[href="gerenciar_anuncios.html"] i {
    color: #9f7aea;
}

/* Categorias - Vermelho */
.sidebar a[href="gerenciar_categorias.html"] i {
    color: #f56565;
}

/* Ajuda - Teal */
.sidebar a[href="gerenciar_ajuda.html"] i {
    color: #38b2ac;
}

/* Histórico Completo - Amarelo */
.sidebar a[href="historico_completo.html"] i {
    color: #ecc94b;
}

/* Painel de Feedbacks - Rosa */
.sidebar a[href="painel_feedbacks.html"] i {
    color: #ed64a6;
}

/* Sair - Vermelho */
.sidebar .nav-item-logout i {
    color: #f56565;
}

/* Manter cores no hover e active */
.sidebar .nav-item:hover i,
.sidebar .nav-item.active i {
    opacity: 1;
}


/* ==========================================================================
   MELHORIAS UI/UX - LIMITES VISUAIS NAS LISTAS
   ========================================================================== */

/* Limites visuais para lista de categorias */
#category-list-container {
    max-height: 600px; /* Aumentado de 400px para 600px para visualizar mais categorias */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    scroll-behavior: smooth; /* Adiciona rolagem suave */
}

/* Scroll customizado */
#category-list-container::-webkit-scrollbar {
    width: 8px;
}

#category-list-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

#category-list-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

#category-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Limites para lista de anúncios */
/* CORREÇÃO 1: Removido max-height fixo para permitir visualização completa das empresas */
#listings-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    scroll-behavior: smooth; /* Adiciona rolagem suave */
    max-height: 70vh; /* Altura máxima de 70% da viewport para manter visibilidade */
    /* max-height: 500px; - REMOVIDO para permitir altura dinâmica */
}

#listings-wrapper::-webkit-scrollbar {
    width: 8px;
}

#listings-wrapper::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

#listings-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

#listings-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Modo Dark para scrollbars */
[data-theme="dark"] #category-list-container::-webkit-scrollbar-track,
[data-theme="dark"] #listings-wrapper::-webkit-scrollbar-track {
    background: #1a202c;
}

[data-theme="dark"] #category-list-container::-webkit-scrollbar-thumb,
[data-theme="dark"] #listings-wrapper::-webkit-scrollbar-thumb {
    background: #4a5568;
}

[data-theme="dark"] #category-list-container::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #listings-wrapper::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* ==========================================================================
   CORREÇÕES CRÍTICAS DE UI/UX MOBILE - MV SOFTWARE OASIS
   Data: 17/10/2025
   Descrição: Correções específicas para problemas de UI/UX em mobile Dark mode
   ========================================================================== */

/* ==========================================================================
   CORREÇÃO 1: LOGIN - TEXTOS BRANCOS E CAMPOS CLAROS
   ========================================================================== */

/* Textos do cabeçalho da tela de login em BRANCO */
.login-branding h1,
.login-branding p,
.login-header h1,
.login-header p,
.login-title,
.login-subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Campos de input CLAROS com bom contraste */
.login-box .input-group input,
.login-form input[type="text"],
.login-form input[type="password"],
input[type="text"].login-input,
input[type="password"].login-input {
    background-color: #f7fafc !important;
    color: #2d3748 !important;
    border: 1px solid #cbd5e0 !important;
    padding-left: 45px !important;
}

/* Placeholder dos campos de login */
.login-box .input-group input::placeholder,
.login-form input::placeholder {
    color: #718096 !important;
}

/* Ícones bem posicionados e visíveis */
.login-box .input-group .icon,
.login-form .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
    z-index: 1;
    pointer-events: none;
}

/* Ajuste do padding do input para não sobrepor o ícone */
.login-box .input-group {
    position: relative;
}

/* Garantir que o fundo do container de login seja claro */
.login-form-wrapper {
    background-color: #f0f2f5 !important;
}

.login-box {
    background-color: #ffffff !important;
}

/* ==========================================================================
   CORREÇÃO 2: MENU HAMBURGUER LIGHT MODE - SELEÇÃO VISÍVEL
   ========================================================================== */

/* Item ativo no menu light mode - fundo cinza claro com texto escuro */
[data-theme="light"] .sidebar-menu .menu-item.active,
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .sidebar-nav a.active {
    background-color: #e2e8f0 !important;
    color: #2d3748 !important;
    border-left: 4px solid #4299e1 !important;
}

/* Hover no menu light mode */
[data-theme="light"] .sidebar-menu .menu-item:hover,
[data-theme="light"] .sidebar .nav-item:hover,
[data-theme="light"] .sidebar-nav a:hover {
    background-color: #edf2f7 !important;
    color: #1a202c !important;
    border-left: 4px solid #4299e1 !important;
}

/* Submenu no light mode */
[data-theme="light"] .sidebar .nav-submenu-item.active {
    background-color: #e2e8f0 !important;
    color: #2d3748 !important;
    border-left: 4px solid #4299e1 !important;
    padding-left: 20px !important;
}

[data-theme="light"] .sidebar .nav-submenu-item:hover {
    background-color: #edf2f7 !important;
    color: #1a202c !important;
}

/* Texto do menu no light mode */
[data-theme="light"] .sidebar .nav-item,
[data-theme="light"] .sidebar-nav a {
    color: #4a5568 !important;
}

/* ==========================================================================
   CORREÇÃO 3: GRIDS MOBILE DARK - FUNDO ESCURO (PRIORIDADE MÁXIMA)
   ========================================================================== */

/* Aplicar em TODAS as grids no modo Dark Mobile */
@media (max-width: 768px) {
    /* Cards gerais em mobile dark */
    [data-theme="dark"] .card,
    [data-theme="dark"] .grid-item,
    [data-theme="dark"] .table-card,
    [data-theme="dark"] .data-card,
    [data-theme="dark"] .list-item-card,
    [data-theme="dark"] .item-card,
    [data-theme="dark"] .registro-card,
    [data-theme="dark"] .delivery-card {
        background-color: #3d4a5c !important; /* Igual ao feedback que está correto */
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    /* Cards específicos de cada tela */
    [data-theme="dark"] .entrega-card,
    [data-theme="dark"] .colaborador-card,
    [data-theme="dark"] .condomino-card,
    [data-theme="dark"] .anuncio-card,
    [data-theme="dark"] .categoria-card,
    [data-theme="dark"] .canal-card,
    [data-theme="dark"] .historico-card {
        background-color: #3d4a5c !important;
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
        border-radius: 8px !important;
        padding: 16px !important;
    }
    
    /* Labels dos campos (texto menor/cinza claro) */
    [data-theme="dark"] .card label,
    [data-theme="dark"] .card .field-label,
    [data-theme="dark"] .grid-item label,
    [data-theme="dark"] .entrega-card label,
    [data-theme="dark"] .colaborador-card label,
    [data-theme="dark"] .condomino-card label,
    [data-theme="dark"] .anuncio-card label,
    [data-theme="dark"] .categoria-card label,
    [data-theme="dark"] .canal-card label,
    [data-theme="dark"] .historico-card label,
    [data-theme="dark"] .card .label-text,
    [data-theme="dark"] .card small {
        color: #cbd5e0 !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
    }
    
    /* Valores dos campos (texto maior/branco) */
    [data-theme="dark"] .card .field-value,
    [data-theme="dark"] .card p:not(.label-text),
    [data-theme="dark"] .card span:not(.badge),
    [data-theme="dark"] .card strong,
    [data-theme="dark"] .grid-item .value,
    [data-theme="dark"] .entrega-card p,
    [data-theme="dark"] .colaborador-card p,
    [data-theme="dark"] .condomino-card p,
    [data-theme="dark"] .anuncio-card p,
    [data-theme="dark"] .categoria-card p,
    [data-theme="dark"] .canal-card p,
    [data-theme="dark"] .historico-card p,
    [data-theme="dark"] .card .value-text {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* Títulos dos cards */
    [data-theme="dark"] .card h3,
    [data-theme="dark"] .card h4,
    [data-theme="dark"] .grid-item h3,
    [data-theme="dark"] .grid-item h4 {
        color: #ffffff !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }
    
    /* Links dentro dos cards */
    [data-theme="dark"] .card a:not(.btn),
    [data-theme="dark"] .grid-item a:not(.btn) {
        color: #60a5fa !important;
    }
    
    /* Badges dentro dos cards */
    [data-theme="dark"] .card .badge {
        background-color: #4a5568 !important;
        color: #ffffff !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        font-size: 0.8rem !important;
    }
    
    /* Status badges específicos */
    [data-theme="dark"] .card .badge-success,
    [data-theme="dark"] .card .status-success {
        background-color: #065f46 !important;
        color: #a7f3d0 !important;
    }
    
    [data-theme="dark"] .card .badge-warning,
    [data-theme="dark"] .card .status-warning {
        background-color: #78350f !important;
        color: #fcd34d !important;
    }
    
    [data-theme="dark"] .card .badge-danger,
    [data-theme="dark"] .card .status-danger {
        background-color: #7f1d1d !important;
        color: #fca5a5 !important;
    }
    
    [data-theme="dark"] .card .badge-info,
    [data-theme="dark"] .card .status-info {
        background-color: #1e3a8a !important;
        color: #93c5fd !important;
    }
    
    /* Divisores dentro dos cards */
    [data-theme="dark"] .card hr,
    [data-theme="dark"] .card .divider {
        border-color: #4a5568 !important;
        opacity: 0.5 !important;
    }
    
    /* Ícones dentro dos cards */
    [data-theme="dark"] .card i,
    [data-theme="dark"] .card .icon {
        color: #cbd5e0 !important;
    }
    
    /* Botões dentro dos cards */
    [data-theme="dark"] .card .btn-primary {
        background-color: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
    }
    
    [data-theme="dark"] .card .btn-secondary {
        background-color: #6b7280 !important;
        border-color: #6b7280 !important;
        color: #ffffff !important;
    }
    
    [data-theme="dark"] .card .btn-danger {
        background-color: #ef4444 !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;
    }
    
    /* Container de lista de cards */
    [data-theme="dark"] .cards-container,
    [data-theme="dark"] .grid-container,
    [data-theme="dark"] .list-container {
        background-color: transparent !important;
    }
}

/* ==========================================================================
   CORREÇÃO 4: MODAL MOBILE DARK
   ========================================================================== */

@media (max-width: 768px) {
    /* Modal container em dark mode */
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .modal-container,
    [data-theme="dark"] .announcement-modal,
    [data-theme="dark"] .modal-body,
    [data-theme="dark"] .modal-dialog .modal-content {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
    }
    
    /* Cabeçalho do modal */
    [data-theme="dark"] .modal-header,
    [data-theme="dark"] .modal-content .modal-header {
        background-color: #1a202c !important;
        border-bottom: 1px solid #4a5568 !important;
        color: #ffffff !important;
    }
    
    /* Título do modal */
    [data-theme="dark"] .modal-content h2,
    [data-theme="dark"] .modal-content h3,
    [data-theme="dark"] .modal-header h2,
    [data-theme="dark"] .modal-header h3,
    [data-theme="dark"] .modal-title {
        color: #ffffff !important;
        font-weight: 700 !important;
    }
    
    /* Texto do modal */
    [data-theme="dark"] .modal-content p,
    [data-theme="dark"] .modal-content span,
    [data-theme="dark"] .modal-body p,
    [data-theme="dark"] .modal-body span {
        color: #e2e8f0 !important;
    }
    
    /* Links no modal */
    [data-theme="dark"] .modal-content a:not(.btn),
    [data-theme="dark"] .modal-body a:not(.btn) {
        color: #60a5fa !important;
    }
    
    /* Botões no modal */
    [data-theme="dark"] .modal-footer .btn-primary {
        background-color: #3b82f6 !important;
        border-color: #3b82f6 !important;
    }
    
    [data-theme="dark"] .modal-footer .btn-secondary {
        background-color: #6b7280 !important;
        border-color: #6b7280 !important;
    }
    
    /* Botão fechar (X) */
    [data-theme="dark"] .modal-header .close,
    [data-theme="dark"] .modal-header .btn-close {
        color: #ffffff !important;
        opacity: 0.8;
    }
    
    /* Rodapé do modal */
    [data-theme="dark"] .modal-footer {
        background-color: #1a202c !important;
        border-top: 1px solid #4a5568 !important;
    }
    
    /* Overlay do modal */
    [data-theme="dark"] .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.7) !important;
    }
    
    /* Campos de formulário dentro do modal */
    [data-theme="dark"] .modal-content input,
    [data-theme="dark"] .modal-content select,
    [data-theme="dark"] .modal-content textarea {
        background-color: #374151 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    [data-theme="dark"] .modal-content input::placeholder,
    [data-theme="dark"] .modal-content textarea::placeholder {
        color: #9ca3af !important;
    }
    
    /* Labels dentro do modal */
    [data-theme="dark"] .modal-content label {
        color: #cbd5e0 !important;
    }
}

/* ==========================================================================
   CORREÇÕES ADICIONAIS - GARANTIR CONSISTÊNCIA
   ========================================================================== */

/* Garantir que painéis principais também tenham fundo correto em mobile dark */
@media (max-width: 768px) {
    [data-theme="dark"] .panel,
    [data-theme="dark"] .content-panel,
    [data-theme="dark"] .main-panel {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
        border: 1px solid #4a5568 !important;
    }
    
    [data-theme="dark"] .panel h2,
    [data-theme="dark"] .panel h3 {
        color: #ffffff !important;
    }
    
    /* Tabelas em mobile dark */
    [data-theme="dark"] table {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }
    
    [data-theme="dark"] table thead {
        background-color: #1a202c !important;
    }
    
    [data-theme="dark"] table thead th {
        color: #ffffff !important;
        border-color: #4a5568 !important;
    }
    
    [data-theme="dark"] table tbody td {
        color: #e2e8f0 !important;
        border-color: #4a5568 !important;
    }
    
    [data-theme="dark"] table tbody tr:hover {
        background-color: #374151 !important;
    }
    
    /* Inputs e selects gerais em mobile dark */
    [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
    [data-theme="dark"] select,
    [data-theme="dark"] textarea {
        background-color: #374151 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
        color: #9ca3af !important;
    }
}

/* FIM DAS CORREÇÕES */


/* CORREÇÃO ADICIONAL: Paginação do banner */
#banner-swiper .swiper-pagination {
    bottom: 10px !important;
}

#banner-swiper .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

#banner-swiper .swiper-pagination-bullet-active {
    background-color: #ffffff;
}


/* ==========================================================================
   MELHORIA 4: Forçar ícones e texto brancos em todos os botões
   (Aplicado em ambos os temas: light e dark)
   ========================================================================== */

/* Botões primários e secundários */
.btn,
.btn-primary,
.btn-secondary,
.btn-login,
.btn-action-feedback,
button.primary,
button.secondary,
.filter-form .btn,
.export-actions .btn,
.form-actions .btn,
.btn-full-width,
.btn-change-password {
    color: #ffffff !important; /* Texto branco */
}

/* Ícones dentro dos botões */
.btn i,
.btn-primary i,
.btn-secondary i,
.btn-login i,
.btn-action-feedback i,
button.primary i,
button.secondary i,
.filter-form .btn i,
.export-actions .btn i,
.form-actions .btn i,
.btn-full-width i,
.btn-change-password i {
    color: #ffffff !important; /* Ícone branco */
}

/* Aplicar em ambos os temas explicitamente */
[data-theme="light"] .btn,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-login,
[data-theme="light"] .btn-action-feedback,
[data-theme="light"] button.primary,
[data-theme="light"] button.secondary,
[data-theme="light"] .filter-form .btn,
[data-theme="light"] .export-actions .btn,
[data-theme="light"] .form-actions .btn {
    color: #ffffff !important;
}

[data-theme="dark"] .btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-login,
[data-theme="dark"] .btn-action-feedback,
[data-theme="dark"] button.primary,
[data-theme="dark"] button.secondary,
[data-theme="dark"] .filter-form .btn,
[data-theme="dark"] .export-actions .btn,
[data-theme="dark"] .form-actions .btn {
    color: #ffffff !important;
}

/* Ícones nos botões - ambos os temas */
[data-theme="light"] .btn i,
[data-theme="light"] .btn-primary i,
[data-theme="light"] .btn-secondary i,
[data-theme="dark"] .btn i,
[data-theme="dark"] .btn-primary i,
[data-theme="dark"] .btn-secondary i {
    color: #ffffff !important;
}

/* FIM DA MELHORIA 4 */