/* ============================================================
   Digital Commerce Integration — Feedback layer (tj-feedback): confirm modal + toasts
   ------------------------------------------------------------
   Shared by EVERY surface (marketplace, admin, B2B, fleet).
   - .tjc-*  confirm modal  (rounded panel, tinted icon, footer actions)
   - .tjt-*  toasts         (corner stack, icon + title + message + progress)
   Behaviour lives in js/tj-feedback.js. RTL via logical properties.
   Light by default; the dark variant keys off html[data-theme="dark"]
   so it follows the theme switch, not a body class.
   ============================================================ */

/* ── Confirm modal ── */
.tjc-backdrop{
    position: fixed; inset: 0; z-index: 100000;
    display: grid; place-items: center; padding: 20px;
    background: rgba(17, 24, 39, .55);
    opacity: 0; transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
    font-family: "Inter", "Cairo", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tjc-backdrop.is-on{ opacity: 1; }
.tjc-panel{
    position: relative; width: min(440px, 100%);
    background: var(--tj-surface, #fff); color: var(--tj-ink, #111827);
    border: 1px solid var(--tj-border, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(16,24,40,.28), 0 2px 6px rgba(16,24,40,.06);
    padding: 26px 24px 0; text-align: start;
    overflow: hidden;
    transform: translateY(8px) scale(.98); opacity: 0;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms cubic-bezier(.2,.8,.2,1);
}
.tjc-backdrop.is-on .tjc-panel{ transform: none; opacity: 1; }
.tjc-x{
    position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
    width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--tj-muted-2, #6b7280);
    display: grid; place-items: center; font-size: 18px; cursor: pointer; transition: background 100ms ease-out, color 100ms ease-out;
}
.tjc-x:hover{ background: var(--tj-navy-50, #f3f4f6); color: var(--tj-ink, #111827); }
/* Tinted icon disc, tone-coloured */
.tjc-icon{
    width: 48px; height: 48px; margin: 0 0 16px; border-radius: 999px;
    display: grid; place-items: center; font-size: 24px; line-height: 1;
    background: var(--tjc-soft); color: var(--tjc-fg);
}
.tjc-icon i, .tjc-icon svg{ display: block; }
.tjc-panel{ --tjc-fg: var(--tj-brand-deep, #095c33); --tjc-soft: var(--tj-brand-50, #ecfdf3); --tjc-btn: var(--tj-brand, #0d7f45); --tjc-btn-hover: var(--tj-brand-hover, #0b6e3c); --tjc-btn-fg: var(--tj-brand-on, #fff); }
.tjc-panel[data-tone="success"]{ --tjc-fg: var(--tj-success-ink, #0b7a4e); --tjc-soft: var(--tj-success-50, #e6f7ef); --tjc-btn: var(--tj-success, #12a86b); --tjc-btn-hover: var(--tj-success-ink, #0b7a4e); --tjc-btn-fg: #fff; }
.tjc-panel[data-tone="danger"]{  --tjc-fg: var(--tj-danger-ink, #b42323); --tjc-soft: var(--tj-danger-50, #fdecec); --tjc-btn: var(--tj-danger, #dc2626); --tjc-btn-hover: var(--tj-danger-ink, #b42323); --tjc-btn-fg: #fff; }
.tjc-panel[data-tone="warning"]{ --tjc-fg: var(--tj-warning-ink, #a35b06); --tjc-soft: var(--tj-warning-50, #fdf3e4); --tjc-btn: var(--tj-warning, #e0891a); --tjc-btn-hover: var(--tj-warning-ink, #a35b06); --tjc-btn-fg: #fff; }
.tjc-panel[data-tone="info"]{    --tjc-fg: var(--tj-info-ink, #06618f); --tjc-soft: var(--tj-info-50, #e7f3fb); }
.tjc-panel[data-tone="neutral"]{ --tjc-fg: var(--tj-muted, #4b5563); --tjc-soft: var(--tj-navy-50, #f3f4f6); }
.tjc-title{ margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--tj-ink, #111827); line-height: 1.3; }
.tjc-text{ margin: 0; font-size: 14px; line-height: 1.65; color: var(--tj-muted, #4b5563); }
.tjc-text ul{ margin: 8px 0 0; padding-inline-start: 18px; text-align: start; }
.tjc-actions{
    display: flex; justify-content: flex-end; gap: 10px;
    margin: 22px -24px 0; padding: 16px 24px;
    border-top: 1px solid var(--tj-border, #e5e7eb); background: var(--tj-surface-alt, #f9fafb);
}
.tjc-btn{
    height: 40px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent;
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background 100ms ease-out, border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.tjc-btn:focus-visible{ outline: 2px solid var(--tj-brand, #0d7f45); outline-offset: 2px; }
.tjc-btn-no{ background: var(--tj-surface, #fff); color: var(--tj-ink, #111827); border-color: var(--tj-input-border, #d1d5db); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tjc-btn-no:hover{ background: var(--tj-surface-alt, #f9fafb); border-color: var(--tj-navy-300, #9ca3af); }
.tjc-btn-ok{ background: var(--tjc-btn); color: var(--tjc-btn-fg); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.tjc-btn-ok:hover{ background: var(--tjc-btn-hover); }
.tjc-btn.is-loading{ pointer-events: none; opacity: .6; }
body.tjc-lock{ overflow: hidden; }
@media (max-width: 480px){
    .tjc-backdrop{ align-items: end; padding: 12px; }
    .tjc-panel{ padding: 22px 18px 0; }
    .tjc-actions{ margin-inline: -18px; padding-inline: 18px; flex-direction: column-reverse; }
    .tjc-btn{ width: 100%; }
}

/* dark theme: the same grammar on the raised slate step */
html[data-theme="dark"] .tjc-panel{
    background: #1e293b; color: #f3f5fa; border-color: #33405c;
    box-shadow: 0 24px 48px -18px rgba(0,0,0,.7);
}
html[data-theme="dark"] .tjc-title{ color: #f3f5fa; }
html[data-theme="dark"] .tjc-text{ color: #a8b1c4; }
html[data-theme="dark"] .tjc-actions{ background: #182234; border-top-color: #33405c; }
html[data-theme="dark"] .tjc-btn-no{ background: transparent; color: #e5e9f2; border-color: #465575; box-shadow: none; }
html[data-theme="dark"] .tjc-btn-no:hover{ background: #26324a; }
html[data-theme="dark"] .tjc-x{ color: #7b869e; }
html[data-theme="dark"] .tjc-x:hover{ background: #26324a; color: #f3f5fa; }
html[data-theme="dark"] .tjc-panel{ --tjc-fg: var(--tj-brand-300); --tjc-soft: rgba(var(--tj-brand-rgb),.18); }
html[data-theme="dark"] .tjc-panel[data-tone="success"]{ --tjc-fg: #34d399; --tjc-soft: #0f2b25; }
html[data-theme="dark"] .tjc-panel[data-tone="danger"]{  --tjc-fg: #f87171; --tjc-soft: #2c1416; }
html[data-theme="dark"] .tjc-panel[data-tone="warning"]{ --tjc-fg: #fbbf24; --tjc-soft: #2c2010; }
html[data-theme="dark"] .tjc-panel[data-tone="info"]{    --tjc-fg: #38bdf8; --tjc-soft: #0d2333; }
html[data-theme="dark"] .tjc-panel[data-tone="neutral"]{ --tjc-fg: #98a1b8; --tjc-soft: rgba(100,116,139,.18); }

/* ── Toasts ── bottom inline-end corner, 16px inset, newest on top ── */
.tjt-stack{
    position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 100001;
    display: flex; flex-direction: column-reverse; gap: 10px; width: min(380px, calc(100vw - 32px));
    pointer-events: none;
    font-family: "Inter", "Cairo", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tjt{
    --tjt-fg: var(--tj-brand-deep, #095c33);
    --tjt-soft: var(--tj-brand-50, #ecfdf3);
    pointer-events: auto; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 12px; align-items: start;
    padding: 13px 12px 13px 14px; border-radius: 12px;
    background: var(--tj-surface, #fff); border: 1px solid var(--tj-border, #e5e7eb);
    box-shadow: 0 12px 32px -10px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.05);
    transform: translateY(8px); opacity: 0;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms cubic-bezier(.2,.8,.2,1);
}
.tjt.is-on{ transform: none; opacity: 1; }
.tjt.is-out{ transform: translateY(8px); opacity: 0; }
.tjt[data-type="info"]{    --tjt-fg: var(--tj-info-ink, #06618f);    --tjt-soft: var(--tj-info-50, #e7f3fb); }
.tjt[data-type="success"]{ --tjt-fg: var(--tj-success-ink, #0b7a4e); --tjt-soft: var(--tj-success-50, #e6f7ef); }
.tjt[data-type="error"]{   --tjt-fg: var(--tj-danger-ink, #b42323);  --tjt-soft: var(--tj-danger-50, #fdecec); }
.tjt[data-type="warning"]{ --tjt-fg: var(--tj-warning-ink, #a35b06); --tjt-soft: var(--tj-warning-50, #fdf3e4); }
.tjt-icon{
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
    background: var(--tjt-soft); color: var(--tjt-fg); font-size: 17px; line-height: 1;
}
.tjt.is-loading .tjt-icon{ background: transparent; width: 30px; height: 30px; }
.tjt.is-loading .tjt-icon::before{ content: ""; width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--tj-border, #e5e7eb); border-top-color: var(--tjt-fg); animation: tjtSpin .7s linear infinite; }
.tjt.is-loading .tjt-icon > *{ display: none; }
.tjt-body{ min-width: 0; padding-top: 5px; }
.tjt-title{ display: block; font-size: 13.5px; font-weight: 600; color: var(--tj-ink, #111827); line-height: 1.35; }
.tjt-msg{ display: block; margin-block-start: 3px; font-size: 12.5px; color: var(--tj-muted, #4b5563); line-height: 1.5; word-break: break-word; }
.tjt-msg ul{ margin: 4px 0 0; padding-inline-start: 16px; }
.tjt-x{
    width: 24px; height: 24px; border-radius: 6px; border: 0; background: transparent; color: var(--tj-muted-2, #6b7280);
    display: grid; place-items: center; font-size: 16px; line-height: 1; cursor: pointer; margin-top: 3px; transition: background 100ms ease-out, color 100ms ease-out;
}
.tjt-x:hover{ background: var(--tj-navy-50, #f3f4f6); color: var(--tj-ink, #111827); }
.tjt-bar{ position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; width: 100%; background: var(--tjt-fg); opacity: .45; transform-origin: left; animation: tjtBar linear forwards; }
html[dir="rtl"] .tjt-bar{ transform-origin: right; }
@keyframes tjtBar{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
.tjt:hover .tjt-bar{ animation-play-state: paused; }
.tjt-spin{ display: inline-block; animation: tjtSpin .8s linear infinite; }
@keyframes tjtSpin{ to{ transform: rotate(360deg); } }

/* dark theme */
html[data-theme="dark"] .tjt{ background: #1e293b; border-color: #33405c; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
html[data-theme="dark"] .tjt{ --tjt-fg: var(--tj-brand-300); --tjt-soft: rgba(var(--tj-brand-rgb),.18); }
html[data-theme="dark"] .tjt[data-type="info"]{    --tjt-fg: #38bdf8; --tjt-soft: #0d2333; }
html[data-theme="dark"] .tjt[data-type="success"]{ --tjt-fg: #34d399; --tjt-soft: #0f2b25; }
html[data-theme="dark"] .tjt[data-type="error"]{   --tjt-fg: #f87171; --tjt-soft: #2c1416; }
html[data-theme="dark"] .tjt[data-type="warning"]{ --tjt-fg: #fbbf24; --tjt-soft: #2c2010; }
html[data-theme="dark"] .tjt-title{ color: #f3f5fa; }
html[data-theme="dark"] .tjt-msg{ color: #98a1b8; }
html[data-theme="dark"] .tjt-x{ color: #7b869e; }
html[data-theme="dark"] .tjt-x:hover{ background: #26324a; color: #f3f5fa; }

@media (prefers-reduced-motion: reduce){
    .tjc-backdrop, .tjc-panel, .tjt, .tjc-btn, .tjt-x, .tjc-x{ transition: none; }
    .tjt-spin, .tjt.is-loading .tjt-icon::before{ animation: none; }
}