:root {
    /* Light Theme Palette */
    --bg-color: #e8eaeb;       /* Main background - very light gray */
    --bg-light: #ffffff;       /* Cards, modals, content area - white */
    --bg-lighter: #e9ecef;     /* Inputs, headers, striped rows - light gray */
    --text-color: #212529;     /* Main text - almost black */
    --text-secondary-color: #6c757d;
    
    /* Action Colors */
    --primary-color: #3A7EBF;
    --primary-hover: #346FA4;
    --secondary-color: #6c757d; /* Standard gray button */
    --secondary-hover: #5a6268; /* Darker gray on hover */
    --danger-color: #D9534F;
    --danger-hover: #C9302C;
    --success-color: #5CB85C;
    --warning-color: #F0AD4E;
    
    /* Other UI Colors */
    --border-color: #dee2e6;   /* Light border for elements */
    --border-color-light: #f1f3f5; /* ✅ NOVO: Borda mais clara */
    --hover-bg-color: #f8f9fa; /* ✅ NOVO: Cor de fundo para hover */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

body {
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    /*min-height: 100vh;*/
    height: 100vh; /* Garante que o body ocupe a tela inteira */
}

/* --- Estrutura e Layout --- */
.user-display {
    display: flex;
    align-items: center;
    padding: 5px 20px;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; 
}
.user-info-text { flex-grow: 1; text-align: right; margin-right: 15px; font-size: 0.9em; }
.user-avatar { border-radius: 50%; }
.logo-small { height: 40px; width: auto; }
.logo-big { max-width: 300px; margin-bottom: 20px; }

/* ✅ NOVO: Estilo para o botão do menu */
#menu-toggle-button {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
    padding: 0 15px 0 0;
    margin-right: 10px;
}

#app-container {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.frame {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
}
.frame.active { display: flex; }

.main-layout {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    max-width: none;
    height: 100%;
}

#sidebar {
    background-color: var(--bg-light);
    width: 250px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    overflow: hidden; 
}

/* Este seletor significa: "aplique ao #sidebar SOMENTE QUANDO o body tiver a classe sidebar-collapsed" */
body.sidebar-collapsed #sidebar {
    width: 0;
    padding: 20px 0;
    opacity: 0;
}

#sidebar h2 { margin-top: 0; }
#sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.sidebar-footer { margin-top: auto; }
.municipio-info {
    font-size: 0.8em;
    color: #6c757d;
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--bg-color);
    border-radius: 5px;
    text-align: center;
}

/* ✅ ADICIONE ESTES NOVOS ESTILOS */
.btn-sidebar {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #555;
    background-color: #4a4a4a;
    color: #ddd;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-sidebar:hover:not(:disabled) {
    background-color: #5a5a5a;
    border-color: #777;
}

.btn-sidebar:disabled {
    background-color: #383838; /* Tonalidade mais escura/apagada */
    color: #888;
    cursor: not-allowed;
    border-color: #444;
}

.btn-logout {
    background-color: #6c757d;
    border-color: #5a6268;
}

.btn-logout:hover {
    background-color: #5a6268;
}

/* Estilo para a lista de seleção no novo modal */
.scrollable-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}

.radio-item {
    display: block;
    margin-bottom: 8px;
}

#content-area {
    flex-grow: 1;
    padding: 20px;
    overflow-y: hidden;
}

.content {
    height: 100%; /* Garante que a área da aba ocupe toda a altura */
    overflow-y: auto; /* Adiciona a barra de rolagem se o conteúdo for maior */
}

@media (min-width: 901px) { /* Aplica apenas para telas maiores que 900px (desktop) */
    
    /* Regras do gráfico que já tínhamos */
    .dashboard-card.chart-card {
        max-height: 300px;
        overflow: hidden;
        flex-direction: column;
    }

    .dashboard-card.chart-card .chart-container {
        flex-grow: 1;
        min-height: 0;
    }

    /* --- ADICIONE ESTA NOVA REGRA AQUI DENTRO --- */
    /* Ela desativa a rolagem APENAS no dashboard em telas de desktop */
    #home-content {
        overflow-y: hidden;
    }
}

.content { display: none; }
.content.show { display: block; }

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* --- Elementos de Formulário --- */
.form-group {
    width: 100%;
    margin-bottom: 15px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    box-sizing: border-box; /* Importante */
}
input::placeholder, textarea::placeholder { color: #6c757d; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    width: 100%;
}

/* --- Botões --- */
.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    width: 100%;
    max-width: 300px;
}
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-secondary { background-color: var(--secondary-color); color: white; }
.btn-secondary:hover { background-color: var(--secondary-hover); }
.btn-link {
    background: none;
    color: var(--primary-color);
    text-decoration: underline;
    padding: 5px;
    max-width: none;
}

.btn-menu {
    width: 100%;
    text-align: left;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid transparent;
}
.btn-menu:hover { background-color: var(--bg-lighter); }
.btn-menu.active { background-color: var(--primary-color); color: white; }

/* --- Tabelas --- */
/* ===== TABELA DE PROCESSOS OTIMIZADA - BASEADA NA IMAGEM ===== */

.table-container {
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-top: 20px;
}

/* Cabeçalho da tabela */
.table-header-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        120px     /* Nº Processo */
        140px     /* Modalidade */
        1fr     /* Objeto */
        250px     /* Agente */
        100px     /* Data Publicação */
        100px     /* Data Abertura */
        100px      /* Status */
        100px;    /* Ações */
    gap: 1px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    padding: 12px 8px;
    align-items: center;
    text-align: center;
}

