/* ==========================================================================
   AqaryPro dialogs and toasts
   Styles for the #aqDialog modal singleton, the stacking layer used when a
   dialog opens over a page modal, and the #aqToastStack toasts. Built on
   Bootstrap 4 .modal markup. Logical properties only, so the same rules
   serve the Arabic (RTL) and English (LTR) builds.
   ========================================================================== */

/* ── Stacking over an already-open page modal ───────────────────────────── */
.modal.aq-dialog--stacked { z-index: 1070; }
.modal-backdrop.aq-dialog--stacked { z-index: 1065; }

/* ── Dialog shell ───────────────────────────────────────────────────────── */
.aq-dialog .modal-dialog {
    max-width: 420px;
    margin-inline: auto;
}
@media (max-width: 575.98px) {
    .aq-dialog .modal-dialog { margin-inline: 16px; }
}
.aq-dialog .modal-content {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border: 0;
    border-radius: var(--aq-radius-container, 16px);
    box-shadow: var(--aq-elev-3, 0 24px 60px -12px rgba(15, 26, 42, .28));
}

.aq-dialog__body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 6px;
}
.aq-dialog__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Tone icon circle */
.aq-dialog__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}
.aq-dialog__icon[hidden] { display: none; }
.aq-dialog__icon--error    { background: var(--aq-danger-50, #FFEEF0);  color: var(--aq-danger-600, #D92D45); }
.aq-dialog__icon--success  { background: var(--aq-success-50, #E9F8F2); color: var(--aq-success-600, #13875F); }
.aq-dialog__icon--warning  { background: var(--aq-warning-50, #FFF3EA); color: var(--aq-warning-600, #C0550F); }
.aq-dialog__icon--info     { background: var(--aq-info-50, #E8F5FE);    color: var(--aq-info-600, #0B78BE); }
.aq-dialog__icon--question { background: var(--aq-brand-50, #EAF1FC);   color: var(--aq-brand-500, #1F66D3); }

.aq-dialog__title {
    margin: 0 0 4px;
    padding-top: 9px; /* optically centres a one-line title on the 42px icon */
    font-size: var(--aq-fs-lg, 16px);
    font-weight: 700;
    line-height: 1.5;
    color: var(--aq-ink-900, #0F1A2A);
    overflow-wrap: anywhere;
}
.aq-dialog__text {
    margin: 0 0 8px;
    font-size: var(--aq-fs-md, 14px);
    line-height: 1.6;
    color: var(--aq-neutral-700, #363954);
    white-space: pre-line;   /* plain-text messages keep their line breaks */
    overflow-wrap: anywhere;
}
.aq-dialog__html {
    margin: 4px 0 8px;
    font-size: var(--aq-fs-md, 14px);
    line-height: 1.6;
    color: var(--aq-neutral-700, #363954);
    text-align: start;
}
.aq-dialog__title[hidden],
.aq-dialog__text[hidden],
.aq-dialog__html[hidden] { display: none; }

/* Inline error slot (aqFormDialog preConfirm failures) */
.aq-dialog__error {
    margin: 4px 0 8px;
    padding: 8px 12px;
    border-radius: var(--aq-radius-control, 8px);
    background: var(--aq-danger-50, #FFEEF0);
    color: var(--aq-danger-600, #D92D45);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.aq-dialog__error[hidden] { display: none; }

/* Footer: cancel precedes confirm in the DOM; flex-end follows the
   document direction, so the order mirrors itself in RTL. */
.aq-dialog .modal-footer.aq-dialog__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* !important: the shared skin styles every .modal-footer with
       !important padding, border and a tinted background. */
    padding: 16px 22px 18px !important;
    border-top: 0 !important;
    background-color: transparent !important;
}
.aq-dialog .modal-footer.aq-dialog__footer > * { margin: 0; }
.aq-dialog .modal-footer.aq-dialog__footer[hidden] { display: none; }
.aq-dialog__footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--aq-radius-control, 8px);
}
.aq-dialog__footer .btn[hidden] { display: none; }
.aq-dialog__footer .btn .ph { font-size: 1.05em; }

/* Auto-close progress bar (aqAlert timer) */
.aq-dialog__timer {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: transparent;
}
.aq-dialog__timer[hidden] { display: none; }
.aq-dialog__timer-bar {
    display: block;
    height: 100%;
    background: var(--aq-brand-500, #1F66D3);
    opacity: .55;
    transform-origin: left center;
}
[dir="rtl"] .aq-dialog__timer-bar { transform-origin: right center; }

/* One-time secret reveal inside aqFormDialog bodies */
.aq-code-reveal { font-size: 1.2rem; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.aq-toast-stack {
    position: fixed;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 300px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.aq-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E9F0;
    border-inline-start: 3px solid var(--aq-success-500, #28B886);
    border-radius: var(--aq-radius-surface, 12px);
    box-shadow: var(--aq-elev-2, 0 10px 28px -10px rgba(31, 102, 211, .28), 0 2px 6px -1px rgba(15, 26, 42, .08));
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.aq-toast.is-in  { opacity: 1; transform: none; }
.aq-toast.is-out { opacity: 0; transform: translateY(-6px); }

.aq-toast__icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.25;
}
.aq-toast__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--aq-fs-md, 14px);
    line-height: 1.45;
    color: var(--aq-ink-800, #1A2332);
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.aq-toast__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--aq-radius-pill, 999px);
    background: transparent;
    color: var(--aq-neutral-700, #363954);
    font-size: 14px;
    line-height: 1;
    opacity: .6;
    cursor: pointer;
}
.aq-toast__close:hover,
.aq-toast__close:focus-visible { opacity: 1; background: rgba(15, 26, 42, .06); outline: none; box-shadow: var(--aq-focus-ring); }

.aq-toast--success { border-inline-start-color: var(--aq-success-500, #28B886); }
.aq-toast--success .aq-toast__icon { color: var(--aq-success-600, #13875F); }
.aq-toast--error   { border-inline-start-color: var(--aq-danger-500, #FF4961); }
.aq-toast--error   .aq-toast__icon { color: var(--aq-danger-600, #D92D45); }
.aq-toast--warning { border-inline-start-color: var(--aq-warning-500, #FF9149); }
.aq-toast--warning .aq-toast__icon { color: var(--aq-warning-600, #C0550F); }
.aq-toast--info    { border-inline-start-color: var(--aq-info-500, #1E9FF2); }
.aq-toast--info    .aq-toast__icon { color: var(--aq-info-600, #0B78BE); }

@media (max-width: 575.98px) {
    .aq-toast-stack { inset-inline: 16px; width: auto; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .aq-dialog.fade .modal-dialog,
    .aq-dialog.fade,
    .aq-toast {
        transition: none;
    }
    .aq-toast,
    .aq-toast.is-out { transform: none; }
    .aq-dialog__timer-bar { transition: none !important; }
}