/* ===== 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 {
    position: relative;
    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%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    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-close { position:absolute; top:4px; right:4px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; border-radius:9px; background:transparent; color:#94a3b8; cursor:pointer; }
.cn-close:hover { background:rgba(59,130,246,.12); color:#f1f5f9; }
.cn-close:focus-visible { outline:2px solid #60a5fa; outline-offset:-3px; }
.cn-close:disabled { opacity:.4; cursor:wait; }
.cn-form-error { margin-top:12px; color:#fca5a5; overflow-wrap:anywhere; text-align:left; }
.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; }

/* Rodapé dos modais simples: mantém o botão afastado da mensagem sem exigir
   <br> em cada chamada CN.modal(). */
.cn-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

/* 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);
}

@media (max-width: 575.98px) {
    #cn-overlay {
        padding: 12px;
    }

    #cn-modal {
        width: 100%;
        padding: 1.55rem 1rem;
        border-radius: 18px;
    }

    #cn-modal.cn-modal-wide {
        width: 100%;
        max-width: 34rem;
    }

    .cn-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    .cn-confirm-body {
        max-height: 58vh;
    }

    .cn-modal-actions {
        margin-top: 1.15rem;
    }

    .cn-confirm-btns {
        display: flex;
        gap: 8px;
        justify-content: stretch;
        flex-wrap: nowrap;
        margin-top: 1rem;
        padding-top: 0.9rem;
    }

    .cn-confirm-btns .cn-btn {
        width: 100%;
        flex: 1 1 0;
        min-width: 0;
        padding: 0.72rem 0.45rem;
        font-size: 0.82rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cn-confirm-btns .cn-btn:only-child {
        flex-basis: 100%;
    }
}

/* 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); } }