/* Linhas da tabela */
.table-row-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        120px     /* Nº Processo */
        140px     /* Modalidade */
        1fr     /* Objeto */
        250px     /* Agente */
        100px     /* Data Publicação */
        100px     /* Data Abertura */
        100px      /* Status */
        100px;    /* Ações */
    gap: 1px;
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.table-row-compact:hover {
    background-color: #f8f9fa;
}

.table-row-compact:nth-child(even) {
    background-color: #fdfdfd;
}

/* Estilos das colunas individuais */
.col-id {
    font-weight: 600;
    color: #495057;
    text-align: center;
}

.col-numero {
    font-weight: 500;
    color: #007bff;
    word-break: break-word;
}

.col-modalidade {
    color: #6c757d;
    font-size: 12px;
    line-height: 1.3;
}

.col-objeto {
    color: #495057;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Propriedade padrão para compatibilidade futura */
    line-clamp: 2;
    /* Fallback para navegadores que não suportam line-clamp */
    text-overflow: ellipsis;
}

@supports not (line-clamp: 2) {
    .col-objeto {
        /* Limita a uma linha com ellipsis como fallback */
        white-space: nowrap;
        text-overflow: ellipsis;
        max-height: 20px;
        display: block;
    }
}

.col-agente {
    color: #6c757d;
    font-size: 12px;
    text-align: center;
}

.col-data-pub,
.col-data-abert {
    font-family: 'Segoe UI', monospace;
    font-size: 12px;
    color: #495057;
    text-align: center;
    font-weight: 500;
}

.col-status {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #28a745;
    background-color: #d4edda;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #c3e6cb;
}

