/* AppDialog — confirm / alert dialogs and toasts (see assets/js/app-dialog.js).
   Solid colours only; every value comes from the tokens in app.css / ui-system.css,
   so light and dark themes work with no extra rules. */

.ad-lock { overflow: hidden; }

.ad-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(12, 18, 32, 0.55);
    opacity: 0; transition: opacity var(--dur, 180ms) var(--ease, ease);
}
.ad-overlay.ad-in { opacity: 1; }

.ad-box {
    --ad-accent: var(--color-warning-solid, #9a6209);
    --ad-accent-soft: var(--color-warning-soft, #fbf0dd);
    width: 100%; max-width: 26rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1f2a44);
    border: 1px solid var(--color-border, #e2e5ec);
    border-top: 4px solid var(--ad-accent);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-pop, 0 12px 28px rgba(16, 24, 40, .14));
    padding: 1.25rem 1.25rem 1rem;
    transform: translateY(8px) scale(.98);
    transition: transform var(--dur, 180ms) var(--ease, ease);
}
.ad-overlay.ad-in .ad-box { transform: none; }

.ad-box.ad-danger  { --ad-accent: var(--color-danger, #d81f1f);        --ad-accent-soft: var(--color-danger-soft, #fbe6e3); }
.ad-box.ad-info    { --ad-accent: var(--color-info-solid, #1f68cf);    --ad-accent-soft: var(--color-info-soft, #e9f1fd); }
.ad-box.ad-success { --ad-accent: var(--color-success-solid, #167a4f); --ad-accent-soft: var(--color-success-soft, #e2f5ec); }

.ad-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.ad-icon {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ad-accent-soft); color: var(--ad-accent); font-size: 1.1rem;
}
.ad-title { margin: 0; font-size: var(--fs-lg, 1.0625rem); font-weight: 650; line-height: 1.3; }
.ad-text  { margin: 0 0 1.1rem; padding-left: 3rem; color: var(--color-text-muted, #5b6270); font-size: var(--fs-base, .875rem); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }

.ad-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.ad-btn {
    min-height: var(--ctl-h, 2.25rem); padding: 0 1rem;
    border-radius: var(--radius-sm, 8px); border: 1px solid transparent;
    font-size: var(--fs-sm, .8125rem); font-weight: 600; cursor: pointer;
    transition: background var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease;
}
.ad-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ad-accent) 45%, transparent); outline-offset: 2px; }
.ad-btn-cancel { background: var(--color-surface-alt, #f7f8fb); color: var(--color-text, #1f2a44); border-color: var(--color-border-strong, #cfd4de); }
.ad-btn-cancel:hover { background: var(--color-border, #e2e5ec); }
.ad-btn-ok { background: var(--ad-accent); color: var(--color-on-solid, #fff); }
.ad-btn-ok:hover { filter: brightness(.92); }

/* Toasts */
.ad-toasts {
    position: fixed; z-index: 2100; right: 1rem; bottom: 1rem;
    display: flex; flex-direction: column; gap: .5rem; width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}
.ad-toast {
    --ad-accent: var(--color-info-solid, #1f68cf);
    pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .75rem; border-radius: var(--radius, 10px);
    background: var(--color-surface, #fff); color: var(--color-text, #1f2a44);
    border: 1px solid var(--color-border, #e2e5ec); border-left: 4px solid var(--ad-accent);
    box-shadow: var(--shadow-pop, 0 12px 28px rgba(16, 24, 40, .14));
    font-size: var(--fs-sm, .8125rem);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--dur, 180ms) ease, transform var(--dur, 180ms) var(--ease, ease);
}
.ad-toast.ad-in { opacity: 1; transform: none; }
.ad-toast.ad-danger  { --ad-accent: var(--color-danger, #d81f1f); }
.ad-toast.ad-warning { --ad-accent: var(--color-warning-solid, #9a6209); }
.ad-toast.ad-success { --ad-accent: var(--color-success-solid, #167a4f); }
.ad-toast > i:first-child { color: var(--ad-accent); margin-top: .1rem; }
.ad-toast-text { flex: 1; overflow-wrap: anywhere; }
.ad-toast-x { border: 0; background: transparent; color: var(--color-text-muted, #5b6270); padding: 0 .15rem; cursor: pointer; }

@media (max-width: 480px) {
    .ad-text { padding-left: 0; }
    .ad-actions .ad-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ad-overlay, .ad-box, .ad-toast { transition: none; }
}

/* ---------- AppBusy: "Saving…" state on submit buttons (assets/js/app-busy.js) ---------- */
.ab-busy { pointer-events: none; cursor: progress; opacity: .85; }
.ab-form-busy { cursor: progress; }
.ab-spin {
    display: inline-block; width: .95em; height: .95em; vertical-align: -.14em;
    border: .16em solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ab-rot .7s linear infinite;
}
@keyframes ab-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ab-spin { animation-duration: 1.6s; } }

/* ---------- Toasts on phones: top of the screen, clear of bottom navigation ---------- */
@media (max-width: 640px) {
    .ad-toasts { top: .75rem; bottom: auto; left: 1rem; right: 1rem; width: auto; }
}