:root {
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    --bs-body-bg: #0b0f19;
    --bs-body-color: #cbd5e1;
    --bs-card-bg: #111827;
    --bs-card-border-color: #1f293d;
    --accent-cyan: #06b6d4;
    --accent-indigo: #6366f1;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .9rem;
}

.card-custom {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-card-border-color);
    border-radius: .85rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .4);
}

.app-header {
    background: linear-gradient(180deg, rgba(17, 24, 39, .9), rgba(11, 15, 25, .8));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bs-card-border-color);
}

.upload-dropzone {
    border: 2px dashed #2d3d5a;
    background: rgba(15, 23, 42, .6);
    border-radius: .75rem;
    padding: 2.2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all .25s ease-in-out;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, .08);
    transform: translateY(-2px);
}

.badge-ai {
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: .35rem;
    background: rgba(6, 182, 212, .15);
    color: var(--accent-cyan);
    border: 1px solid rgba(6, 182, 212, .3);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.form-control,
.form-select {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-radius: .5rem !important;
    padding: .6rem .85rem !important;
    font-size: .875rem !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent-indigo) !important;
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25) !important;
}

.form-control[readonly] {
    background-color: #090e1a !important;
    opacity: .85;
}

.form-control.filled {
    border-color: rgba(6, 182, 212, .55) !important;
    animation: fillPulse 1.1s ease;
}

@keyframes fillPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, .55);
    }

    100% {
        box-shadow: 0 0 0 .5rem rgba(6, 182, 212, 0);
    }
}

.table-custom {
    --bs-table-bg: transparent;
    --bs-table-color: #cbd5e1;
    margin-bottom: 0;
}

.table-custom th {
    background: #0f172a;
    border-bottom: 1px solid var(--bs-card-border-color);
    color: #94a3b8;
    font-size: .725rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .8rem 1rem;
    white-space: nowrap;
}

.table-custom td {
    border-bottom: 1px solid rgba(31, 41, 61, .6);
    padding: .8rem 1rem;
    vertical-align: middle;
    font-size: .85rem;
}

.table-custom tbody tr:hover {
    background: rgba(30, 41, 59, .4);
}

.desc-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: 1px solid transparent;
    background: transparent;
    transition: .2s;
}

.btn-icon.edit {
    color: #818cf8;
}

.btn-icon.edit:hover {
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .4);
}

.btn-icon.del {
    color: #f87171;
}

.btn-icon.del:hover {
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .4);
}

#pdfPreviewWrap {
    display: none;
}

#pdfPreview {
    width: 100%;
    height: 300px;
    border: 1px solid #1e293b;
    border-radius: .6rem;
    background: #fff;
}

/* ---------- Professional loader ---------- */
.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 15, .78);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: .25s;
}

.loader-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loader-box {
    width: min(420px, 92vw);
    background: linear-gradient(160deg, #111827, #0d1424);
    border: 1px solid #1f293d;
    border-radius: 1.1rem;
    padding: 2rem 1.75rem;
    text-align: center;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .7), 0 0 60px -20px rgba(6, 182, 212, .4);
}

.ring-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
}

.ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, .15);
    border-top-color: var(--accent-cyan);
    border-right-color: var(--accent-indigo);
    animation: spin 1s linear infinite;
}

.ring.r2 {
    inset: 9px;
    animation-duration: 1.6s;
    animation-direction: reverse;
    border-top-color: var(--accent-indigo);
    border-right-color: transparent;
}

.ring-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent-cyan);
    animation: breathe 1.6s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes breathe {
    50% {
        transform: scale(.85);
        opacity: .7;
    }
}

.loader-steps {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    text-align: left;
}

.loader-steps li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0;
    color: #64748b;
    font-size: .82rem;
    transition: .3s;
}

.loader-steps li i {
    font-size: 1rem;
}

.loader-steps li.active {
    color: #e2e8f0;
}

.loader-steps li.active i {
    color: var(--accent-cyan);
    animation: breathe 1s infinite;
}

.loader-steps li.done {
    color: #94a3b8;
}

.loader-steps li.done i {
    color: #22c55e;
}

/* ---------- SweetAlert2 dark polish ---------- */
.swal2-popup.sa-popup {
    background: #111827;
    color: #cbd5e1;
    border: 1px solid #1f293d;
    border-radius: 1.1rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
}

.swal2-popup .swal2-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.35rem;
}

.swal2-popup .swal2-html-container {
    color: #94a3b8;
}

.sa-summary {
    text-align: left;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: .75rem;
    padding: .9rem 1rem;
    margin-top: .5rem;
}

.sa-summary div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    font-size: .85rem;
}

.sa-summary span {
    color: #64748b;
}

.sa-summary b {
    color: #f1f5f9;
    font-weight: 600;
    text-align: right;
}

.sa-summary .sa-total b {
    color: #22d3ee;
    font-size: 1rem;
}

.sa-btn {
    border-radius: .6rem !important;
    font-weight: 600 !important;
    padding: .6rem 1.4rem !important;
}