.col-acoes {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

/* Botões de ação */
.btn-action {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.btn-edit {
    color: #ffc107;
    border-color: #ffc107;
}

.btn-edit:hover {
    background-color: #fff3cd;
    border-color: #ffcd39;
}

.btn-delete {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-delete:hover {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.btn-view {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-view:hover {
    background-color: #e2e6ea;
    border-color: #adb5bd;
}

.col-valor-estimado {
    text-align: center; 
}

/* Estilos base para as células com alerta */
.alerta-visual-verde,
.alerta-visual-vermelho, .alerta-visual-amarelo {
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
    font-weight: bold;
    margin: -4px -6px; /* Compensa o padding para não quebrar o alinhamento da linha */
}

/* Alerta VERDE para "1 dia útil" */
.alerta-visual-verde {
    color: #1a5e20; /* Texto verde escuro para boa legibilidade */
    background-color: rgba(76, 175, 80, 0.1); /* Fundo verde muito claro */
    /* A linha abaixo aplica a animação 'pulse-green' */
    animation: pulse-green 2.5s infinite;
}

/* Alerta VERMELHO para "Aguardando Situação" */
.alerta-visual-vermelho {
    color: #b71c1c; /* Texto vermelho escuro para boa legibilidade */
    background-color: rgba(244, 67, 54, 0.1); /* Fundo vermelho muito claro */
    /* A linha abaixo aplica a animação 'pulse-red' */
    animation: pulse-red 2.5s infinite;
}

/* Alerta AMARELO para "Em fase de recurso" */
.alerta-visual-amarelo {
    color: #856404; /* Texto amarelo escuro */
    background-color: #fff3cd; /* Fundo amarelo claro */
    animation: pulse-yellow 2.5s infinite;
}

/* Animação de pulso para o brilho verde */
@keyframes pulse-green {
    0% { box-shadow: 0 0 7px 2px rgba(76, 175, 80, 0.6); }
    50% { box-shadow: 0 0 12px 4px rgba(76, 175, 80, 0.8); }
    100% { box-shadow: 0 0 7px 2px rgba(76, 175, 80, 0.6); }
}

/* Animação de pulso para o brilho vermelho */
@keyframes pulse-red {
    0% { box-shadow: 0 0 7px 2px rgba(244, 67, 54, 0.6); }
    50% { box-shadow: 0 0 12px 4px rgba(244, 67, 54, 0.8); }
    100% { box-shadow: 0 0 7px 2px rgba(244, 67, 54, 0.6); }
}

/* Animação de pulso para o brilho amarelo */
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 7px 2px rgba(255, 193, 7, 0.6); }
    50% { box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.8); }
    100% { box-shadow: 0 0 7px 2px rgba(255, 193, 7, 0.6); }
}

/* Responsividade */
@media (max-width: 1400px) {
    .table-header-compact,
    .table-row-compact {
        grid-template-columns: 
            50px      /* ID */
            100px     /* Nº Processo */
            120px     /* Modalidade */
            250px     /* Objeto */
            100px     /* Agente */
            90px      /* Data Publicação */
            90px      /* Data Abertura */
            70px      /* Status */
            90px;     /* Ações */
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    .table-header-compact,
    .table-row-compact {
        grid-template-columns: 
            45px      /* ID */
            90px      /* Nº Processo */
            110px     /* Modalidade */
            200px     /* Objeto */
            90px      /* Agente */
            80px      /* Data Publicação */
            80px      /* Data Abertura */
            60px      /* Status */
            80px;     /* Ações */
        font-size: 11px;
        padding: 8px 6px;
    }
}

@media (max-width: 768px) {
    .table-header-compact,
    .table-row-compact {
        grid-template-columns: 
            40px      /* ID */
            80px      /* Nº Processo */
            100px     /* Modalidade */
            150px     /* Objeto */
            80px      /* Agente */
            70px      /* Data Publicação */
            70px      /* Data Abertura */
            50px      /* Status */
            70px;     /* Ações */
        font-size: 10px;
        padding: 6px 4px;
    }
    
    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* --- Modais (Dialogs) --- */
dialog {
    background-color: var(--bg-light);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}
dialog form { display: flex; flex-direction: column; gap: 15px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.modal-actions button { width: auto; }

/* --- Outros --- */
.status-label {
    margin-top: 15px;
    min-height: 20px;
    color: var(--danger-color);
    text-align: center;
}

/* Estilos para a lista de sugestões flutuante */
.suggestions-list {
    display: none;
    position: fixed; /* MUDANÇA CRÍTICA: de 'absolute' para 'fixed' */
    border: 1px solid #ccc;
    background-color: white;
    z-index: 9999; /* z-index alto para garantir que fique sobre o fundo do modal */
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 4px 0;
}

/* Estilos para os grupos de campos condicionais */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
}

/* Estilos para avisos e validações */
.status-label {
    font-size: 0.9em;
    margin-top: 5px;
    padding: 5px;
    border-radius: 4px;
}

.status-label:empty {
    display: none;
}

/* Cores para diferentes tipos de status */
.status-label.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.status-label.warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
}

.status-label.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* Textarea styling */
textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

/* Estilos para campos de data e hora com ícones */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input[type="date"],
.input-with-icon input[type="time"] {
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background-color: #fff;
}

.input-with-icon input[type="date"]:focus,
.input-with-icon input[type="time"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.input-with-icon .input-icon {
    position: absolute;
    right: 12px;
    font-size: 18px;
    pointer-events: none;
    color: #666;
    z-index: 1;
}

/* Melhorar aparência dos calendários/relógios nativos */
.input-with-icon input[type="date"]::-webkit-calendar-picker-indicator,
.input-with-icon input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
}

/* Estilo para campos inválidos */
.input-with-icon input.invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.input-with-icon input.valid {
    border-color: #28a745;
    background-color: #f8fff8;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .input-with-icon input[type="date"],
    .input-with-icon input[type="time"] {
        font-size: 16px; /* Evita zoom no iOS */
        padding: 10px 35px 10px 10px;
    }
    
    .input-with-icon .input-icon {
        right: 10px;
        font-size: 16px;
    }
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

/* ===== TABELA DE MUNICÍPIOS - MESMO PADRÃO DOS PROCESSOS ===== */

/* Cabeçalho da tabela de municípios */
.municipios-table-header-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        300px     /* Nome */
        200px     /* CNPJ */
        80px      /* UF */
        120px;    /* Ações */
    gap: 8px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    padding: 15px 10px;
    align-items: center;
}

/* Linhas da tabela de municípios */
.municipios-table-row-compact {
    display: grid;
    grid-template-columns: 
        60px      /* ID */
        300px     /* Nome */
        200px     /* CNPJ */
        80px      /* UF */
        120px;    /* Ações */
    gap: 8px;
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    font-size: 13px;
    transition: background-color 0.2s ease;
    /*min-height: 50px;*/ /* Garantir altura mínima para linhas */
}

.municipios-table-row-compact:hover {
    background-color: #f8f9fa;
}

.municipios-table-row-compact:nth-child(even) {
    background-color: #fdfdfd;
}

/* Colunas específicas dos municípios */
.col-municipio-id {
    font-weight: 600;
    color: #495057;
    text-align: center;
}

.col-municipio-nome {
    font-weight: 500;
    color: #007bff;
    word-break: break-word;
}

.col-municipio-cnpj {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: #495057;
    text-align: center;
    font-weight: 500;
    /* ✅ GARANTIR ESPAÇO SUFICIENTE PARA CNPJ COMPLETO */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 160px; /* Espaço mínimo para CNPJ formatado */
}
/* ✅ AJUSTAR LARGURAS DAS COLUNAS */
.municipios-table-header-compact,
.municipios-table-row-compact {
    grid-template-columns: 
        60px      /* ID */
        280px     /* Nome - reduzido um pouco */
        180px     /* CNPJ - aumentado */
        80px      /* UF */
        220px;    /* Ações */
}

.col-municipio-uf {
    font-weight: 600;
    color: #6c757d;
    text-align: center;
    text-transform: uppercase;
}

.col-municipio-acoes {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

/* 1. O contêiner para os dois botões de limite (sem alteração) */
.limit-toggle-group {
    display: flex;
    gap: 8px;
    align-items: center;
    border: 1px solid #ddd;
    padding: 2px 6px;
    border-radius: 15px;
    background-color: #f8f9fa;
}

/* 2. O corpo do botão deslizante (sem alteração) */
.switch-small {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 34px;
    height: 20px;
}

/* Esconde o checkbox padrão (sem alteração) */
.switch-small input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* 3. A "pista" do botão deslizante (sem alteração) */
.slider-small {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; /* Cor cinza quando desligado */
    transition: .4s;
}

/* 4. O círculo que desliza (sem alteração) */
.slider-small:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    z-index: 1; 
}

/* ✅ 5. NOVA REGRA PARA O TEXTO DENTRO DO BOTÃO */
.slider-small:after {
    /* Pega o texto do atributo 'data-label' que vamos adicionar no HTML */
    content: attr(data-label); 
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px; /* Alinha verticalmente com a altura do botão */
    transition: color 0.4s, left 0.4s, right 0.4s; /* Anima a cor e posição */
    z-index: 0; /* Fica atrás do círculo branco */

    /* Estado INICIAL (Desativado) */
    color: #4d5153; /* Cinza escuro, conforme solicitado */
    right: 5px;     /* Posicionado na área cinza à direita */
}

/* 6. Estilo para quando o botão está LIGADO (checked) */
input:checked + .slider-small {
    background-color: #28a745; /* Muda a cor da pista para verde */
}

input:checked + .slider-small:before {
    transform: translateX(14px); /* Move o círculo para a direita */
}

/* ✅ 7. NOVA REGRA PARA O TEXTO QUANDO O BOTÃO ESTÁ LIGADO */
input:checked + .slider-small:after {
    color: white;  /* Cor branca, conforme solicitado */
    left: 5px;     /* Posicionado na área verde à esquerda */
    right: auto;   /* Remove o posicionamento à direita */
}

/* 8. Estilos de arredondamento (sem alteração) */
.slider-small.round { border-radius: 20px; }
.slider-small.round:before { border-radius: 50%; }
/* ===== VALIDAÇÕES DE FORMULÁRIO ===== */

/* Status labels para validações */
.status-label {
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    display: block;
    min-height: 20px;
}

.status-label.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-label.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-label.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Campos inválidos */
input.invalid,
select.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Campos válidos */
input.valid,
select.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* ===== TABELA DE ÓRGÃOS - PADRÃO PROCESSOS ===== */
.orgaos-table-header, .orgaos-table-row {
    display: grid;
    grid-template-columns: 80px 1fr 120px; /* Define as 3 colunas */
    gap: 8px;
    padding: 12px 10px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.orgaos-table-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.orgaos-table-row {
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.orgaos-table-row:nth-child(even) {
    background-color: #fdfdfd;
}

.orgaos-table-row:hover {
    background-color: #f1f3f5;
}

/* Estilo para a coluna de nome do órgão */
.col-orgao-nome {
    font-weight: 500;
    color: #343a40;
    word-break: break-word;
}

.radio-item {
    margin-bottom: 10px;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
}

.radio-item label {
    font-size: 14px;
    color: #495057;
}

/* ===== Estilos para o Botão Deslizante (Toggle Switch) ===== */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--success-color);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--success-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Estilos para o Acordeão de Processos */
.processo-accordion-item {
    border-bottom: 1px solid var(--border-color);
}

.processo-row-header {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.processo-row-header:hover {
    background-color: var(--hover-bg-color);
}

.processo-details-panel {
    display: none; /* Oculto por padrão */
    padding: 15px;
    background-color: #fdfdfd;
    border-top: 1px solid var(--border-color-light);
}

.processo-details-panel.expanded {
    display: block; /* Visível quando expandido */
}

.details-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    font-size: 0.9rem;
}

.details-grid div:nth-child(odd) { /* Estilo para os rótulos (label) */
    font-weight: bold;
    color: var(--text-secondary-color);
}

.details-grid div:nth-child(even) { /* Estilo para os valores */
    white-space: pre-wrap; /* Mantém quebras de linha do campo observações */
    word-break: break-word;
}

.toast-notification.error {
    background-color: var(--danger-color);
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* --- Estilos para a Seção de Relatórios --- */
.reports-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    padding: 1rem;
}

.report-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

.report-card h3 {
    margin-top: 0;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.report-card p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.form-group-inline {
    display: flex;
    gap: 1rem;
}

.form-group-inline .form-group {
    flex: 1;
}

#orgao-contatos-back-btn,
#processo-situacoes-back-btn {
padding: 5px !important; /* Reduzir o padding para diminuir o tamanho */
background-color: transparent !important; /* Tornar o fundo transparente */
border: none !important; /* Remover a borda */
font-size: 1em; /* Manter o tamanho da fonte do símbolo */
cursor: pointer; /* Manter o cursor de interação */
}

/* Tabela de Fornecedores */
.fornecedores-table-header, .fornecedores-table-row {
    display: grid;
    gap: 8px;
    padding: 12px 10px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.fornecedores-table-header {
    background-color: #f8f9fa;
    border-bottom-width: 2px;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
}

.fornecedores-table-row {
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.fornecedores-table-row:hover {
    background-color: #f1f3f5;
}

/* Layout padrão (sem coluna município) */
.fornecedores-table-header.default-layout,
.fornecedores-table-row.default-layout {
    grid-template-columns: 1.5fr 2fr 1.5fr 1.5fr 2fr 120px;
}

/* Layout para proprietários (com coluna município) */
.fornecedores-table-header.owner-layout,
.fornecedores-table-row.owner-layout {
    grid-template-columns: 1.5fr 2fr 1.5fr 1.5fr 2fr 1.5fr 120px;
}

/* Componente de Input com Tags */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-lighter);
}

.tag-input-container input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 4px;
    background-color: transparent;
}

.tag-item {
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.9em;
}

.tag-remove-btn {
    margin-left: 8px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    font-weight: bold;
}
/* Wrapper para alinhar input e botão */
.tag-input-wrapper {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.tag-input-wrapper input {
    flex-grow: 1; /* Faz o input ocupar o espaço disponível */
}

/* Estilo para o novo botão Adicionar */
.btn-add-tag {
    flex-shrink: 0; /* Impede que o botão encolha */
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-add-tag:hover {
    background-color: var(--primary-hover);
}

/* --- AJUSTE DE LARGURA FIXA PARA DESKTOP (VERSÃO MELHORADA) --- */

/* Aplica os estilos se AMBAS as condições forem verdadeiras:
  1. A tela tiver 769px de largura ou mais.
  2. O dispositivo tiver um ponteiro preciso (como um mouse), indicando que é um desktop/laptop.
*/
/* Aplica as regras apenas em telas maiores com um ponteiro preciso (mouse) */
@media (min-width: 769px) and (pointer: fine) {

  /* 1. Define o tamanho e a transição da barra lateral */
  #sidebar {
    width: 200px;
    min-width: 200px;
    transition: width 0.3s ease, min-width 0.3s ease;
  }

  /* 2. Define o tamanho e a posição iniciais da área de conteúdo */
  #content-area {
    width: 100%; /* Ocupa o restante do espaço */
    transition: margin-left 0.3s ease, width 0.3s ease; /* Anima a mudança */
  }

  /* 3. Define o que acontece quando a sidebar é recolhida */
  body.sidebar-collapsed #sidebar {
    width: 0;
    min-width: 0;
  }

  body.sidebar-collapsed #content-area {
    margin-left: 0; /* Remove a margem */
    width: 100%;    /* Faz o conteúdo ocupar 100% da tela */
  }
}

/* Estilos para a Visão Pública do Processo */
.public-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.public-modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.public-modal-content h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.public-details-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 15px;
    font-size: 1rem;
}

