/**
 * BaleCRM — unified modal UI (desktop + mobile fullscreen)
 */

:root {
    --bcm-radius: 16px;
    --bcm-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.22), 0 8px 24px -8px rgba(15, 23, 42, 0.12);
    --bcm-line: rgba(15, 23, 42, 0.1);
    --bcm-header-bg: rgba(248, 250, 252, 0.92);
    --bcm-backdrop: rgba(15, 23, 42, 0.52);
    --bcm-close-size: 36px;
    --bcm-close-bg: #fff;
    --bcm-close-border: rgba(15, 23, 42, 0.12);
    --bcm-close-color: rgba(15, 23, 42, 0.55);
    --bcm-handle: rgba(15, 23, 42, 0.14);
}

[data-theme="dark"] {
    --bcm-line: rgba(255, 255, 255, 0.1);
    --bcm-header-bg: rgba(255, 255, 255, 0.04);
    --bcm-backdrop: rgba(8, 10, 18, 0.72);
    --bcm-close-bg: rgba(255, 255, 255, 0.08);
    --bcm-close-border: rgba(255, 255, 255, 0.12);
    --bcm-close-color: rgba(255, 255, 255, 0.75);
    --bcm-handle: rgba(255, 255, 255, 0.2);
}

/* ─── Backdrop ─── */
.modal-backdrop {
    --bs-backdrop-opacity: 1;
    background-color: var(--bcm-backdrop) !important;
}

.modal-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ─── Desktop base ─── */
@media (min-width: 768px) {
    .modal.fade .modal-dialog {
        transform: translateY(12px) scale(0.97);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
    }

    .modal.show .modal-dialog {
        transform: translateY(0) scale(1);
    }

    .modal .modal-dialog {
        margin: 1.5rem auto;
    }

    .modal .modal-content {
        border: none;
        border-radius: var(--bcm-radius) !important;
        box-shadow: var(--bcm-shadow);
        overflow: hidden;
    }

    .modal .modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--bcm-line);
        background: var(--bcm-header-bg);
    }

    .modal .modal-body {
        padding: 24px;
    }

    .modal .modal-footer {
        padding: 16px 24px 24px;
        border-top: 1px solid var(--bcm-line);
        gap: 12px;
    }

    .modal .bcm-modal-footer-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }
}

/* ─── Mobile: full-screen sheet ─── */
@media (max-width: 767.98px) {
    .modal {
        --bs-modal-margin: 0;
        padding: 0 !important;
        overflow: hidden;
    }

    .modal.show {
        display: flex !important;
        align-items: stretch;
        justify-content: center;
    }

    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }

    .modal .modal-dialog,
    .modal .modal-dialog.modal-lg,
    .modal .modal-dialog.modal-xl,
    .modal .modal-dialog.modal-sm {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100%;
        min-height: 100%;
        left: 0;
        right: 0;
    }

    .modal .modal-dialog.modal-dialog-centered,
    .modal .modal-dialog.modal-dialog-scrollable {
        display: flex;
        align-items: stretch;
        min-height: 100%;
        height: 100%;
    }

    .modal .modal-dialog-scrollable .modal-content {
        max-height: 100dvh;
        overflow: hidden;
    }

    .modal .modal-content {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        border: none;
        border-radius: 0 !important;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal .modal-header {
        flex-shrink: 0;
        position: relative;
        padding: max(14px, env(safe-area-inset-top, 0px) + 10px) 16px 14px;
        border-bottom: 1px solid var(--bcm-line);
        background: var(--bcm-header-bg);
        z-index: 2;
    }

    .modal .modal-header::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--bcm-handle);
        pointer-events: none;
    }

    .modal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 20px 16px;
        min-height: 0;
    }

    .modal .modal-footer,
    .modal .bcm-modal-footer-actions,
    .custom--modal .modal-footer,
    .custom--modal .bcm-modal-footer-actions {
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid var(--bcm-line) !important;
        background: var(--bcm-header-bg);
        margin: 0;
        z-index: 3;
    }

    .modal .modal-footer .btn,
    .modal .bcm-modal-footer-actions .btn,
    .custom--modal .modal-footer .btn,
    .custom--modal .bcm-modal-footer-actions .btn {
        min-height: 46px;
        font-weight: 600;
    }

    .modal .modal-footer:not(.bcm-modal-footer-actions--row),
    .custom--modal .modal-footer:not(.bcm-modal-footer-actions--row) {
        flex-direction: column-reverse;
    }

    .modal .modal-footer:not(.bcm-modal-footer-actions--row) .btn,
    .modal .bcm-modal-footer-actions:not(.bcm-modal-footer-actions--row) .btn,
    .custom--modal .modal-footer:not(.bcm-modal-footer-actions--row) .btn,
    .custom--modal .bcm-modal-footer-actions:not(.bcm-modal-footer-actions--row) .btn {
        width: 100%;
        margin: 0 !important;
    }

    .modal .modal-body:only-child {
        padding-top: max(28px, env(safe-area-inset-top, 0px) + 16px);
    }

    .modal .modal-content:not(:has(.modal-header))::before {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 4px;
        margin: max(10px, env(safe-area-inset-top, 0px)) auto 0;
        border-radius: 999px;
        background: var(--bcm-handle);
    }

    /* Legacy: action rows still inside modal-body */
    .modal .modal-body > form {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .modal .modal-body .welcome-modal-actions,
    .modal .modal-body form > .welcome-modal-actions,
    .modal .modal-body form > .d-flex.gap-3,
    .modal .modal-body form > .d-flex.gap-2.justify-content-end {
        flex-shrink: 0;
        margin-top: auto;
        margin-inline: -16px;
        margin-bottom: calc(-1 * max(20px, env(safe-area-inset-bottom, 0px)));
        padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--bcm-line);
        background: var(--bcm-header-bg);
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .modal .modal-body .welcome-modal-actions .btn,
    .modal .modal-body form > .welcome-modal-actions .btn,
    .modal .modal-body form > .d-flex.gap-3 .btn,
    .modal .modal-body form > .d-flex.gap-2.justify-content-end .btn {
        width: 100%;
        min-height: 46px;
        font-weight: 600;
    }

    .modal .modal-body form > .d-flex.gap-3 > .flex-fill {
        flex: 1 1 auto !important;
        width: 100%;
    }
}

