/* =========================================================
   DetoConcilia — componentes (modal, wizard, badges)
   ========================================================= */

/* ---------- Modal: backdrop + animação ---------- */
.deto-modal-backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.deto-modal-backdrop.deto-modal--open {
    opacity: 1;
}

.deto-modal-panel {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    max-height: calc(100vh - 1.5rem);
}

.deto-modal-panel--open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Em telas muito pequenas, modal ocupa quase tudo */
@media (max-width: 480px) {
    .deto-modal-panel {
        max-height: calc(100vh - 1rem);
        border-radius: 1rem;
    }
}

/* ---------- SweetAlert2: override para casar com o produto ---------- */
.deto-swal {
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    font-family: inherit !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

.deto-swal__title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
}

.deto-swal__text {
    font-size: 0.875rem !important;
    color: #64748B !important;
}

.deto-swal__confirm,
.deto-swal__cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.75rem !important;
    padding: 0 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin: 0 0.25rem !important;
    transition: background-color 180ms ease, transform 180ms ease !important;
}

.deto-swal__confirm {
    background: #16A34A !important;
    color: #FFFFFF !important;
}

.deto-swal__confirm:hover {
    background: #15803D !important;
}

.deto-swal__cancel {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #E2E8F0 !important;
}

.deto-swal__cancel:hover {
    background: #F8FAFC !important;
}


/* =========================================================
   DetoConcilia — Tabela responsiva de conciliação
   ========================================================= */

/* Container com scroll horizontal + sombra indicativa nas bordas */
.deto-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* Sombra que aparece quando há conteúdo escondido à direita */
    background:
        linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat,
        linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.08), transparent) left / 14px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.08), transparent) right / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.deto-table-scroll::-webkit-scrollbar {
    height: 8px;
}

.deto-table-scroll::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}

.deto-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Tabela base */
.deto-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.deto-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #F8FAFC;
    box-shadow: inset 0 -1px 0 #E2E8F0;
}

.deto-table td,
.deto-table th {
    vertical-align: middle;
}

/* Truncamento com tooltip nativo */
.deto-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Larguras fixas por coluna (aplicadas via classe na <col>) */
.deto-col-chk {
    width: 36px;
}

.deto-col-data {
    width: 88px;
}

.deto-col-valor {
    width: 120px;
}

.deto-col-conta {
    width: 220px;
}

.deto-col-regra {
    width: 140px;
}

.deto-col-conf {
    width: 56px;
}

.deto-col-status {
    width: 108px;
}

.deto-col-acoes {
    width: 76px;
}

/* Em telas médias, esconder colunas menos críticas */
@media (max-width: 1279px) {

    .deto-col-regra,
    .deto-col-conf {
        display: none;
    }
}

@media (max-width: 1023px) {
    .deto-col-conta {
        width: 180px;
    }

    .deto-col-data {
        width: 78px;
    }
}

@media (max-width: 767px) {

    /* Abaixo de 768px usamos cards (o JS decide) */
    .deto-table-scroll {
        display: none;
    }
}

/* Em telas médias a descrição ocupa mais */
@media (min-width: 768px) and (max-width: 1279px) {
    .deto-col-descricao {
        width: auto;
    }
}