.public-details-grid div:nth-child(odd) {
    font-weight: bold;
    color: var(--text-secondary-color);
}

.public-modal-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* --- Estilos para Notificações Toast --- */

/* Posiciona o contêiner no canto superior esquerdo da tela */
#toast-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo base da notificação: invisível e fora da tela */
.toast-notification {
    padding: 15px 20px;
    background-color: #333;
    color: white;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(-120%);
    /* A linha mais importante: define a animação */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Estilo da notificação quando visível */
.toast-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Cores para diferentes tipos de mensagens */
.toast-notification.error {
    background-color: #D9534F; /* Cor de perigo */
}

.toast-notification.success {
    background-color: #5CB85C; /* Cor de sucesso */
}

/* --- Otimização do Modal Público para Dispositivos Móveis --- */
@media (max-width: 600px) {
  .public-details-grid {
    /* Altera o layout de 2 colunas para apenas 1 */
    grid-template-columns: 1fr;
    gap: 5px; /* Reduz o espaçamento entre os itens */
  }

  /* No celular, o rótulo (ex: "Município:") fica menor e sem margem inferior */
  .public-details-grid div:nth-child(odd) {
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
  }

  /* O valor (ex: "Abaiara / CE") ganha uma margem inferior para separar do próximo item */
  .public-details-grid div:nth-child(even) {
    margin-bottom: 10px;
  }

  /* Reduz o espaçamento interno do modal em telas pequenas */
  .public-modal-content {
    padding: 1.5rem;
  }
}

/* --- Estilos para o Dashboard da Página Inicial --- */
.welcome-banner {
    background: linear-gradient(135deg, var(--primary-color), #5f9dce);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.welcome-banner h2 {
    margin: 0;
    font-size: 1.8rem;
}
.welcome-banner p {
    margin: 0.25rem 0 0;
    opacity: 0.9;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
}

.stat-card {
    text-align: center;
}
.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
}
.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
}