/* ─── Header layout & title ─── */
.modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.modal .modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
}

.custom--modal .modal-header .modal-title {
    font-weight: 700;
}

/* ─── Close button (btn-close, .close, purchase) ─── */
.modal .modal-header .btn-close,
.modal .modal-header .close,
.purchase-modal .purchase-modal__close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    inset-inline-end: auto !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bcm-close-size);
    height: var(--bcm-close-size);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--bcm-close-border);
    border-radius: 10px;
    background: var(--bcm-close-bg) !important;
    color: var(--bcm-close-color) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    filter: none !important;
    background-image: none !important;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header .close:hover,
.purchase-modal .purchase-modal__close:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.18);
    transform: scale(1.04);
}

[data-theme="dark"] .modal .modal-header .btn-close:hover,
[data-theme="dark"] .modal .modal-header .close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.modal .modal-header .close i,
.modal .modal-header .btn-close i {
    font-size: 1.125rem;
    color: inherit !important;
    line-height: 1;
}

.modal .modal-header .close {
    cursor: pointer;
    line-height: 1;
}

.modal .modal-header .btn-close:focus,
.modal .modal-header .close:focus {
    box-shadow: 0 0 0 3px hsl(var(--base, 142 76% 36%) / 0.25) !important;
    outline: none;
}

/* Bootstrap default btn-close icon */
.modal .modal-header .btn-close:not(:has(i)) {
    --bs-btn-close-opacity: 0.55;
    width: var(--bcm-close-size);
    height: var(--bcm-close-size);
    border-radius: 10px;
    border: 1px solid var(--bcm-close-border);
    background-color: var(--bcm-close-bg) !important;
}

/* ─── Frontend custom--modal polish ─── */
.custom--modal .modal-content {
    background-color: hsl(var(--white));
}

.dark-modal.custom--modal .modal-content {
    border: none !important;
}

.custom--modal .modal-body .form-group:last-child {
    margin-bottom: 0;
}

.custom--modal .modal-body form > .btn,
.custom--modal .modal-body form > .form-group > .btn {
    min-height: 46px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .custom--modal .modal-body form > .form-group:last-child:not(:has(.btn)) {
        position: static;
        margin-bottom: 0;
        padding-top: 0;
        background: transparent;
        z-index: auto;
    }
}

/* ─── Confirmation modal ─── */
#confirmationModal .modal-content {
    overflow: hidden;
}

#confirmationModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#confirmationModal .text--warning {
    margin-bottom: 0;
}

#confirmationModal .text--warning .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    font-size: 1.75rem;
    margin-bottom: 8px;
}

#confirmationModal h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
}

#confirmationModal .question {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--mute-color, 220 9% 46%));
    margin-bottom: 0;
}

#confirmationModal .d-flex.gap-3 {
    margin-top: 24px;
}

#confirmationModal .btn {
    min-height: 46px;
    font-weight: 600;
    border-radius: 10px;
}

@media (max-width: 767.98px) {
    #confirmationModal .modal-body {
        padding-top: 32px;
        padding-bottom: 20px;
    }

    #confirmationModal .modal-footer,
    #confirmationModal .d-flex.gap-3 {
        flex-direction: column-reverse;
    }

    #confirmationModal .modal-footer .btn,
    #confirmationModal .d-flex.gap-3 > .flex-fill {
        flex: 1 1 auto !important;
        width: 100%;
    }
}

/* ─── Modal sizes on desktop ─── */
@media (min-width: 768px) {
    .modal-dialog.modal-sm {
        max-width: 400px;
    }

    .modal-dialog.modal-lg {
        max-width: 720px;
    }

    .modal-dialog.modal-xl {
        max-width: 960px;
    }
}

/* ─── Flow builder custom modal ─── */
.flow_modal > div {
    border-radius: var(--bcm-radius);
    box-shadow: var(--bcm-shadow);
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .flow_modal {
        align-items: stretch;
        padding: 0;
    }

    .flow_modal > div {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
        padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
    }
}

/* ─── Select2 inside modals ─── */
.modal .select2-container {
    z-index: 1060;
}

.modal .select2-dropdown {
    z-index: 1061;
}

/* ─── RTL ─── */
[dir="rtl"] .modal .modal-header {
    text-align: right;
}

[dir="rtl"] .modal .modal-footer .btn:not(:last-child) {
    margin-right: 0;
    margin-left: 0;
}