/* =============================================================================
   Modal / popup — theme tối (mặc định) + theme sáng (html[data-theme="light"])
   ============================================================================= */

/* Không tô nền tối trên .modal (tránh chồng 2 lớp với .modal-backdrop) */
.modal.fade.show,
.modal.show {
    background-color: transparent !important;
}

/* Backdrop đậm + tách rõ khi mở popup (Bootstrap thêm .modal-open lên body) */
html:not([data-theme="light"]) body.modal-open .modal-backdrop.show {
    opacity: 0.82 !important;
    background-color: #020617 !important;
    backdrop-filter: blur(6px) !important;
}

/* ----- Dark theme — popup nổi bật: viền cyan, glow, thanh accent ----- */
html:not([data-theme="light"]) .modal .modal-dialog,
html:not([data-theme="light"]) .confirmation-modal .modal-dialog {
    filter: drop-shadow(0 0 28px rgba(46, 179, 152, 0.2));
}

html:not([data-theme="light"]) .modal .modal-content,
html:not([data-theme="light"]) .confirmation-modal .modal-content {
    position: relative;
    border: 1px solid rgba(72, 168, 140, 0.38);
    border-radius: var(--etl-radius-md, 12px);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(46, 179, 152, 0.12),
        0 0 48px rgba(46, 179, 152, 0.12),
        0 28px 56px -12px rgba(0, 0, 0, 0.78);
    /* Thanh accent trên cùng — teal */
    background-image:
        linear-gradient(90deg, var(--etl-accent-deep, #1d7a68), var(--etl-accent, #2eb398) 45%, var(--etl-accent-mid, #3dcfaf)),
        linear-gradient(165deg, rgba(17, 24, 39, 0.98) 0%, rgba(7, 11, 20, 0.99) 100%);
    background-size: 100% 3px, 100% 100%;
    background-position: top left, bottom left;
    background-repeat: no-repeat, no-repeat;
    color: rgba(241, 245, 249, 0.96);
    backdrop-filter: blur(14px);
}

html:not([data-theme="light"]) .modal .modal-body,
html:not([data-theme="light"]) .confirmation-modal .modal-body {
    background: rgba(15, 23, 42, 0.35) !important;
    color: rgba(241, 245, 249, 0.96) !important;
}

html:not([data-theme="light"]) .modal .modal-footer,
html:not([data-theme="light"]) .modal .modal-footer.bg-light,
html:not([data-theme="light"]) .confirmation-modal .modal-footer {
    background: rgba(15, 23, 42, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="light"]) .modal .modal-body pre.bg-light,
html:not([data-theme="light"]) .confirmation-modal .modal-body pre.bg-light {
    background: rgba(2, 6, 23, 0.85) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html:not([data-theme="light"]) .modal .modal-body .text-muted,
html:not([data-theme="light"]) .confirmation-modal .modal-body .text-muted {
    color: rgba(148, 163, 184, 0.95) !important;
}

html:not([data-theme="light"]) .modal .etl-modal-section-title {
    color: var(--etl-accent-text, #6ee7c5) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Form controls inside dark modals */
html:not([data-theme="light"]) .modal .form-control,
html:not([data-theme="light"]) .modal .form-control-sm,
html:not([data-theme="light"]) .modal .form-select,
html:not([data-theme="light"]) .modal .form-select-sm,
html:not([data-theme="light"]) .confirmation-modal .form-control,
html:not([data-theme="light"]) .confirmation-modal .form-select {
    background: rgba(2, 6, 23, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(241, 245, 249, 0.96) !important;
}

html:not([data-theme="light"]) .modal .form-control:focus,
html:not([data-theme="light"]) .modal .form-select:focus,
html:not([data-theme="light"]) .confirmation-modal .form-control:focus,
html:not([data-theme="light"]) .confirmation-modal .form-select:focus {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(14, 165, 233, 0.55) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.2);
}

html:not([data-theme="light"]) .modal .form-control::placeholder,
html:not([data-theme="light"]) .confirmation-modal .form-control::placeholder {
    color: rgba(148, 163, 184, 0.75);
}

html:not([data-theme="light"]) .modal .form-label,
html:not([data-theme="light"]) .confirmation-modal .form-label {
    color: rgba(226, 232, 240, 0.92) !important;
}

html:not([data-theme="light"]) .modal .input-group-text,
html:not([data-theme="light"]) .confirmation-modal .input-group-text {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(203, 213, 225, 0.95) !important;
}

html:not([data-theme="light"]) .modal .modal-footer .btn-secondary,
html:not([data-theme="light"]) .confirmation-modal .modal-footer .btn-secondary,
html:not([data-theme="light"]) .modal .modal-footer .btn-outline-secondary,
html:not([data-theme="light"]) .confirmation-modal .modal-footer .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
}

html:not([data-theme="light"]) .modal .modal-footer .btn-secondary:hover:not(:disabled),
html:not([data-theme="light"]) .confirmation-modal .modal-footer .btn-secondary:hover:not(:disabled),
html:not([data-theme="light"]) .modal .modal-footer .btn-outline-secondary:hover:not(:disabled),
html:not([data-theme="light"]) .confirmation-modal .modal-footer .btn-outline-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(46, 179, 152, 0.45);
    color: #fff;
}

/* Cards nhỏ trong modal (vd. Trợ giúp NavMenu) */
html:not([data-theme="light"]) .modal .modal-body .card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(241, 245, 249, 0.95) !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .modal .modal-body .card .card-title {
    color: rgba(200, 245, 232, 0.95) !important;
}

html:not([data-theme="light"]) .modal .modal-body .card .card-text {
    color: rgba(203, 213, 225, 0.92) !important;
}

/* Alert trong modal */
html:not([data-theme="light"]) .modal .alert-warning,
html:not([data-theme="light"]) .confirmation-modal .alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fef3c7;
}

html:not([data-theme="light"]) .modal .alert-danger,
html:not([data-theme="light"]) .confirmation-modal .alert-danger {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

html:not([data-theme="light"]) .modal .alert-info {
    background: rgba(46, 179, 152, 0.12);
    border: 1px solid rgba(46, 179, 152, 0.35);
    color: #ccfbf1;
}

html:not([data-theme="light"]) .confirmation-modal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
}

/* ----- Light theme ----- */
html[data-theme="light"] .modal .modal-content,
html[data-theme="light"] .confirmation-modal .modal-content {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
    background: #fff;
    color: #0f172a;
}

html[data-theme="light"] .modal .modal-body,
html[data-theme="light"] .confirmation-modal .modal-body {
    background: #fafbfc !important;
    color: #0f172a !important;
}

html[data-theme="light"] .modal .modal-footer,
html[data-theme="light"] .modal .modal-footer.bg-light,
html[data-theme="light"] .confirmation-modal .modal-footer {
    background: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .modal .modal-body pre.bg-light {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

html[data-theme="light"] .modal .modal-body .text-muted,
html[data-theme="light"] .confirmation-modal .modal-body .text-muted {
    color: #64748b !important;
}

html[data-theme="light"] .modal .etl-modal-section-title {
    color: var(--etl-accent-deep, #1d7a68);
    border-bottom-color: #e2e8f0;
}