.action-card h3, .list-card h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.action-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    text-align: left;
    background-color: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}
.action-button:hover {
    background-color: #d4dbe1;
    border-color: #b6c2cf;
}
.action-button:last-child {
    margin-bottom: 0;
}

#proximos-processos-list .processo-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color-light);
}
#proximos-processos-list .processo-item:last-child {
    border-bottom: none;
}
.processo-item-header {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.processo-item-date {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

#chart-card-container {
    display: none; /* Oculto por padrão */
}

.dashboard-card.chart-card {
    grid-column: span 2;
    /* Usa flexbox para organizar o título e o contêiner do gráfico */
    display: flex;
    flex-direction: column;
    min-height: 310px; /* Altura mínima para o card */
}

/* Novo contêiner que segura o gráfico */
.chart-container {
    /* Posição relativa é essencial para o Chart.js */
    position: relative;
    /* flex-grow: 1 permite que este contêiner ocupe todo o espaço
       vertical restante dentro do card, após o título <h3> */
    flex-grow: 1; 
}

/* Media query para telas menores (sem alteração) */
@media (max-width: 900px) {
    .dashboard-card.chart-card {
        grid-column: span 1;
    }
}

@media (min-width: 901px) { /* Aplica apenas para telas maiores que 900px (desktop) */
    .dashboard-card.chart-card {
        max-height: 310px; /* Ajuste este valor conforme a necessidade */
        overflow: hidden; /* Oculta qualquer parte do gráfico que exceda a altura */
        flex-direction: column; /* Garante que o conteúdo interno continue em coluna */
    }

    .dashboard-card.chart-card .chart-container {
        flex-grow: 1; /* Permite que o contêiner do gráfico use o espaço limitado */
    }
}

/* --- Estilos para o grupo Valor Estimado e Toggle --- */

/* Contêiner principal para alinhar itens horizontalmente */
.form-group-horizontal {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre o campo de valor e o grupo do botão */
}

/* Grupo que contém apenas o input do valor */
.valor-estimado-group {
    flex-grow: 1; /* Faz o campo de input ocupar o máximo de espaço possível */
}

/* Grupo que contém o botão e o texto */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o botão e o texto */
    flex-shrink: 0; /* Impede que o grupo encolha */
}

