/* ==========================================================================
   JsDialog — toasts and dialogs (see wwwroot/js/js-dialog.js)
   Self-contained: the admin area does not load theme.css, so nothing here may
   depend on that file's custom properties.
   ========================================================================== */

.jsd-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 2rem));
}

.jsd-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-left: 4px solid #667085;
    border-radius: .7rem;
    box-shadow: 0 12px 28px -6px rgba(16,24,40,.18), 0 4px 10px -4px rgba(16,24,40,.08);
    padding: .8rem .9rem;
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .88rem;
    line-height: 1.5;
    color: #344054;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .2s ease, transform .2s ease;
}

    .jsd-toast.is-in {
        opacity: 1;
        transform: none;
    }

.jsd-toast-ico {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

    .jsd-toast-ico svg {
        width: 20px;
        height: 20px;
        display: block;
    }

.jsd-toast-msg {
    flex: 1;
    word-break: break-word;
}

.jsd-toast-x {
    flex: none;
    border: 0;
    background: transparent;
    color: #98a2b3;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 .1rem;
    cursor: pointer;
    border-radius: .3rem;
}

    .jsd-toast-x:hover {
        color: #475467;
    }

/* Tones */
.jsd-toast.jsd-success {
    border-left-color: #12b76a;
}

.jsd-toast.jsd-success .jsd-toast-ico {
    color: #12b76a;
}

.jsd-toast.jsd-error {
    border-left-color: #d92d20;
}

.jsd-toast.jsd-error .jsd-toast-ico {
    color: #d92d20;
}

.jsd-toast.jsd-warn {
    border-left-color: #f0a020;
}

.jsd-toast.jsd-warn .jsd-toast-ico {
    color: #d9880c;
}

.jsd-toast.jsd-info {
    border-left-color: #2557b8;
}

.jsd-toast.jsd-info .jsd-toast-ico {
    color: #2557b8;
}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

.jsd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(8,21,47,.55);
    opacity: 0;
    transition: opacity .18s ease;
}

    .jsd-backdrop.is-in {
        opacity: 1;
    }

body.jsd-locked {
    overflow: hidden;
}

.jsd-box {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 60px -12px rgba(8,21,47,.45);
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease;
    overflow: hidden;
}

.jsd-backdrop.is-in .jsd-box {
    transform: none;
}

.jsd-box-body {
    display: flex;
    gap: .9rem;
    padding: 1.4rem 1.4rem 1.1rem;
}

.jsd-box-ico {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f2f4f7;
    color: #667085;
}

    .jsd-box-ico svg {
        width: 21px;
        height: 21px;
        display: block;
    }

.jsd-box.jsd-success .jsd-box-ico {
    background: #ecfdf3;
    color: #12b76a;
}

.jsd-box.jsd-error .jsd-box-ico {
    background: #fef3f2;
    color: #d92d20;
}

.jsd-box.jsd-warn .jsd-box-ico {
    background: #fdf1dc;
    color: #d9880c;
}

.jsd-box.jsd-info .jsd-box-ico {
    background: #f0f5fe;
    color: #2557b8;
}

.jsd-box-text {
    min-width: 0;
}

.jsd-box-title {
    margin: .15rem 0 .25rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: #101828;
    line-height: 1.35;
}

.jsd-box-msg {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: #475467;
    word-break: break-word;
}

.jsd-box-foot {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .9rem 1.4rem 1.2rem;
}

.jsd-btn {
    border-radius: .55rem;
    padding: .52rem 1.1rem;
    font-size: .89rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .jsd-btn:focus-visible {
        outline: 2px solid #3272dd;
        outline-offset: 2px;
    }

.jsd-btn-ghost {
    background: #fff;
    border-color: #d0d5dd;
    color: #344054;
}

    .jsd-btn-ghost:hover {
        background: #f9fafb;
    }

.jsd-btn-main {
    background: #2557b8;
    color: #fff;
}

    .jsd-btn-main:hover {
        background: #1d448f;
    }

.jsd-box.jsd-error .jsd-btn-main {
    background: #d92d20;
}

    .jsd-box.jsd-error .jsd-btn-main:hover {
        background: #b42318;
    }

.jsd-box.jsd-warn .jsd-btn-main {
    background: #d9880c;
}

    .jsd-box.jsd-warn .jsd-btn-main:hover {
        background: #b26a06;
    }

.jsd-box.jsd-success .jsd-btn-main {
    background: #12b76a;
}

    .jsd-box.jsd-success .jsd-btn-main:hover {
        background: #039855;
    }

@media (max-width: 480px) {
    .jsd-toasts {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .jsd-box-foot {
        flex-direction: column-reverse;
    }

    .jsd-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jsd-toast, .jsd-backdrop, .jsd-box {
        transition: none;
    }
}