/* The family's dialogs (resources/js/lib/dialog.ts; TuteLoop's public/css/dialog.css, as the mockups have it):
   SweetAlert2 themed to the theme's variables, so they follow light and dark. Cancel sits beside the primary. */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show {
    background: rgba(var(--shade-rgb), 0.5);
    backdrop-filter: blur(3px);
}
.cl-dialog {
    background: var(--card) !important;
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-raised);
    font-family: var(--font-sans);
}
.cl-dialog .cl-dialog-title {
    color: var(--foreground);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.cl-dialog .cl-dialog-text {
    color: var(--muted-foreground);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}
.cl-dialog .cl-dialog-actions {
    gap: 10px;
}
.cl-dialog .cl-dialog-btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font: 600 14px/1 var(--font-sans);
    border: 1px solid transparent;
    cursor: pointer;
}
.cl-dialog .cl-dialog-confirm {
    background: var(--primary);
    color: var(--primary-foreground);
}
.cl-dialog .cl-dialog-confirm:hover {
    background: var(--primary-strong);
}
.cl-dialog .cl-dialog-cancel {
    background: var(--card);
    color: var(--foreground);
    border-color: var(--input);
}
.cl-dialog .cl-dialog-cancel:hover {
    background: var(--accent);
}
.cl-dialog .cl-dialog-danger {
    background: var(--destructive);
    color: var(--destructive-foreground);
}
.cl-dialog .cl-dialog-danger:hover {
    filter: brightness(1.08);
}
.cl-dialog .swal2-icon.swal2-question,
.cl-dialog .swal2-icon.swal2-info {
    border-color: var(--primary);
    color: var(--primary);
}
.cl-dialog .swal2-icon.swal2-warning {
    border-color: var(--warning);
    color: var(--warning);
}
.cl-dialog .swal2-icon.swal2-success {
    border-color: var(--success);
    color: var(--success);
}
.cl-dialog .swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.cl-dialog .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--success);
}
.cl-dialog .swal2-icon.swal2-error {
    border-color: var(--destructive);
    color: var(--destructive);
}
.cl-dialog .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--destructive);
}
.cl-dialog .cl-dialog-input {
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: 10px;
    box-shadow: none;
    font: 14px/1.5 var(--font-sans);
    margin: 14px 0 4px;
    width: auto;
}
.cl-dialog .cl-dialog-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
    outline: none;
}
.cl-dialog .cl-dialog-input::placeholder {
    color: var(--placeholder);
}
.cl-dialog .swal2-input-label {
    color: var(--foreground);
    font-weight: 600;
    font-size: 13px;
}
.cl-dialog .swal2-validation-message {
    background: var(--muted);
    color: var(--destructive);
}
.cl-dialog.swal2-toast {
    padding: 12px 16px;
    box-shadow: var(--shadow-raised);
}
.cl-dialog.swal2-toast .cl-dialog-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0 0 0 4px;
}
.cl-dialog.swal2-toast .swal2-timer-progress-bar {
    background: var(--primary);
    opacity: 0.6;
}

/* The corner toast at the end of the line (S9): SweetAlert2 pins it right, whatever the language's direction. */
html body.swal2-toast-shown .swal2-container.swal2-top-end {
    inset-inline: auto 0;
}