/**
 * Arquivo: app/control/dispensacao/css/dispensacao_geracao.css
 * Versão: 0.1.0
 * Criado: 2025-11-10 19:10 -03:00
 * 
 * Estilos para módulo de geração de dispensações em lote
 * Herda estilos do padrão COADS + customizaçeeeees específicas
 */

/* ========== Sidebar Fixa ========== */
.dispensacao-sidebar-fixed {
position: sticky;
top: 70px;
max-height: calc(100vh - 90px);
overflow-y: auto;
}

/* ========== KPI Boxes ========== */
.kpi-box {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
}

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

.kpi-icon {
font-size: 32px;
position: absolute;
right: 20px;
top: 20px;
opacity: 0.3;
}

.kpi-value {
font-size: 36px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}

.kpi-label {
font-size: 14px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}

#/* ========== Botões de Sele
o ========== */
.selection-buttons-container {
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}

.selection-buttons-container button {
margin: 0;
}

#badge-selecionados {
padding: 6px 12px;
font-weight: 600;
}

/* ========== DataGrid Checkboxes ========== */
.competencia-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
}

/* ========== Painel de Distribuição (Step 2) ========== */
.distribuicao-panel {
background: #f8f9fa;
border: 2px dashed #007bff;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
display: none;
}

.distribuicao-panel.show {
display: block;
animation: slideDown 0.3s ease;
}

.distribuicao-panel .form-group {
margin-bottom: 15px;
}

/* ========== Radio Buttons Customizados ========== */
.radio-option {
padding: 15px;
border: 2px solid #dee2e6;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 10px;
background: #fff;
}

.radio-option:hover {
border-color: #007bff;
background: #f8f9fa;
}

.radio-option input[type="radio"]:checked ~ label,
.radio-option input[type="radio"]:checked + label {
color: #007bff;
font-weight: bold;
}

/* ========== Badges de Status ========== */
.badge-autorizado {
background: #28a745 !important;
color: #fff !important;
}

.badge-pendente {
background: #ffc107 !important;
color: #000 !important;
}

.badge-agendada {
background: #17a2b8 !important;
color: #fff !important;
}

.badge-preparando {
background: #6c757d !important;
color: #fff !important;
}

/* ========== Calendário Modal (Step 2) ========== */
.calendario-preview {
max-height: 500px;
overflow-y: auto;
padding: 15px;
}

.calendario-dia {
padding: 10px;
margin: 5px 0;
border-left: 4px solid #28a745;
background: #fff;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.calendario-dia.feriado {
border-left-color: #dc3545;
background: #fff5f5;
}

.calendario-dia.fim-semana {
border-left-color: #ffc107;
background: #fffef5;
}

.calendario-dia-info {
flex: 1;
}

.calendario-dia-data {
font-weight: bold;
color: #333;
font-size: 14px;
}

.calendario-dia-nome {
font-size: 12px;
color: #666;
margin-top: 3px;
}

.calendario-dia-badge {
font-size: 16px;
font-weight: bold;
padding: 5px 12px;
}

/* ========== Animações ========== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
max-height: 1000px;
transform: translateY(0);
}
}

.kpi-box {
animation: fadeIn 0.5s ease;
}

.kpi-box:nth-child(1) { animation-delay: 0.1s; }
.kpi-box:nth-child(2) { animation-delay: 0.2s; }
.kpi-box:nth-child(3) { animation-delay: 0.3s; }
.kpi-box:nth-child(4) { animation-delay: 0.4s; }

/* ========== Widgets COADS ========== */
.top10-widget {
margin-bottom: 20px;
}

.tags-cloud-widget {
margin-bottom: 20px;
}

/* ========== Responsivo ========== */
@media (max-width: 768px) {
.dispensacao-sidebar-fixed {
position: relative;
top: auto;
max-height: none;
}

.kpi-value {
font-size: 28px;
}

.kpi-icon {
font-size: 24px;
}

.selection-buttons-container {
flex-direction: column;
align-items: stretch;
}

.selection-buttons-container button {
width: 100%;
margin-bottom: 5px;
}

#badge-selecionados {
display: block;
text-align: center;
margin: 10px 0 0 0;
}
}