/* Estilo para o texto "Orçamento Sigiloso" */
.toggle-label {
    font-size: 0.9em;
    font-weight: 500;
    color: #6c757d; /* Cor de texto secundária (aparência opaca) */
    cursor: pointer;
}

/* --- Estilo para o cabeçalho do grupo de checkboxes --- */
.form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Adiciona um espaço antes da lista de checkboxes */
}

/* Contêiner do checkbox "Marcar todos" */
#marcar-todos-orgaos-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ============================================= */
/* === ESTILOS PARA VISUALIZAÇÃO MOBILE (CARDS) === */
/* ============================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho da tabela, pois não faz mais sentido no layout de cards. */
    #processos-content .table-header-compact {
        display: none;
    }

    /* 2. Remove o preenchimento do contêiner para que os cards ocupem toda a largura. */
    #processos-table-container {
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* 3. Transforma a "linha" do processo em um card com sombra e margem. */
    .processo-accordion-item .processo-row-header .table-row-compact {
        display: block; /* Muda de 'grid' para 'block' para empilhar os itens */
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza cada item de dado dentro do card. */
    .processo-accordion-item .table-row-compact > div {
        display: block; /* Garante que cada item ocupe sua própria linha */
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
        display: flex;
        flex-direction: column; /* Empilha o rótulo e o valor */
        gap: 2px;
    }
    
    .processo-accordion-item .table-row-compact > div:last-child {
        border-bottom: none; /* Remove a borda do último item (Ações) */
    }

    /* 5. Adiciona os RÓTULOS (labels) antes de cada dado usando a mágica do CSS! */
    .processo-accordion-item .table-row-compact > div::before {
        content: attr(data-label); /* O texto do rótulo virá de um atributo que definiremos */
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 6. Define os textos dos rótulos para cada coluna, na ordem correta. */
    .processo-accordion-item .table-row-compact > div:nth-child(1) { display: none; } /* Esconde o ID */
    .processo-accordion-item .table-row-compact > div:nth-child(2)::before { content: 'Nº Processo'; }
    .processo-accordion-item .table-row-compact > div:nth-child(3)::before { content: 'Modalidade'; }
    .processo-accordion-item .table-row-compact > div:nth-child(4)::before { content: 'Objeto'; }
    .processo-accordion-item .table-row-compact > div:nth-child(5)::before { content: 'Agente'; }
    .processo-accordion-item .table-row-compact > div:nth-child(6)::before { content: 'Data Publicação'; }
    .processo-accordion-item .table-row-compact > div:nth-child(7)::before { content: 'Data / Hora Abertura'; }
    .processo-accordion-item .table-row-compact > div:nth-child(8)::before { content: 'Valor Estimado'; }
    
    /* 7. Ajusta a coluna de ações para ficar mais bonita no card. */
    .processo-accordion-item .table-row-compact .col-acoes {
        padding-top: 1rem;
        flex-direction: row; /* Mantém os botões em linha */
        justify-content: flex-end; /* Alinha os botões à direita */
    }

    /* Remove o pseudo-elemento do rótulo para a coluna de ações */
    .processo-accordion-item .table-row-compact .col-acoes::before {
        content: none;
    }
}


/* ======================================================= */
/* === ESTILOS MOBILE PARA SITUAÇÕES DO PROCESSO (CARDS) === */
/* ======================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho da tabela de situações. */
    #processo-situacoes-content .table-header-compact {
        display: none;
    }

    /* 2. Remove o fundo e a sombra do contêiner principal. */
    #processo-situacoes-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    /* 3. Transforma cada linha de situação em um card. */
    #processo-situacoes-content .table-row-compact {
        display: block; /* Muda o layout de grid para bloco */
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza cada item de dado dentro do card de situação. */
    #processo-situacoes-content .table-row-compact > div {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    #processo-situacoes-content .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 5. Adiciona os rótulos (labels) antes de cada dado da situação. */
    #processo-situacoes-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 6. Define os textos dos rótulos para cada coluna. */
    #processo-situacoes-content .table-row-compact > div:nth-child(1)::before { content: 'Situação'; }
    #processo-situacoes-content .table-row-compact > div:nth-child(2)::before { content: 'Data'; }
    #processo-situacoes-content .table-row-compact > div:nth-child(3)::before { content: 'Responsável'; }
    #processo-situacoes-content .table-row-compact > div:nth-child(4)::before { content: 'Fornecedores'; }
    
    /* 7. Ajusta a coluna de ações. */
    #processo-situacoes-content .table-row-compact .col-acoes {
        padding-top: 1rem;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    #processo-situacoes-content .table-row-compact .col-acoes::before {
        content: none;
    }
}

