/* css/gerenciar_obreiros.css */

/* Cabeçalho da Página */
.page-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 20px; 
} 

/* Tabela e Card */
.table-card { 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    overflow: hidden; 
    border: 1px solid #eff2f7; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 600px; 
}

th { 
    background: #f8f9fa; 
    text-align: left; 
    padding: 15px 20px; 
    font-weight: 600; 
    color: #64748B; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    border-bottom: 2px solid #eee; 
}

td { 
    padding: 15px 20px; 
    border-bottom: 1px solid #f9f9f9; 
    color: #334155; 
    font-size: 0.95rem; 
    vertical-align: middle; 
}

tr:last-child td { border-bottom: none; }
tr:hover { background: #fafbfc; }

/* Avatar e Usuário */
.avatar { 
    width: 35px; 
    height: 35px; 
    background: #E0E7FF; 
    color: #4F46E5; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 0.85rem; 
    margin-right: 12px; 
    flex-shrink: 0; 
    object-fit: cover; 
    border: 1px solid #E2E8F0; 
}

.user-cell { display: flex; align-items: center; }

/* Badges de Status */
.badge-status { 
    padding: 4px 10px; 
    border-radius: 20px; 
    font-size: 0.75rem; 
    font-weight: 600; 
    text-transform: uppercase; 
}
.bg-active { background: #DCFCE7; color: #15803D; }
.bg-inactive { background: #FEF2F2; color: #B91C1C; }

/* Ações */
.action-link { 
    color: #94A3B8; 
    padding: 4px; 
    transition: 0.2s; 
}
.action-link:hover { color: var(--primary-blue); }
.action-link.del:hover { color: #EF4444; }

.action-cell { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    gap: 10px; 
    min-width: 100px; 
}

/* Notificações */
.notif-success { 
    background:#DCFCE7; 
    color:#15803D; 
    border-color:#BBF7D0; 
    padding:15px; 
    border-radius:8px; 
    margin-bottom:20px; 
    opacity: 1; 
    transition: opacity 0.5s ease-out; 
}

/* KPI Cards */
.kpi-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px; 
    margin-bottom: 30px; 
}
.kpi-card { 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    border-left: 5px solid; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.kpi-title { 
    font-size: 0.9em; 
    color: #7F8C8D; 
    font-weight: 600; 
    margin-bottom: 5px; 
    text-transform: uppercase; 
}
.kpi-value { 
    font-size: 2em; 
    font-weight: 700; 
    color: #34495E; 
    line-height: 1; 
}
.kpi-icon { font-size: 2.2em; opacity: 0.15; }

.border-blue { border-left-color: var(--primary-blue); } .icon-blue { color: var(--primary-blue); }
.border-green { border-left-color: var(--action-green); background: #f0fff4; } .icon-green { color: var(--action-green); }
.border-red { border-left-color: #e74c3c; background: #fff5f5; } .icon-red { color: #e74c3c; }

/* Filtro Alfabético */
.alpha-nav { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
    justify-content: center; 
    margin-bottom: 25px; 
    padding: 10px; 
    background: transparent; 
}
.alpha-link { 
    color: #94A3B8; 
    font-size: 0.8rem; 
    font-weight: 600; 
    padding: 4px 10px; 
    border-radius: 4px; 
    text-decoration: none; 
    transition: all 0.2s; 
}
.alpha-link:hover { color: var(--primary-blue); background: #E0F2FE; }
.alpha-link.active { color: white; background: var(--primary-blue); box-shadow: 0 2px 4px rgba(0, 145, 230, 0.2); }

/* Paginação */
.pagination { 
    display: flex; 
    justify-content: center; 
    gap: 5px; 
    padding: 20px; 
    margin-top: 10px; 
}
.page-link { 
    padding: 8px 12px; 
    border: 1px solid #E2E8F0; 
    border-radius: 6px; 
    color: #64748B; 
    text-decoration: none; 
    font-size: 0.9rem; 
    font-weight: 500; 
    transition: 0.2s; 
    background: white; 
}
.page-link:hover { background: #F8FAFC; color: var(--primary-blue); border-color: var(--primary-blue); }
.page-link.active { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }
.page-link.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.list-header-row { 
    margin-bottom: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items:center; 
    gap: 10px; 
    flex-wrap: wrap; 
}

/* Rodapé */
.main-footer { 
    margin-top: 50px; 
    padding-top: 20px; 
    border-top: 1px solid #E2E8F0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #94A3B8; 
    font-size: 0.85rem; 
    margin-bottom: 20px; 
}
.main-footer a { color: #64748B; text-decoration: none; font-weight: 600; transition: 0.2s; }
.main-footer a:hover { color: var(--primary-blue); }

/* Modal Tags */
.tag-option {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 10px; 
    background: #f8f9fa; 
    border: 1px solid #e9ecef;
    border-radius: 6px; 
    cursor: pointer; 
    transition: 0.2s;
    margin-bottom: 8px;
}

.tag-option:hover {
    background: #e2e6ea;
    transform: translateX(5px);
}

.tag-option input[type="checkbox"] {
    transform: scale(1.3); /* Deixa o checkbox maior */
    cursor: pointer;
}

.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 1000; 
    align-items: center; 
    justify-content: center; 
}
.modal-content { 
    background: white; 
    width: 90%; 
    max-width: 400px; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
}
.modal-header-custom { 
    padding: 15px 20px; 
    border-bottom: 1px solid #eee; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #f8f9fa; 
}
.modal-header-custom h3 { margin: 0; font-size: 1.1rem; color: #333; }
.modal-body { padding: 20px; }

/* Mobile */
@media (max-width: 768px) {
    body { padding: 10px; }
    .page-header { flex-direction: column; gap: 15px; text-align: center; }
    .hide-mobile { display: none; } 
    th, td { padding: 12px 10px; }
    .list-header-row { justify-content: center; text-align: center; }
    .list-header-row h3 { width: 100%; }
    .main-footer { flex-direction: column; gap: 10px; text-align: center; }
}