/* =============================================================================================
   tm-toast.css — W-UYARI-TOAST (A1059). THE ONE CORNER TOAST, ON EVERY SURFACE.

   The owner (2026-09-26 01:55, admin sales desk): "bizim uyari yerimiz yok mu generic bunlar ne
   guzel bir popub filan"; asked, he chose "Hepsi kose toast" — information, success, refusal and
   error ALL speak from one corner toast; no in-page warning box remains. A required box is still
   marked red IN the box itself (required-field.js).

   This is the admin shell's `.app-toast` (moved out of _AdminLayout.cshtml's inline style block,
   look unchanged) so the agency portal, the storefront, the supplier portal / console and the
   consumer pages draw the SAME card. Every value reads a token when the surface has one and falls
   back to the admin palette's own number when it does not (the storefront and the consumer pages
   do not load travelmean-tokens.css).

   The design's mockup toast (design-source/admin/etkilesim.js:80, a navy pill bottom-centre) is
   the mockup's "nothing is sent from a mockup" line and draws no kind (a refusal and a success
   would look the same); the owner's answer names the CORNER, so the corner card is the one kept.
   ============================================================================================= */
.app-toast-host {
    position: fixed;
    top: var(--tm-toast-top, 78px);
    right: 24px;
    z-index: var(--layer-toast, 1090);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
/* A878 — the floating notice is a card and rounds like every other card (`--radius`). */
.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--screen-surface, #fff);
    border: 1px solid var(--toast-rule, #eaecf0);
    border-left: 4px solid var(--tc);
    border-radius: var(--radius, 8px);
    padding: 14px 14px 14px 16px;
    box-shadow: 0 12px 32px rgba(var(--toast-shadow-rgb, 16, 24, 40), .14);
    animation: appToastIn .3s cubic-bezier(.22, .7, .2, 1);
    font-family: inherit;
    text-align: left;
}
.app-toast.hiding { animation: appToastOut .25s ease forwards; }
.app-toast--success { --tc: var(--toast-success, #12b76a); --tcbg: var(--toast-success-wash, #ecfdf3); }
.app-toast--error   { --tc: var(--toast-error, #f04438);   --tcbg: var(--toast-error-wash, #fef3f2); }
.app-toast--warning { --tc: var(--toast-warning, #f79009); --tcbg: var(--toast-warning-wash, #fffaeb); }
.app-toast--info    { --tc: var(--toast-info, #2e90fa);    --tcbg: var(--toast-info-wash, #eff8ff); }
.app-toast__icon {
    width: 34px;
    height: 34px;
    /* the round glyph: the panel's pill token, the shop window's where the panel's is not loaded */
    border-radius: var(--radius-pill, var(--tm-radius-pill, 999px));
    display: grid;
    place-items: center;
    background: var(--tcbg);
    color: var(--tc);
    flex: 0 0 auto;
}
.app-toast__body { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.app-toast__title { font-weight: 600; font-size: 14px; color: var(--toast-title-ink, #101828); line-height: 1.35; }
.app-toast__msg { font-size: 13px; color: var(--toast-body-ink, #475467); margin-top: 3px; line-height: 1.45; word-break: break-word; }
/* H-98 — the touch floor: the only control in a 360px panel takes the full `--touch-min`. */
.app-toast__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--toast-close-ink, #98a2b3);
    cursor: pointer;
    padding: 0;
    width: var(--touch-min, 32px);
    height: var(--touch-min, 32px);
    border-radius: var(--radius, 8px);
    display: grid;
    place-items: center;
    transition: background .12s, color .12s;
}
.app-toast__close:hover { background: var(--toast-close-hover-bg, #f2f4f7); color: var(--toast-body-ink, #475467); }
/* W-NATIVE-DIALOG (A1077) — the ACTIONABLE toast (appConfirm / appPrompt): the same card, plus two
   answers and, for a reason, one field. Buttons and field take the surface's own control height and
   radius tokens so they sit level with each other ("yuvarlak, eşit, her yerde"); the primary answer
   is the admin navy where the surface has no primary token of its own. */
.app-toast--ask { box-shadow: 0 16px 40px rgba(var(--toast-shadow-rgb, 16, 24, 40), .22); }
.app-toast__input {
    display: block;
    width: 100%;
    margin-top: 10px;
    min-height: var(--control-h, 38px);
    padding: 8px 12px;
    font: inherit;
    font-size: 13.5px;
    color: var(--toast-title-ink, #101828);
    background: var(--screen-surface, #fff);
    border: 1px solid var(--toast-input-rule, #d0d5dd);
    border-radius: var(--radius, 8px);
    resize: vertical;
}
.app-toast__input:focus { outline: 2px solid var(--tc); outline-offset: 1px; border-color: var(--tc); }
.app-toast__input.is-invalid { border-color: var(--toast-error, #f04438); }
.app-toast__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.app-toast__btn {
    min-height: var(--touch-min, 34px);
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius, 8px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.app-toast__btn--ghost { background: transparent; color: var(--toast-body-ink, #475467); border-color: var(--toast-input-rule, #d0d5dd); }
.app-toast__btn--ghost:hover { background: var(--toast-close-hover-bg, #f2f4f7); }
.app-toast__btn--primary { background: var(--adm-primary, var(--tm-primary, #10203d)); color: #fff; }
.app-toast__btn--primary:hover { filter: brightness(.9); }
.app-toast__btn--danger { background: var(--toast-error, #f04438); }
.app-toast__btn:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
/* A server-rendered message waiting for tm-toast.js to raise it (`.app-toast-seed`), and a screen's
   own message box bridged onto the toast (`data-toast-bridge`: its script still writes and clears it,
   the reader sees the corner toast instead). Neither is drawn in the page — but ONLY once tm-toast.js
   has run (it sets `app-toast-ready` on <html> as it loads): a browser that never ran the script still
   shows the sentence where it was written, rather than swallowing a refusal (fail-safe, not silent). */
.app-toast-ready .app-toast-seed,
.app-toast-ready [data-toast-bridge] { display: none !important; }
@keyframes appToastIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes appToastOut { to { opacity: 0; transform: translateX(22px); } }
@media (max-width: 640px) { .app-toast-host { right: 12px; left: 12px; width: auto; top: 70px; } }
@media (prefers-reduced-motion: reduce) { .app-toast, .app-toast.hiding { animation: none; } }