/* ======================================================= */
/* === ESTILOS MOBILE PARA A TELA DE MUNICÍPIOS (CARDS) === */
/* ======================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho original da tabela de municípios. */
    #municipios-content .municipios-table-header-compact {
        display: none;
    }

    /* 2. Remove o fundo do contêiner para um visual mais limpo. */
    #municipios-content #municipios-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    /* 3. Transforma cada linha de município em um card individual. */
    #municipios-content .municipios-table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza os campos de dados dentro do card. */
    #municipios-content .municipios-table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    #municipios-content .municipios-table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 5. Adiciona os rótulos usando pseudo-elementos CSS. */
    #municipios-content .municipios-table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }
    
    /* 6. Define o texto de cada rótulo e esconde a coluna de ID. */
    #municipios-content .municipios-table-row-compact > div:nth-child(1) { display: none; } /* Esconde o ID */
    #municipios-content .municipios-table-row-compact > div:nth-child(2)::before { content: 'Nome'; }
    #municipios-content .municipios-table-row-compact > div:nth-child(3)::before { content: 'CNPJ'; }
    #municipios-content .municipios-table-row-compact > div:nth-child(4)::before { content: 'UF'; }

    /* 7. Ajusta a coluna de ações para o formato de card. */
    #municipios-content .municipios-table-row-compact .col-municipio-acoes {
        flex-direction: row;
        justify-content: flex-start; /* Alinha à esquerda */
        align-items: center;
        flex-wrap: wrap; /* Permite que os botões quebrem a linha se necessário */
        gap: 1rem;
        padding-top: 1rem;
    }

    #municipios-content .municipios-table-row-compact .col-municipio-acoes::before {
        content: none; /* Remove o rótulo da coluna de ações */
    }
}

/* =================================================== */
/* === ESTILOS MOBILE PARA A TELA DE USUÁRIOS (CARDS) === */
/* =================================================== */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho da tabela de usuários. */
    #usuarios-content .table-header-compact {
        display: none;
    }

    /* 2. Remove o fundo do contêiner da tabela. */
    #usuarios-content #usuarios-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    /* 3. Transforma cada linha de usuário em um card. */
    #usuarios-content .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 4. Estiliza os campos de dados dentro do card de usuário. */
    #usuarios-content .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    #usuarios-content .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 5. Adiciona os rótulos (labels) para cada campo de dado. */
    #usuarios-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 6. Define o texto de cada rótulo na ordem correta. */
    #usuarios-content .table-row-compact > div:nth-child(1)::before { content: 'Nome'; }
    #usuarios-content .table-row-compact > div:nth-child(2)::before { content: 'Email'; }
    #usuarios-content .table-row-compact > div:nth-child(3)::before { content: 'Telefone'; }
    #usuarios-content .table-row-compact > div:nth-child(4)::before { content: 'Tipo'; }
    #usuarios-content .table-row-compact > div:nth-child(5)::before { content: 'Consent. WhatsApp'; }

    /* 7. Ajusta a coluna de ações para o layout de card. */
    #usuarios-content .table-row-compact .col-acoes {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 1rem;
    }

    #usuarios-content .table-row-compact .col-acoes::before {
        content: none; /* Remove o rótulo da coluna de ações */
    }
}

/* ======================================================= */
/* === ESTILOS MOBILE PARA AGENTES E CONTATOS (CARDS) === */
/* ======================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /* 1. Regras Genéricas para todas as telas de Contatos/Agentes/Órgãos */
    #agentes-content .table-header-compact,
    #orgaos-content .table-header-compact,
    #contatos-gerais-content .table-header-compact,
    #orgao-contatos-content .table-row-compact[style*="grid-template-columns"] { /* Cabeçalho dos contatos do órgão */
        display: none;
    }

    #agentes-content .table-container,
    #orgaos-content .table-container,
    #contatos-gerais-content .table-container,
    #orgao-contatos-content .table-container {
        background-color: transparent;
        box-shadow: none;
    }

    #agentes-content .table-row-compact,
    #orgaos-content .table-row-compact,
    #contatos-gerais-content .table-row-compact,
    #orgao-contatos-content .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #agentes-content .table-row-compact > div,
    #orgaos-content .table-row-compact > div,
    #contatos-gerais-content .table-row-compact > div,
    #orgao-contatos-content .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    #agentes-content .table-row-compact > div:last-child,
    #orgaos-content .table-row-compact > div:last-child,
    #contatos-gerais-content .table-row-compact > div:last-child,
    #orgao-contatos-content .table-row-compact > div:last-child {
        border-bottom: none;
    }

    /* 2. Adiciona os Rótulos (Labels) */
    #agentes-content .table-row-compact > div::before,
    #orgaos-content .table-row-compact > div::before,
    #contatos-gerais-content .table-row-compact > div::before,
    #orgao-contatos-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* 3. Define os textos dos rótulos para cada tela */

    /* AGENTES E CONTATOS GERAIS/ÓRGÃOS (mesma estrutura) */
    #agentes-content .table-row-compact > div:nth-child(1)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(1)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(1)::before { content: 'Nome'; }

    #agentes-content .table-row-compact > div:nth-child(2)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(2)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(2)::before { content: 'Email'; }

    #agentes-content .table-row-compact > div:nth-child(3)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(3)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(3)::before { content: 'Telefone'; }
    
    #agentes-content .table-row-compact > div:nth-child(4)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(4)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(4)::before { content: 'Cargo/Função'; }

    #agentes-content .table-row-compact > div:nth-child(5)::before,
    #contatos-gerais-content .table-row-compact > div:nth-child(5)::before,
    #orgao-contatos-content .table-row-compact > div:nth-child(5)::before { content: 'Consent. WhatsApp'; }

     /* ÓRGÃOS */
    #orgaos-content .table-row-compact > div:nth-child(1) { display: none; } /* Esconde ID */
    
    #orgaos-content .table-row-compact > div:nth-child(2) {
        /* Garante que este div do nome tenha espaço suficiente */
        min-height: auto; /* Permite que a altura se ajuste ao conteúdo */
        flex-grow: 1; /* Ocupa espaço flexível */
        /* Remova overflow: hidden se houver aqui, ou garanta que não esteja cortando */
        white-space: normal; /* Permite que o texto quebre a linha */
        word-break: break-word; /* Força quebra de palavras longas */
    }
    #orgaos-content .table-row-compact > div:nth-child(2)::before { content: 'Nome do Órgão'; }

    /* 4. Ajustes finais na coluna de Ações */
    #agentes-content .table-row-compact .col-acoes,
    #orgaos-content .table-row-compact .col-acoes,
    #contatos-gerais-content .table-row-compact .col-acoes,
    #orgao-contatos-content .table-row-compact .col-acoes {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
        padding-top: 1rem;
    }

    #agentes-content .table-row-compact .col-acoes::before,
    #orgaos-content .table-row-compact .col-acoes::before,
    #contatos-gerais-content .table-row-compact .col-acoes::before,
    #orgao-contatos-content .table-row-compact .col-acoes::before {
        content: none;
    }
}

