/* =========================================
   1. CONFIGURAÇÕES & VARIÁVEIS (PALETA SLATE)
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

   :root {
       /* Fundo e Superfícies */
       --bg-page: #f8fafc;        /* Slate-50: Fundo quase branco */
       --bg-surface: #ffffff;     /* Branco puro para cards */
       
       /* Tipografia e Bordas */
       --text-primary: #0f172a;   /* Slate-900: Quase preto, alto contraste */
       --text-secondary: #64748b; /* Slate-500: Cinza suave para legendas */
       --border-subtle: #e2e8f0;  /* Slate-200: Bordas imperceptíveis */
       
       /* Acentos (Cores Funcionais) */
       --accent: #3b82f6;         /* Azul vibrante, mas controlado */
       --accent-hover: #2563eb;
       
       /* Métricas */
       --radius: 8px;             /* Bordas levemente arredondadas, não exageradas */
       --spacing: 24px;
   }
   
   /* =========================================
      2. RESET MINIMALISTA
      ========================================= */
   * { box-sizing: border-box; margin: 0; padding: 0; }
   
   body {
       background-color: var(--bg-page);
       font-family: 'Inter', sans-serif;
       color: var(--text-primary);
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
       padding: 40px 20px; /* Mais espaço nas bordas da tela */
   }
   
   a { text-decoration: none; color: inherit; }
   
   .container {
       max-width: 1100px; /* Largura mais contida para leitura confortável */
       margin: 0 auto;
   }
   
   /* =========================================
      3. ELEMENTOS DE UI (BOTÕES E TÍTULOS)
      ========================================= */
   /* Títulos limpos, sem bordas ou linhas */
   h1, h2, h3 {
       font-weight: 600;
       color: var(--text-primary);
       letter-spacing: -0.02em; /* Aproxima levemente as letras (moderno) */
   }
   
   /* Botões Flat e Discretos */
   .btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 16px;
       border-radius: 6px;
       font-size: 0.85rem;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.2s;
       border: 1px solid transparent;
   }
   
   .btn-warning {
       background-color: #fff;
       border: 1px solid #e2e8f0;
       color: #0f172a;
   }
   .btn-warning:hover { background-color: #f1f5f9; border-color: #cbd5e1; }
   
   .btn-danger {
       background-color: #fff;
       border: 1px solid #fee2e2;
       color: #ef4444;
   }
   .btn-danger:hover { background-color: #fef2f2; border-color: #fecaca; }
   
   /* =========================================
      4. HEADER (MINIMALISTA)
      ========================================= */
   .admin-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start; /* Alinhamento ao topo */
       margin-bottom: 50px;     /* Muito espaço abaixo do header */
       padding-bottom: 20px;
       border-bottom: 1px solid var(--border-subtle); /* Linha fina separando */
   }
   
   .admin-header h2 {
       font-size: 1.75rem;
       margin-bottom: 4px;
   }
   
   .admin-header p {
       color: var(--text-secondary);
       font-size: 0.95rem;
   }
   
   /* Esconde ícones grandes do header para ficar mais limpo */
   .admin-header h2 i { display: none; } 
   
   /* =========================================
      5. GRIDS E CARDS (FLAT DESIGN)
      ========================================= */
   .main-grid {
       display: grid;
       grid-template-columns: 2fr 1fr; /* 2/3 e 1/3 */
       gap: 40px;
       margin-bottom: 60px;
   }
   
   .stats-box {
       background: transparent; /* Sem fundo branco no container maior */
   }
   
   /* Títulos das seções de estatística */
   .stats-box h3 {
       font-size: 0.85rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--text-secondary);
       font-weight: 600;
       margin-bottom: 20px;
       border-bottom: none; /* Sem linha embaixo do título */
       display: flex; justify-content: space-between;
   }
   
   /* Removemos os ícones dos títulos das caixas para limpar */
   .stats-box h3 i { display: none; }
   .stats-box h3 small { display: none; } /* Esconde o "Mês atual" redundante */
   
   /* --- Barras de Progresso Ultra Finas --- */
   .prog-row {
       display: flex;
       align-items: center;
       margin-bottom: 18px;
   }
   
   .prog-name {
       width: 25%;
       font-size: 0.9rem;
       color: var(--text-primary);
       font-weight: 500;
   }
   
   .prog-bar-bg {
       flex: 1;
       height: 6px; /* Barra bem fina */
       background: #e2e8f0;
       border-radius: 99px;
       margin: 0 20px;
   }
   
   .prog-bar-fill { border-radius: 99px; }
   
   .prog-val {
       width: 50px;
       text-align: right;
       font-size: 0.85rem;
       color: var(--text-secondary);
       font-variant-numeric: tabular-nums;
   }
   
   /* --- Ranking Minimalista --- */
   .rank-item {
       display: flex;
       justify-content: space-between;
       padding: 10px 0;
       border-bottom: 1px solid #f1f5f9;
   }
   .rank-item:last-child { border: none; }
   
   .rank-item span:first-child { font-weight: 500; color: var(--text-primary); }
   
   .rank-badge {
       color: var(--text-secondary);
       background: #f1f5f9;
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 0.8rem;
       font-weight: 600;
   }
   
   /* Número Gigante (Total) - Estilo tipográfico */
   .total-stat {
       margin-top: 30px;
       text-align: left; /* Alinhado a esquerda, não centro */
   }
   .total-stat span:first-child {
       font-size: 4rem;
       font-weight: 700;
       letter-spacing: -0.05em;
       color: var(--text-primary);
       line-height: 1;
   }
   .total-stat span:last-child {
       display: block;
       margin-top: 5px;
       font-size: 0.85rem;
       color: var(--text-secondary);
       font-weight: 500;
   }
   
   /* =========================================
      6. GRID DE MINISTÉRIOS (CLEAN TILES)
      ========================================= */
   .section-title {
       font-size: 1.1rem;
       margin-bottom: 25px;
       color: var(--text-primary);
       border: none; padding: 0;
   }
   
   .ministry-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       gap: 20px;
   }
   
   .mini-card {
       background: var(--bg-surface);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius);
       padding: 25px 20px;
       text-align: center;
       transition: all 0.2s ease;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 15px;
       color: var(--text-secondary); /* Texto cinza por padrão */
   }
   
   /* Hover sutil: Borda azul e texto preto */
   .mini-card:hover {
       border-color: var(--accent);
       color: var(--accent);
       transform: translateY(-2px);
       box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.15);
   }
   
   .mini-card i {
       font-size: 1.5rem;
       margin-bottom: 5px;
       color: inherit; /* Segue a cor do texto */
   }
   
   .mini-card span {
       font-weight: 500;
       font-size: 0.9rem;
       color: var(--text-primary);
   }
   
   /* =========================================
      7. SEÇÃO "HOJE" (LISTAGEM LIMPA)
      ========================================= */
   .today-section {
       margin-top: 60px;
       border-top: 1px solid var(--border-subtle);
       padding-top: 40px;
   }
   
   .today-title {
       font-size: 1.1rem;
       color: var(--text-primary);
       margin-bottom: 30px;
       display: flex; align-items: center; gap: 10px;
   }
   
   /* Removemos o ícone do título para manter minimalista */
   .today-title i { display: none; }
   
   .today-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 25px;
   }
   
   .card-today {
       background: var(--bg-surface);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius);
       /* Sem sombra, estilo Flat */
   }
   
   .card-today-header {
       padding: 15px 20px;
       border-bottom: 1px solid #f1f5f9;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .card-today-header span:first-child {
       font-weight: 600;
       font-size: 0.95rem;
       color: var(--text-primary);
   }
   
   .badge-turno {
       background: #f8fafc;
       color: var(--text-secondary);
       font-size: 0.75rem;
       padding: 4px 10px;
       border-radius: 99px;
       font-weight: 600;
   }
   
   .card-today-body { padding: 10px 0; }
   
   .card-today li {
       padding: 10px 20px;
       font-size: 0.9rem;
       color: var(--text-secondary); /* Nome do obreiro em cinza */
       display: flex; gap: 10px;
   }
   
   /* Ícone de usuário (👤) vira apenas um ponto ou some */
   .card-today li::before {
       content: '';
       display: block;
       width: 6px;
       height: 6px;
       background-color: #cbd5e1;
       border-radius: 50%;
       margin-top: 8px; /* Centraliza com o texto */
   }
   
   /* =========================================
      RESPONSIVIDADE
      ========================================= */
   @media (max-width: 768px) {
       .main-grid { grid-template-columns: 1fr; gap: 40px; }
       .admin-header { flex-direction: column; gap: 15px; }
       .btn { width: 100%; justify-content: center; }
       .prog-row { flex-wrap: wrap; gap: 5px; }
       .prog-name { width: 100%; margin-bottom: 5px; }
       .prog-bar-bg { margin: 5px 0 10px 0; width: 100%; }
       .prog-val { text-align: left; }
   }