/* Reusable confirm dialog used by any form with the .th-confirm class.
   Trigger via data-th-confirm="message"; optional
   data-th-confirm-variant="danger|primary" tints the OK button.

   Replaces window.confirm() so the dialog matches the brand palette
   and the Tabler / Bootstrap visual language. Buttons emit a real
   form submit only after the user clicks OK, so existing data-ph-event
   and other behaviour on the form stays intact. */

.th-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: th-confirm-fade-in 120ms ease-out;
}

.th-confirm-dialog {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
    max-width: 460px;
    width: 100%;
    overflow: hidden;
    animation: th-confirm-pop-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.th-confirm-dialog__header {
    padding: 1.25rem 1.5rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.th-confirm-dialog__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(32, 107, 196, 0.12);
    color: #206bc4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.th-confirm-dialog__icon i {
    font-size: 1.4rem;
}

.th-confirm-dialog--danger .th-confirm-dialog__icon {
    background: rgba(214, 57, 57, 0.12);
    color: #d63939;
}

.th-confirm-dialog__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: #1f2937;
}

.th-confirm-dialog__body {
    padding: 0.5rem 1.5rem 1rem;
    color: #475569;
    line-height: 1.5;
    font-size: 0.95rem;
    white-space: pre-line;
}

.th-confirm-dialog__footer {
    padding: 0.75rem 1.5rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.th-confirm-dialog__btn {
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease;
    font-size: 0.95rem;
}

.th-confirm-dialog__btn:active {
    transform: scale(0.97);
}

.th-confirm-dialog__btn--cancel {
    background: #e2e8f0;
    color: #1f2937;
}

.th-confirm-dialog__btn--cancel:hover {
    background: #cbd5e1;
}

.th-confirm-dialog__btn--ok {
    background: #206bc4;
    color: #ffffff;
}

.th-confirm-dialog__btn--ok:hover {
    background: #1a559b;
}

.th-confirm-dialog--danger .th-confirm-dialog__btn--ok {
    background: #d63939;
}

.th-confirm-dialog--danger .th-confirm-dialog__btn--ok:hover {
    background: #b3242b;
}

@keyframes th-confirm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes th-confirm-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}