/* ======================================================= */
/* === CORREÇÃO  PARA NOME DO ÓRGÃO NO MOBILE === */
/* ======================================================= */

@media (max-width: 768px) {

    /*
     Este seletor mira especificamente na coluna do nome do órgão
     SOMENTE na tela de órgãos e SOMENTE na visualização de cards mobile.
    */
    #orgaos-content .table-row-compact > div:nth-child(2) {
        /* Reseta o 'display' para um comportamento normal de bloco,
           anulando o display '-webkit-box' do desktop. */
        display: flex;

        /* Permite que o conteúdo fique totalmente visível,
           anulando o 'overflow: hidden'. */
        overflow: visible;

        /* Remove qualquer limite de linhas que venha do estilo de desktop. */
        -webkit-line-clamp: unset;
        line-clamp: unset;

        /* Garante que o texto possa quebrar em várias linhas. */
        white-space: normal;
        
        /* Remove qualquer altura máxima que possa estar cortando o texto. */
        max-height: none;
    }
}

/* ================================================================= */
/* === ESTILOS MOBILE PARA SOLICITAÇÕES E FORNECEDORES (CARDS) === */
/* ================================================================= */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

    /*
    |--------------------------------------------------
    | Estilos para a Tela de Solicitações de Cadastro
    |--------------------------------------------------
    */

    #solicitacoes-content .table-header-compact {
        display: none;
    }

    #solicitacoes-content #solicitacoes-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    #solicitacoes-content .table-row-compact {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #solicitacoes-content .table-row-compact > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    
    #solicitacoes-content .table-row-compact > div:last-child {
        border-bottom: none;
        padding-top: 1rem;
    }

    #solicitacoes-content .table-row-compact > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    #solicitacoes-content .table-row-compact > div:nth-child(1)::before { content: 'Nome'; }
    #solicitacoes-content .table-row-compact > div:nth-child(2)::before { content: 'Email'; }
    #solicitacoes-content .table-row-compact > div:nth-child(3)::before { content: 'Telefone'; }
    #solicitacoes-content .table-row-compact > div:nth-child(4)::before { content: 'Município'; }
    #solicitacoes-content .table-row-compact > div:nth-child(5)::before { content: 'CNPJ'; }
    #solicitacoes-content .table-row-compact > div:nth-child(6)::before { content: 'UF'; }
    #solicitacoes-content .table-row-compact > div:nth-child(7)::before { content: 'Data da Solicitação'; }

    #solicitacoes-content .table-row-compact .col-acoes::before {
        content: none;
    }

    /*
    |--------------------------------------------------
    | Estilos para a Tela de Fornecedores
    |--------------------------------------------------
    */

    #fornecedores-content .fornecedores-table-header {
        display: none;
    }

    #fornecedores-content #fornecedores-table-container {
        background-color: transparent;
        box-shadow: none;
    }

    #fornecedores-content .fornecedores-table-row {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: var(--bg-light);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #fornecedores-content .fornecedores-table-row > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    
    #fornecedores-content .fornecedores-table-row > div:last-child {
        border-bottom: none;
        padding-top: 1rem;
    }

    #fornecedores-content .fornecedores-table-row > div::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--text-secondary-color);
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    /* Rótulos para o layout padrão (não-proprietário) */
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(1)::before { content: 'CNPJ'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(2)::before { content: 'Nome Empresarial'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(3)::before { content: 'Telefone'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(4)::before { content: 'E-mail'; }
    #fornecedores-content .fornecedores-table-row.default-layout > div:nth-child(5)::before { content: 'Sócio/Procurador'; }

    /* Rótulos para o layout de proprietário (com a coluna extra de município) */
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(1)::before { content: 'CNPJ'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(2)::before { content: 'Nome Empresarial'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(3)::before { content: 'Telefone'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(4)::before { content: 'E-mail'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(5)::before { content: 'Sócio/Procurador'; }
    #fornecedores-content .fornecedores-table-row.owner-layout > div:nth-child(6)::before { content: 'Município'; }
    
    #fornecedores-content .fornecedores-table-row .col-acoes::before {
        content: none;
    }
}