/* ============================================================
   AR UI Framework — Toasts
   ------------------------------------------------------------
   Transient confirmations and errors, and the surface the
   notifications bell uses to announce a notification the moment
   it lands. Rendered by public/assets/js/components/toasts.js
   (window.ARToast).

   Why this file changed
   ---------------------
   It was never loaded. toasts.js has shipped inside the global
   $sharedJs bundle for months, but nothing -- not app.css, not
   head.php's stylesheet list, not a single page -- ever linked
   toasts.css. window.ARToast therefore appended an unstyled div
   to the end of <body>: position:static, z-index:auto, below the
   fold. Every toast the app has raised since was invisible.
   app.css now imports this file.

   Framework rules this file follows
   ---------------------------------
   * No new palette. The four hardcoded pastel hexes this file
     used to carry (#abefc6 / #fecdca / #fedf89 / #d9e1ea) are
     gone; severity resolves to the --tbl-* families that
     core/tokens.css names as the single source.
   * Placement is logical, not physical. inset-inline-end puts
     the stack at the far right in English and the far left in
     Arabic, straight off the dir attribute layouts/app.php sets
     on <html>. No [dir] override, no second rule to keep in sync.
   * Sizing rides --ui-* so toasts honour the 100/90/80 UI-scale
     system in core/ui-scale.css.
   * Light-only, no prefers-color-scheme block: head.php declares
     <meta name="color-scheme" content="light"> app-wide.
   ============================================================ */

.app-toast-region {
    position: fixed;
    z-index: var(--z-toast, 1400);
    /* BOTTOM, not 70px from the top. At the top the stack landed 27px under the
       notifications bell and in the same column as it -- measured -- so a sign-in toast
       read as something the bell had produced, which is the opposite of the distinction
       this release just drew between the two surfaces.
       Bottom-inline-end also stays clear of the quick-access handle, which parks at the
       inline-START corner by default. A user who drags the handle across can still meet a
       toast there, and that is their choice to make. */
    inset-block-end: var(--ui-space-lg, 16px);
    inset-inline-end: var(--ui-space-lg, 16px);
    display: flex;
    /* Newest nearest the bottom edge: appended children land closest to it and push the
       older ones up, which is the direction the eye is already travelling. */
    flex-direction: column;
    gap: var(--ui-space-sm, 8px);
    width: min(360px, calc(100vw - 32px));
    /* The region is a fixed-position column that outlives every toast in it.
       Without this it would swallow clicks on whatever sits underneath --
       the header, the control bar -- even while empty. */
    pointer-events: none;
}

.app-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-sm, 8px);
    padding: var(--ui-space-md, 12px);
    border: 1px solid var(--tbl-border, #bcc3cd);
    border-radius: var(--ui-radius, 8px);
    background: var(--tbl-surface, #fff);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
    font-size: var(--ui-small-font-size, 12.5px);
    line-height: var(--ui-line-height, 1.45);
    color: var(--tbl-text, #1a2026);
    animation: app-toast-in .18s ease-out;
}

/* Severity reads as a bar on the leading edge rather than a tinted border:
   the same device the table already uses for a selected row. */
.app-toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
    background: var(--app-toast-accent, var(--tbl-info, #1a5c8a));
}

.app-toast--info { --app-toast-accent: var(--tbl-info, #1a5c8a); }
.app-toast--success { --app-toast-accent: var(--tbl-success, #107c41); }
.app-toast--warning { --app-toast-accent: var(--tbl-warning, #b25900); }
.app-toast--error { --app-toast-accent: var(--tbl-danger, #b1302a); }

.app-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-start: var(--ui-space-xs, 6px);
}

/* A notification toast carrying an action_url renders its body as a link. */
a.app-toast__body {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.app-toast__body:hover .app-toast__title,
a.app-toast__body:focus-visible .app-toast__title {
    text-decoration: underline;
}

.app-toast__title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.app-toast__message {
    margin-block-start: 2px;
    color: var(--tbl-text-muted, #5b6673);
    overflow-wrap: anywhere;
}

.app-toast__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius, 4px);
    background: transparent;
    color: var(--tbl-text-muted, #5b6673);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.app-toast__close:hover {
    background: var(--tbl-brand-light, #e5f0fa);
    color: var(--tbl-text, #1a2026);
}

.app-toast__close:focus-visible {
    outline: 2px solid var(--tbl-brand, #005c9e);
    outline-offset: 1px;
}

.app-toast.is-leaving {
    opacity: 0;
    /* Leaves downward now that the stack is anchored to the bottom -- upward would have it
       drift INTO the toasts still on screen. */
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
}

/* Slides in from whichever edge the stack is pinned to. */
@keyframes app-toast-in {
    from { opacity: 0; transform: translateX(var(--app-toast-slide, 12px)); }
    to { opacity: 1; transform: none; }
}

html[dir="rtl"] .app-toast-region { --app-toast-slide: -12px; }

@media (prefers-reduced-motion: reduce) {
    .app-toast { animation: none; }
    .app-toast.is-leaving { transition: none; }
}

/* ---------------------------------------------------------------------------
   .toast — the older spelling, kept working.
   ---------------------------------------------------------------------------
   36 pages still carry a <div class="toast"> and four scripts still write into
   one. Only two page stylesheets ever defined it -- balance-confirmations and
   commission-runs -- so on /collections/reports/schedules and /contacts/customer
   the element had no styling at all: measured at 1429x20 with position: static
   and a transparent background, so "تم الحفظ بنجاح" appeared as a bare line of
   text at y=80, inside the page, rather than as a message.

   Defined here once instead of copied into a third and fourth page stylesheet.
   The default is invisible, which is what keeps the ~34 pages whose toast div is
   vestigial from growing a stray band: nothing shows until a script adds
   .is-visible or .show, exactly as those scripts already do.

   Placement is logical, matching .app-toast-region above, and the z-index is the
   token -- a message has to sit above the modal or drawer whose action produced
   it.
   --------------------------------------------------------------------------- */
.toast {
    position: fixed;
    z-index: var(--z-toast, 1400);
    inset-block-end: 20px;
    inset-inline-end: 20px;
    max-width: min(480px, calc(100vw - 40px));
    padding: 10px 16px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: var(--ui-small-font-size, 13px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.toast.is-visible,
.toast.show { opacity: 1; }

.toast.toast-error { background: var(--tbl-danger, #b91c1c); }
.toast.toast-success { background: var(--tbl-success, #15803d); }

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

/* The optional action on a toast that asks rather than announces. Logical
   properties throughout, so it sits on the correct side under RTL without a
   mirrored rule. */
.app-toast__action {
    flex: 0 0 auto;
    align-self: center;
    padding: 4px 10px;
    border: 1px solid var(--tbl-brand, #005c9e);
    border-radius: var(--ui-radius, 4px);
    background: var(--tbl-brand, #005c9e);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.app-toast__action:hover {
    background: var(--tbl-brand-dark, #004a80);
    border-color: var(--tbl-brand-dark, #004a80);
}

.app-toast__action:focus-visible {
    outline: 2px solid var(--tbl-brand, #005c9e);
    outline-offset: 2px;
}