/* public/styles/dashboard.css - Versão Final V16 (UX Gestor Aprimorada) */

body {
    background-color: #f4f4f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #212529;
    margin: 0;
    padding: 0;
}

/* Utilitário Acessibilidade */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* =================================================================== */
/* 1. HEADER E USUÁRIO */
/* =================================================================== */
.dashboard-header {
    display: flex; justify-content: space-between; align-items: center;
    margin: 40px 0 30px; padding-bottom: 20px; border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap; gap: 20px;
}
.dashboard-header h1 { margin: 0 0 5px; font-size: 2rem; color: #212529; }
.dashboard-header p { margin: 0; color: #6c757d; font-size: 1.1rem; }

.user-info {
    display: flex; align-items: center; gap: 12px;
    background: #fff; padding: 8px 16px; border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #dee2e6;
}
.avatar-circle {
    width: 36px; height: 36px;
    background-color: #0056b3; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; text-transform: uppercase;
}
.badge-pro {
    background-color: #198754; color: #fff;
    font-size: 0.75rem; padding: 2px 8px; border-radius: 4px;
    font-weight: 700; letter-spacing: 0.5px;
}
.btn-text {
    background: none; border: none; cursor: pointer;
    color: #dc3545; font-weight: 600; padding: 0;
    font-size: 1rem; text-decoration: underline;
}
.btn-text:hover, .btn-text:focus { color: #a71d2a; }

/* =================================================================== */
/* 2. PLACAR DE KPIS */
/* =================================================================== */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.card-stat {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-top: 4px solid #ccc;
    transition: transform 0.2s;
}
.card-stat:hover { transform: translateY(-3px); }

.card-stat h3 { margin: 0 0 10px; font-size: 1rem; color: #555; font-weight: 600; }
.stat-number { font-size: 2.2rem; font-weight: 700; color: #333; }

/* Cores das Bordas dos Cards */
.border-critical { border-color: #dc3545; }
.border-serious { border-color: #fd7e14; }
.border-moderate { border-color: #ffc107; }
.border-minor { border-color: #17a2b8; }
.border-total { border-color: #6c757d; }

/* =================================================================== */
/* 3. BARRA DE FILTROS */
/* =================================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #e9ecef;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    align-items: center;
}

.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-group label { font-weight: 600; font-size: 0.9rem; color: #495057; }
.filter-group select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}
.filter-group select:focus { outline: 2px solid #0056b3; }

/* =================================================================== */
/* 4. GRID DE RELATÓRIOS */
/* =================================================================== */
.reports-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px; margin-bottom: 60px;
}

/* Card Report (Acessível) */
.report-card {
    background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
    padding: 20px; display: flex; flex-direction: column;
    position: relative; transition: transform 0.2s, box-shadow 0.2s;
}
.report-card:hover, .report-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-color: #adb5bd;
}

/* Card Header */
.card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10px;
}
.card-title {
    font-size: 1.2rem; font-weight: 700; margin: 0; color: #212529;
    line-height: 1.4; word-break: break-word;
}

/* Card Body */
.card-meta {
    font-size: 0.9rem; color: #6c757d; margin-bottom: 15px;
}
.card-meta strong { color: #495057; }

/* Card Footer */
.card-footer {
    margin-top: auto; padding-top: 15px; border-top: 1px solid #f1f1f1;
    display: flex; justify-content: space-between; align-items: center;
}

.view-link {
    color: #0056b3; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.view-link:hover, .view-link:focus { text-decoration: underline; color: #003d82; }
.view-link::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}

/* Botão Delete Relatório */
.btn-delete {
    background: none; border: 1px solid transparent; cursor: pointer;
    font-size: 1.2rem; color: #6c757d; padding: 5px;
    border-radius: 4px; z-index: 2; position: relative;
    transition: color 0.2s, background 0.2s;
}
.btn-delete:hover, .btn-delete:focus {
    color: #dc3545; background-color: #ffe6e6; border-color: #f5c6cb;
    outline: none;
}

/* Estados */
.loading-state, .empty-state {
    grid-column: 1 / -1; text-align: center; padding: 60px;
    color: #6c757d; background: #fff; border-radius: 8px; border: 1px dashed #ccc;
}
.alert-box {
    padding: 15px; border-radius: 6px; margin-bottom: 20px;
    font-weight: 500; text-align: center; display: none;
}
.alert-success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.alert-error { background-color: #f8d7da; color: #842029; border: 1px solid #f5c6cb; }

/* =================================================================== */
/* 5. NAVEGAÇÃO E HIERARQUIA */
/* =================================================================== */

/* Breadcrumbs */
.breadcrumbs-bar {
    padding: 10px 0; margin-bottom: 25px;
    font-size: 1.1rem; color: #6c757d;
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.breadcrumbs-bar .crumb {
    cursor: pointer; color: #0056b3; font-weight: 500;
    transition: color 0.2s; padding: 2px 6px; border-radius: 4px;
}
.breadcrumbs-bar .crumb:hover {
    background-color: #e9ecef; text-decoration: underline; color: #003d82;
}
.breadcrumbs-bar .crumb-active {
    font-weight: 700; color: #212529; cursor: default;
}

/* Grid de Pastas */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Card de Pasta (Agora suporta <button> e <div>) */
.folder-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 25px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 160px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    
    /* Propriedades para quando for <button> */
    width: 100%;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    
    /* Importante para posicionar os botões de ação */
    position: relative; 
}

.folder-card:hover, .folder-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: #0056b3;
    background-color: #f8faff;
}
.folder-card:active { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

.folder-card div:last-child {
    /* Nome da pasta */
    transition: color 0.2s;
}

/* Ícone da pasta */
.folder-card div[aria-hidden="true"] {
    transition: transform 0.2s;
}
.folder-card:hover div[aria-hidden="true"] { transform: scale(1.1); }


/* Ações da Pasta (Renomear + Compartilhar + Excluir) */
.folder-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    z-index: 5;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.9); /* Leve fundo branco para contraste */
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
    transition: all 0.2s;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* Hover específico para Deletar */
.btn-delete-folder:hover {
    color: #dc3545;
    border-color: #f5c6cb;
    background-color: #fff5f5;
}

/* Hover específico para Compartilhar */
.btn-share-folder:hover {
    color: #0d6efd;
    border-color: #0d6efd;
    background-color: #f0f7ff;
}

/* Hover específico para Renomear */
.btn-rename-folder:hover {
    color: #ffc107;
    border-color: #ffc107;
    background-color: #fffbf0;
}

/* =================================================================== */
/* 6. MODO COMPARTILHADO (VISÃO DO GESTOR) */
/* =================================================================== */

/* Esconde ações de edição/exclusão */
body.shared-mode .btn-delete,
body.shared-mode .btn-delete-folder,
body.shared-mode .btn-share-folder,
body.shared-mode .btn-rename-folder,
body.shared-mode .folder-actions {
    display: none !important;
}

/* Esconde menu de usuário/login */
body.shared-mode .user-info,
body.shared-mode #btn-logout {
    display: none !important;
}

/* Ajuste do Header no modo compartilhado */
body.shared-mode .dashboard-header {
    background-color: #e3f2fd; /* Azulzinho claro para diferenciar */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Tag indicando modo visualização */
.shared-badge {
    display: inline-block;
    background: #0056b3;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* =================================================================== */
/* 7. VISÃO GESTOR (NOVOS COMPONENTES) - VISUAL BUSINESS */
/* =================================================================== */

.manager-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.manager-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.manager-card h4 {
    margin: 0 0 15px 0;
    color: #555;
    font-size: 1rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Card Escopo */
.scope-card .big-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: #333;
    line-height: 1;
    margin-bottom: 10px;
}
.scope-card .big-number small {
    font-size: 1rem;
    font-weight: 400;
    color: #666;
}
.scope-card .sub-stat {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 5px;
}

/* Card Top Erros (Clean Look) */
.top-errors-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.top-errors-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}
.top-errors-list li:last-child { border-bottom: none; }

/* Estilo "Etiqueta Legível" para o nome do erro - SEM MONOSPACE */
.error-name {
    color: #333;
    font-weight: 500;
    background: #f8f9fa; /* Cinza bem claro */
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}
.error-count { font-weight: 700; color: #555; font-size: 0.9rem; }

/* Card Compliance (Cores de Alerta) */
.wcag-bar-group { margin-bottom: 15px; }
.bar-label { font-size: 0.9rem; margin-bottom: 5px; color: #555; font-weight: 600; }
.progress {
    background: #e9ecef;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 5px;
}
.fill { height: 100%; border-radius: 6px; }

/* MUDANÇA: Cores de alerta para indicar problema */
.fill-a { background-color: #fd7e14; } /* Laranja (Atenção) */
.fill-aa { background-color: #dc3545; } /* Vermelho (Crítico) */

.bar-val { font-size: 0.85rem; color: #666; text-align: right; }

/* Ajuste Mobile */
@media (max-width: 768px) {
    .manager-overview { grid-template-columns: 1fr; }
}

/* =================================================================== */
/* 8. AJUSTES DE IMPRESSÃO */
/* =================================================================== */
@media print {
    /* Esconde elementos interativos e desnecessários */
    .dashboard-header .user-info, 
    #btn-print-dash,
    .filter-bar,
    .folder-actions, 
    .btn-delete,
    #chat-widget-container,
    #breadcrumbs,
    #btn-logout {
        display: none !important;
    }
    
    /* Ajusta layout para papel */
    .dashboard-grid, .reports-grid {
        display: block; 
    }
    
    .folder-card, .report-card {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        page-break-inside: avoid;
        box-shadow: none;
    }
    
    body { background-color: white; }
    
    /* Garante que links mostrem URL se necessário ou fiquem limpos */
    a { text-decoration: none; color: #000; }
}