/* ===== jQuery BlockUI Dark Theme Override =====
   Remove a "caixinha branca" legada e deixa apenas o spinner
   bem centralizado, com fundo blur escuro — coerente com o CN. */
.blockOverlay {
    background-color: rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.18s ease;
}
.blockMsg, .blockUI.blockMsg {
    background: transparent !important;
    border: 0 !important;
    color: #e5e7eb !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 0 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.blockMsg .spinner-border {
    color: #60a5fa !important;
    width: 3rem !important;
    height: 3rem !important;
    border-width: 0.3rem !important;
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.45));
}
.blockMsg h5, .blockMsg h6, .blockMsg p { color: #e5e7eb !important; }

/* Fade-in suave para reduzir a sensação de "flash" */
.blockOverlay, .blockMsg { animation: cn-fade-in 0.18s ease; }

/* ===== Sistema de Notificação Central V2 (CN) ===== */

/* Toast de sucesso: sem overlay, centralizado com zoom */
#cn-toast {
    position: fixed;
    left: 50%; top: 50%;
    z-index: 99999;
    background: linear-gradient(145deg, rgba(10,12,22,0.99), rgba(15,15,25,0.99));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 2rem 2.8rem;
    text-align: center;
    min-width: 260px;
    max-width: 340px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    animation: cn-toast-in 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
#cn-toast.cn-out { animation: cn-toast-out 0.25s ease forwards; }

/* Modal/Confirm/Custom: com overlay escurecido + blur */
#cn-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    animation: cn-fade-in 0.2s ease;
    padding: 16px;
}
#cn-overlay.cn-out { animation: cn-fade-out 0.22s ease forwards; }

#cn-modal {
    background: linear-gradient(145deg, rgba(10,12,22,0.99), rgba(15,15,25,0.99));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px;
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 370px; width: 90%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    animation: cn-modal-in 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
#cn-overlay.cn-out #cn-modal { animation: cn-modal-out 0.22s ease forwards; }

/* Modal largo para confirm/custom */
#cn-modal.cn-modal-wide {
    max-width: 560px;
    width: 94%;
}

/* Elementos compartilhados */
.cn-icon  { font-size: 3.5rem; display: block; margin-bottom: 0.8rem; animation: cn-pop 0.42s cubic-bezier(0.34,1.56,0.64,1) 0.12s both; }
.cn-title { color: #f1f5f9; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.8rem; }
.cn-msg   { color: #94a3b8; font-size: 0.9rem; line-height: 1.65; }
.cn-btn   { margin-top: 0; padding: 0.62rem 1.8rem; border: none; border-radius: 9px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: #fff; transition: transform 0.15s, opacity 0.15s; }
.cn-btn:hover  { transform: translateY(-2px); opacity: 0.88; }
.cn-btn:active { transform: translateY(0); }
.cn-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Corpo scrollável do confirm/custom */
.cn-confirm-body {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    margin-bottom: 0;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
}

/* Bootstrap .row usa margin: 0 -15px; dentro de overflow-x:hidden isso clippa
   o conteúdo da esquerda (letras cortadas). Zeramos aqui para CN modals. */
.cn-confirm-body .row,
.cn-confirm-body .form-group.row {
    margin-left: 0;
    margin-right: 0;
}

/* Botões do confirm/custom (alinhados à direita) */
.cn-confirm-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Form elements inside CN modals — dark theme */
.cn-confirm-body .form-control,
.cn-confirm-body select,
.cn-confirm-body textarea {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
}
.cn-confirm-body .form-control:focus,
.cn-confirm-body select:focus,
.cn-confirm-body textarea:focus {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.25) !important;
    box-shadow: none !important;
    outline: none !important;
}
.cn-confirm-body label,
.cn-confirm-body strong,
.cn-confirm-body p { color: #e2e8f0; }
.cn-confirm-body hr  { border-color: rgba(255,255,255,0.1); }
.cn-confirm-body select option { background: #111827; color: #e2e8f0; }

/* Keyframes */
@keyframes cn-fade-in   { from { opacity:0 } to { opacity:1 } }
@keyframes cn-fade-out  { from { opacity:1 } to { opacity:0 } }
@keyframes cn-toast-in  { from { opacity:0; transform:translate(-50%,-50%) scale(0.45); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes cn-toast-out { from { opacity:1; transform:translate(-50%,-50%) scale(1);    } to { opacity:0; transform:translate(-50%,-50%) scale(0.45); } }
@keyframes cn-modal-in  { from { opacity:0; transform:scale(0.45); } to { opacity:1; transform:scale(1); } }
@keyframes cn-modal-out { from { opacity:1; transform:scale(1);    } to { opacity:0; transform:scale(0.45); } }
@keyframes cn-pop       { from { opacity:0; transform:scale(0.2);  } to { opacity:1; transform:scale(1); } }
