/* ==========================================================================================
   oya-sx-bridge.css — Batch 276 (v8.1.0) · Oya / Emdado on the shared Sysenta shell
   Loaded AFTER sx-tokens.css → sx-shell.css → app.css → brand_css(), only when the new shell is on
   (html.sx-on). It maps Oya's existing variables and classes onto the sx tokens in ONE layer, so
   every module page takes the new look without per-page edits. app.css itself is not edited.
     1  token bridge (Oya names → sx tokens, light F1 / dark D1, 8px, no gradients)
     2  base: IBM Plex Sans Arabic, page, scrollbars (one rule — app.css's two old blocks are overridden)
     3  shell slots: top-bar buttons, banners, rail logo, content frame
     4  components: buttons, fields, cards, tabs, pills, flashes — calm, flat, one accent
     5  dark-mode brand fills (white text on the accent fill, never on the pink ink)
     6  TABLES: Oya's .tbl-wrap tables → sx table (grid + zebra, sticky head, numbers, totals, cards)
     7  audit P1s: wide shipments list, pending settlement, merchant welcome card
     8  sign-in page
     9  print
    10-13 (Batch 277, v8.1.1) logo maroon · discreet Sysenta support · chat dock · dashboard strip — at the end
   ========================================================================================== */

/* ---------- 1) token bridge ---------- */
:root.sx-on{
  --bg:var(--sx-bg); --panel:var(--sx-surface); --panel-2:var(--sx-zebra);
  --ink:var(--sx-text); --muted:var(--sx-muted); --line:var(--sx-line); --line-2:var(--sx-line-strong);
  --brand:var(--sx-accent-ink); --brand-2:var(--sx-accent-hover); --brand-3:color-mix(in srgb,var(--sx-brand) 55%,#000);
  --brand-mid:var(--sx-brand); --accent:var(--sx-accent); --accent-2:var(--sx-accent-hover);
  --link:var(--sx-accent-ink); --badge-bg:var(--sx-accent);
  --nav-head:var(--sx-rail-ink-2); --nav-head-hi:#fff; --nav-head-open:#fff;
  --ok:var(--sx-ok); --warn:var(--sx-warn); --bad:var(--sx-bad); --info:var(--sx-info);
  --radius:var(--sx-radius); --r-sm:6px; --r-md:var(--sx-radius); --r-lg:var(--sx-radius); --r:var(--sx-radius);
  --shadow-sm:var(--sx-shadow-1); --shadow-md:var(--sx-shadow-2); --shadow:var(--sx-shadow-2);
  --e1:var(--sx-shadow-1); --e2:var(--sx-shadow-2); --e3:var(--sx-shadow-3);
  --ring:0 0 0 3px color-mix(in srgb,var(--sx-accent-ink) 24%,transparent);
}
:root.sx-on[data-theme=dark]{
  --panel-2:var(--sx-surface-2);
  --brand-3:var(--sx-accent-ink);
  /* the status colours keep app.css's dark set (tuned in 271.1 for text on dark) */
  --ok:#4ade80; --warn:#fbbf24; --bad:#ff8a9a; --info:#7aa7ff;
}

/* ---------- 2) base ---------- */
html.sx-on body{font-family:var(--sx-font);background:var(--sx-bg);color:var(--sx-text);font-size:14px;line-height:1.6}
html.sx-on :is(input,select,textarea,button){font-family:inherit}
html.sx-on ::selection{background:var(--sx-selection)}
/* scrollbars — visible in both themes (sx-shell rule restated after app.css, which carried two faint copies) */
html.sx-on ::-webkit-scrollbar{width:12px;height:12px}
html.sx-on ::-webkit-scrollbar-track{background:var(--sx-sb-track)}
html.sx-on ::-webkit-scrollbar-thumb{background:var(--sx-sb-thumb);border-radius:8px;border:3px solid var(--sx-sb-track)}
html.sx-on ::-webkit-scrollbar-thumb:hover{background:var(--sx-accent)}
html.sx-on ::-webkit-scrollbar-corner{background:var(--sx-sb-track)}
@supports not selector(::-webkit-scrollbar){html.sx-on *{scrollbar-color:var(--sx-sb-thumb) var(--sx-sb-track)}}
html.sx-on :focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px;box-shadow:none}
html.sx-on :is(.inp,.sel):focus-visible{outline:none}

/* ---------- 3) shell slots ---------- */
html.sx-on .content{padding:0;max-width:none;width:auto;margin:0;animation:none}
html.sx-on .app-copyright{text-align:center;padding:20px 12px 0;margin-top:32px;border-top:1px solid var(--sx-line);color:var(--sx-muted);font-size:12px}
.oya-top-end{display:flex;align-items:center;gap:2px}
.oya-top-end .sx-btn{height:36px;color:var(--sx-text-2)}
.oya-top-end .oya-tb-lang{min-width:36px;padding:0 8px;font-weight:700;font-size:13px}
.oya-tb-bell{position:relative}
.oya-nb{position:absolute;top:1px;inset-inline-end:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--sx-accent);color:var(--sx-on-accent);font-size:12px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
.sx-main>.sx-page>.oya-top-end{justify-content:flex-end;margin:8px 0}   /* before the shell moves it (no JS) */
.oya-banners>div{border-radius:var(--sx-radius);margin:0 0 12px;border:1px solid var(--sx-line)}
.oya-nag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:0 0 16px;border:1px solid;border-radius:var(--sx-radius);font-size:13px;font-weight:500;line-height:1.5}
.oya-nag span{flex:1;min-width:200px}
.oya-nag a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.oya-nag svg.sx-i{width:18px;height:18px}
.oya-nag--bad{background:var(--sx-bad-soft);border-color:color-mix(in srgb,var(--sx-bad) 35%,transparent);color:var(--sx-bad)}
.oya-nag--warn{background:var(--sx-warn-soft);border-color:color-mix(in srgb,var(--sx-warn) 35%,transparent);color:var(--sx-warn)}
.oya-nag .oya-nag-x{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;text-decoration:none}
.oya-nag .oya-nag-x:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.oya-noscript{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;background:var(--sx-surface);border-bottom:1px solid var(--sx-line)}
/* the install's mark fills the rail square; an uploaded logo sits on white */
.sx-rail-logo.oya-logo-mark{background:transparent;box-shadow:none;overflow:hidden}
.sx-rail-logo.oya-logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:var(--sx-radius)}
.sx-rail-logo.oya-logo-custom{background:#fff;overflow:hidden}
.sx-rail-logo.oya-logo-custom img{width:30px;height:30px;object-fit:contain}
.sx-pal .oya-pal-all b{font-weight:var(--sx-fw-medium)}
.sx-pal .oya-pal-all svg.sx-i{color:var(--sx-accent-ink)}

/* ---------- 4) components: calm, flat, 8px ---------- */
html.sx-on :is(.card,.kpi,.tbl-wrap,.ocard,.whcard,.mancard,.vcard,.scard,.lcard,.ncard,.ckpi,.tile,.flash,.help-line,.btn,.inp,.sel,.tb-btn,.tabs,.col-pop,.modal,.demo-acct,.geo-card,.rcod,.rbtn,.oc-fig,.wh-fig,.lc-fig4,.lc-fig3,.lc-fig2,.lc-money,.stmt-open,.stmt-close,.mf-editstrip,.mf-ib,.camscan-box,.tile-ico,.ck-ic,.nc-ico,.mfd-ico,.ho-ico,.ho-comment,.kpi .kico,.sig-pad){border-radius:var(--sx-radius)}
html.sx-on .tab{border-radius:6px}
html.sx-on :is(.card,.kpi,.tbl-wrap,.ocard,.whcard,.mancard,.vcard,.scard,.lcard,.ncard,.ckpi,.tile){border-color:var(--sx-line)}
html.sx-on :is(.kpi,.card,.tile,a.card,.card.lift,.ncard,.geo-card,.demo-acct):hover{transform:none}
html.sx-on .kpi::before,html.sx-on .kpi::after{display:none}
html.sx-on .kpi:hover{box-shadow:var(--sx-shadow-1);border-color:var(--sx-line-strong)}
/* buttons: one filled accent (primary), everything else neutral */
html.sx-on .btn{font-weight:600;box-shadow:none;transform:none;background-image:none}
html.sx-on .btn:hover,html.sx-on .btn:active{transform:none;box-shadow:none}
html.sx-on :is(.btn.primary,.btn.accent){background:var(--sx-accent);border-color:var(--sx-accent);color:var(--sx-on-accent);box-shadow:none}
html.sx-on :is(.btn.primary,.btn.accent):hover{background:var(--sx-accent-hover);border-color:var(--sx-accent-hover);color:var(--sx-on-accent);box-shadow:none;filter:none}
html.sx-on[data-theme=dark] :is(.btn.primary,.btn.accent),html.sx-on[data-theme=dark] :is(.btn.primary,.btn.accent):hover{color:var(--sx-on-accent)}
html.sx-on .btn.ghost{background:var(--sx-surface);border-color:var(--sx-line-strong);color:var(--sx-text)}
html.sx-on .btn.ghost:hover{background:var(--sx-surface-2);border-color:var(--sx-field-line);color:var(--sx-text)}
html.sx-on[data-theme=dark] .btn.ghost:hover{background:var(--sx-surface-2);border-color:var(--sx-field-line);color:var(--sx-text)}
html.sx-on .tb-btn{background:var(--sx-surface);border-color:var(--sx-line-strong);color:var(--sx-text);box-shadow:none}
/* fields: 3:1 boundary, accent focus — background-COLOR only (the Batch 148 select chevron is a background-image) */
html.sx-on :is(.inp,.sel){border:1px solid var(--sx-field-line);background-color:var(--sx-field);color:var(--sx-text)}
html.sx-on :is(.inp,.sel):hover{border-color:var(--sx-text-2)}
html.sx-on :is(.inp,.sel):focus{border-color:var(--sx-accent-ink);box-shadow:var(--ring)}
html.sx-on[data-theme=dark] :is(.inp,.sel){background-color:var(--sx-field);border-color:var(--sx-field-line);color:var(--sx-text)}
html.sx-on .field label{color:var(--sx-text-2);font-weight:600}
html.sx-on ::placeholder{color:var(--sx-placeholder)}
/* tabs, chips, steps */
html.sx-on .tabs{background:var(--sx-surface-2);border-color:var(--sx-line)}
html.sx-on .tab:hover{transform:none;background:var(--sx-surface);border-color:var(--sx-line)}
html.sx-on .tab.active,html.sx-on .tab.active:hover{background:var(--sx-accent);color:var(--sx-on-accent);border-color:transparent;box-shadow:none}
html.sx-on .chip{border-radius:6px}
html.sx-on .pill{box-shadow:none}
html.sx-on .avatar{background:var(--sx-accent);color:var(--sx-on-accent)}
html.sx-on .tl-line{background:var(--sx-line-strong)}
html.sx-on .step .sc{background:var(--sx-surface-2);color:var(--sx-text-2)}
html.sx-on .step.cur .sc,html.sx-on .tl-item.cur .tl-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--sx-accent) 22%,transparent)}
/* flashes and help lines — token colours, no warm/pink tint */
html.sx-on .flash{font-weight:600;box-shadow:none;animation:none}
html.sx-on .flash.ok{background:var(--sx-ok-soft);color:var(--sx-ok);border-color:color-mix(in srgb,var(--sx-ok) 35%,transparent)}
html.sx-on .flash.err{background:var(--sx-bad-soft);color:var(--sx-bad);border-color:color-mix(in srgb,var(--sx-bad) 35%,transparent)}
html.sx-on .flash.warn{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 35%,transparent)}
html.sx-on .help-line{background:var(--sx-info-soft);color:var(--sx-text-2);border-color:color-mix(in srgb,var(--sx-info) 28%,transparent)}
html.sx-on :is(.demo-acct:hover,.geo-card.active){background:var(--sx-accent-soft)}
html.sx-on .sec-head{border-bottom-color:var(--sx-line)}
html.sx-on .col-pop{background:var(--sx-surface);border-color:var(--sx-line);box-shadow:var(--sx-shadow-3)}
.sx-on .col-pop svg.sx-i,.sx-on .btn svg.sx-i{width:16px;height:16px}
/* no gradients anywhere (owner rule) */
html.sx-on .cour-hero{background:var(--sx-surface)}
html.sx-on .form-submit-bar{background:var(--sx-bg);border-top:1px solid var(--sx-line)}
html.sx-on .ob-logo-pv{background:var(--sx-accent)}
html.sx-on .bp-side{background:var(--sx-rail-bg)!important}
html.sx-on[data-theme=dark] tr.row-cancel td{background-image:none}
html.sx-on .login-hero::before,html.sx-on .login-hero::after{display:none}

/* ---------- 5) brand fills: white text sits on the accent FILL, never on the (pink, dark-mode) ink ---------- */
html.sx-on :is(.step.on .sc,.step.cur .sc,.tl-dot,.tl-item.cur .tl-dot,.rnum,.fs-n,.fm-n,.rbtn-go,.flt-pos a.on,.mf-ib-n2,.nb,.nav .badge,.ob-rail li.cur .ob-dot,.mw-step.cur .mw-n){background:var(--sx-accent);color:var(--sx-on-accent)}   /* .mw-n = the 275 migration wizard */
html.sx-on .ob-rail li.cur .ob-dot,html.sx-on .mw-step.cur .mw-n{border-color:var(--sx-accent)}
html.sx-on[data-theme=dark] [style*="background:var(--brand)"]{background:var(--sx-accent)!important}
html.sx-on[data-theme=dark] .tl-item.fail .tl-dot{color:var(--sx-on-accent)}

/* ---------- 6) TABLES — every .tbl-wrap table becomes an sx table (oya-sx.js adds the classes) ----------
   light grid + zebra + comfortable · sticky header · numbers tabular & end-aligned · totals row ·
   horizontal scroll with edge shadows (never clipped) · density toggle · phone cards with labels */
html.sx-on .tbl-wrap.sx-twrap{overflow:hidden;padding:0;background:var(--sx-surface);border:1px solid var(--sx-line);box-shadow:var(--sx-shadow-1)}
html.sx-on .tbl-wrap .sx-table{border-collapse:separate;border-spacing:0;font-size:14px}
html.sx-on .tbl-wrap .sx-table.sx-table--compact{font-size:13px}
html.sx-on .tbl-wrap .sx-table thead th{background:var(--sx-tbl-head-bg);color:var(--sx-tbl-head-ink);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;padding:var(--sx-py) var(--sx-px);border-bottom:1px solid var(--sx-line-strong);white-space:nowrap}
html.sx-on .tbl-wrap .sx-table td{font-size:inherit;max-width:28rem;border-bottom-color:var(--sx-tbl-line)}
html.sx-on .tbl-wrap .sx-table tbody tr,html.sx-on .tbl-wrap .sx-table tbody tr:hover{background:transparent}
html.sx-on .tbl-wrap .sx-table td .btn.sm{padding:5px 10px}
/* numbers: one physical end in each direction, tabular, never wrapped */
html.sx-on .sx-table .n{white-space:nowrap;font-variant-numeric:tabular-nums}
html.sx-on[dir=rtl] .sx-table .n{text-align:left!important}
html.sx-on[dir=ltr] .sx-table .n{text-align:right!important}
html.sx-on .sx-table .n.n-ar{direction:inherit}           /* «12,500 ج.م» keeps its Arabic order */
/* totals: only the LAST tfoot sticks (some lists carry the server total AND the visible-rows total) */
html.sx-on .sx-table tfoot:not(:last-of-type) td{position:static}
html.sx-on .sx-table tfoot tr{background:transparent!important}
/* density toggle */
.oya-dens{margin-inline-start:4px}
.oya-dens button{height:30px;padding:0 10px}
.oya-dens-bar{display:flex;justify-content:flex-end;margin-bottom:8px}
/* phones: the lists that had no card view of their own become labelled cards */
@media (max-width:767.98px){
  html.sx-on .tbl-wrap table.sx-table--cards{width:100%;min-width:0}
  html.sx-on .tbl-wrap.sx-twrap:has(> .sx-tscroll .sx-table--cards){border:0;background:transparent;box-shadow:none;overflow:visible}
  html.sx-on .sx-table--cards td{max-width:none}
  html.sx-on .sx-table--cards td::before{font-size:12px}
  html.sx-on .sx-table--cards tbody{padding:0}
  .oya-dens,.oya-dens-bar{display:none}
}

/* ---------- 7) audit P1s ---------- */
/* shipments list: the actions column stays in view while the wide list scrolls (COD is reached by the rail's +200px) */
html.sx-on .orders-table .sx-table thead th:last-child,
html.sx-on .orders-table .sx-table tbody td:last-child,
html.sx-on .orders-table .sx-table tfoot td:last-child{position:sticky;inset-inline-end:0;z-index:1}
html.sx-on .orders-table .sx-table thead th:last-child{z-index:3}
html.sx-on .orders-table .sx-table tfoot td:last-child{z-index:3}
html.sx-on[dir=ltr] .orders-table .sx-table :is(thead th,tbody td,tfoot td):last-child{box-shadow:inset 1px 0 0 var(--sx-line-strong)}
html.sx-on[dir=rtl] .orders-table .sx-table :is(thead th,tbody td,tfoot td):last-child{box-shadow:inset -1px 0 0 var(--sx-line-strong)}
html.sx-on .orders-table .sx-table .oya-stick-cod{position:sticky;z-index:1;font-weight:700}
html.sx-on .orders-table .sx-table thead .oya-stick-cod,html.sx-on .orders-table .sx-table tfoot .oya-stick-cod{z-index:3}
html.sx-on[dir=ltr] .orders-table .sx-table .oya-stick-cod{box-shadow:inset 1px 0 0 var(--sx-line-strong)}
html.sx-on[dir=rtl] .orders-table .sx-table .oya-stick-cod{box-shadow:inset -1px 0 0 var(--sx-line-strong)}
html.sx-on .orders-table .nm,html.sx-on .sx-table .nm{display:block;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* pending settlement: names on one line (full name on hover) */
html.sx-on .ps-table td .nm{max-width:190px}

/* ---------- 8) sign-in ---------- */
html.sx-on .login-wrap{min-height:100vh;min-height:100dvh;background:var(--sx-bg)}
html.sx-on .login-hero{flex:0 0 min(44%,560px);background:var(--sx-rail-bg);color:#fff;padding:56px 48px}
html.sx-on .login-hero h1{color:#fff;font-size:30px;font-weight:700;line-height:1.3;margin-bottom:12px;letter-spacing:0}
html.sx-on .login-hero p{font-size:15px;line-height:1.8;opacity:1;color:rgb(255 255 255 / .82);max-width:420px}
html.sx-on .login-hero .feat{font-size:14px;margin-top:14px;color:rgb(255 255 255 / .92)}
html.sx-on .login-hero .fi{width:34px;height:34px;border-radius:var(--sx-radius);background:rgb(255 255 255 / .1);color:#fff}
html.sx-on .login-hero .fi svg.sx-i{width:18px;height:18px}
html.sx-on .login-hero .brand .bt{color:#fff}
html.sx-on .login-form{flex:1;width:auto;max-width:none;background:var(--sx-bg);padding:48px 24px;align-items:center;animation:none}
html.sx-on .login-form>*{width:100%;max-width:400px}
html.sx-on .login-card{background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-1);padding:28px}
html.sx-on .login-card h2{font-size:22px;font-weight:700}
html.sx-on .login-card .lk-d{display:none}
html.sx-on[data-theme=dark] .login-card .lk-d{display:flex}
html.sx-on[data-theme=dark] .login-card .lk-l{display:none}
html.sx-on .login-top{display:flex;justify-content:flex-end;margin-bottom:16px}
html.sx-on .login-top .sx-btn svg.sx-i{width:17px;height:17px}
html.sx-on .login-form .btn.primary{height:44px;min-height:44px;font-size:15px;justify-content:center}
html.sx-on .login-mhead{background:var(--sx-rail-bg)}
html.sx-on .login-mhead .lm-brand img{filter:none;border-radius:var(--sx-radius)}
html.sx-on .lm-t{font-weight:700}
html.sx-on .login-foot{margin-top:22px;text-align:center;font-size:12px;color:var(--sx-muted)}
@media (max-width:860px){
  html.sx-on .login-form{padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px))}
  html.sx-on .login-card{padding:22px 18px}
}

/* ---------- 9) print ---------- */
@media print{
  html.sx-on body{background:#fff;color:#000}
  .oya-top-end,.oya-dens,.oya-dens-bar,.oya-nag,.oya-banners{display:none!important}
  html.sx-on .tbl-wrap.sx-twrap{overflow:visible;border:0;box-shadow:none}
}
/* light totals row on the zebra grey (status inks on #E3E6EA dropped to 4.0:1) */
:root.sx-on:not([data-theme=dark]){--sx-tbl-foot-bg:var(--sx-l-zebra)}

/* ==========================================================================================
   Batch 277 (v8.1.1)
     10  Oya colour = the logo colour #5C0E17 (html.oya-maroon: legacy maroon, no colour picked in Settings)
     11  the Sysenta support connector, made discreet (launcher hidden; panel next to the account menu)
     12  the floating chat dock
     13  the dashboard section strip
   ========================================================================================== */

/* ---------- 10) Oya maroon: brand + rail straight from the logo (no 38%-black mix — #5C0E17 is already dark) ----------
   light: #5C0E17 on white 13.7:1 · white on #5C0E17 13.7:1
   dark : ink #F2A7B5 on #1C1C1C 8.9:1 / on #141414 9.6:1 · fills #A32A3F (white on it 7.1:1; 2.4:1 against the card,
          where #5C0E17 would be 1.2:1 and vanish) */
:root.sx-on.oya-maroon,:root.sx-on.oya-maroon[data-product="oya"]{
  --sx-brand:#5C0E17; --sx-on-brand:#FFFFFF; --sx-ink-l:#5C0E17; --sx-ink-d:#F2A7B5;
  --sx-fill-d:#A32A3F; --sx-on-fill-d:#FFFFFF;
  --sx-rail-bg:#5C0E17;
}

/* ---------- 11) the Sysenta support connector (support/boot.php — not edited) ----------
   Its own floating «الدعم» button is hidden; the account menu / Ctrl+K click it (oya-sx.js). The panel opens
   beside the rail's account button, never in the corner the chat dock uses. */
html.sx-on #ssw-btn,html.sx-on #ssw-mi,html.sx-on .ssw-nav-item{display:none!important}
html.sx-on #ssw{position:fixed!important;inset:auto!important;width:0;height:0;z-index:88!important;font-family:var(--sx-font)!important}
html.sx-on #ssw-panel{position:fixed!important;top:auto!important;bottom:12px!important;inset-inline-start:calc(var(--sx-rail-w) + 10px)!important;inset-inline-end:auto!important;
  left:auto;right:auto;width:min(360px,calc(100vw - var(--sx-rail-w) - 24px))!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;
  background:var(--sx-surface)!important;color:var(--sx-text)!important;border:1px solid var(--sx-line)!important;border-radius:var(--sx-radius)!important;box-shadow:var(--sx-shadow-3)!important}
html.sx-on[dir=rtl] #ssw-panel{left:auto!important}
html.sx-on[dir=ltr] #ssw-panel{right:auto!important}
html.sx-on #ssw-panel header{background:var(--sx-surface-2)!important;color:var(--sx-text)!important;border-bottom:1px solid var(--sx-line)}
html.sx-on #ssw-x{color:var(--sx-muted)!important}
html.sx-on #ssw-panel nav{border-color:var(--sx-line)!important}
html.sx-on #ssw-panel nav button{color:var(--sx-muted)}
html.sx-on #ssw-panel nav button.on{color:var(--sx-accent-ink)!important;border-block-end-color:var(--sx-accent-ink)!important}
html.sx-on #ssw-panel label{color:var(--sx-text-2)!important}
html.sx-on #ssw-panel :is(input,textarea){background:var(--sx-field)!important;color:var(--sx-text)!important;border:1px solid var(--sx-field-line)!important;border-radius:var(--sx-radius-sm)!important}
html.sx-on #ssw-send{background:var(--sx-accent)!important;color:var(--sx-on-accent)!important;border-radius:var(--sx-radius)!important;box-shadow:none!important}
html.sx-on #ssw-panel .ssw-hint{color:var(--sx-muted)!important}
html.sx-on #ssw-panel footer{border-color:var(--sx-line)!important}
html.sx-on #ssw-panel footer a{color:var(--sx-accent-ink)!important}
@media (max-width:767.98px){
  html.sx-on #ssw-panel{inset-inline:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:calc(100dvh - var(--sx-top-h) - 24px)!important}
}
.sx-pal .oya-pal-sup svg.sx-i{color:var(--sx-accent-ink)}

/* ---------- 12) the floating chat dock (oya-dock.js places the button, its toasts and the panel) ---------- */
.oya-dock{position:static;padding-bottom:env(safe-area-inset-bottom,0px);font-family:var(--sx-font)}
.oya-dk-btn{position:fixed;z-index:60;inset-inline-end:20px;bottom:20px;width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:var(--sx-accent);color:var(--sx-on-accent);cursor:pointer;box-shadow:var(--sx-shadow-2);touch-action:none;
  transition:background-color var(--sx-dur) var(--sx-ease),box-shadow var(--sx-dur) var(--sx-ease)}
.oya-dk-btn:hover{background:var(--sx-accent-hover);box-shadow:var(--sx-shadow-3)}
.oya-dk-btn:focus-visible{outline:2px solid var(--sx-focus);outline-offset:3px}
.oya-dk-btn svg.sx-i{width:22px;height:22px}
.oya-dock[data-size="s"] .oya-dk-btn svg.sx-i{width:19px;height:19px}
.oya-dock[data-size="l"] .oya-dk-btn svg.sx-i{width:25px;height:25px}
.oya-dk-btn-x{display:none}
.oya-dock.is-open .oya-dk-btn-i{display:none}
.oya-dock.is-open .oya-dk-btn-x{display:grid}
.oya-dock.is-drag .oya-dk-btn{cursor:grabbing;box-shadow:var(--sx-shadow-3);outline:2px dashed var(--sx-accent-ink);outline-offset:4px}
.oya-dk-badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--sx-surface);color:var(--sx-accent-ink);
  box-shadow:0 0 0 2px var(--sx-accent);font-size:12px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.oya-dock.is-onchat .oya-dk-btn{display:none}
html:has(#sx-drawer.is-open) .oya-dock,html:has(#sx-pal.is-open) .oya-dock{visibility:hidden}

.oya-dk-toasts{position:fixed;z-index:61;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.oya-dk-toasts:empty,.oya-dock.is-open .oya-dk-toasts{display:none}
.oya-dk-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--sx-surface);color:var(--sx-text);border:1px solid var(--sx-line);
  border-inline-start:3px solid var(--sx-accent);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-3);cursor:pointer;font-size:13px;line-height:1.45}
.oya-dk-toast:hover{background:var(--sx-surface-2)}
.oya-dk-toast:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px}
.oya-dk-tm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oya-dk-tm b{font-weight:700;font-size:13px}
.oya-dk-tp{color:var(--sx-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oya-dk-tm small{color:var(--sx-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oya-dk-tx{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px -6px 0 0;border:0;border-radius:6px;background:transparent;color:var(--sx-muted);cursor:pointer}
[dir=rtl] .oya-dk-tx{margin:-4px 0 0 -6px}
.oya-dk-tx:hover{background:var(--sx-surface-3);color:var(--sx-text)}
.oya-dk-tx svg.sx-i{width:16px;height:16px}

.oya-dk-panel{position:fixed;z-index:62;display:flex;flex-direction:column;background:var(--sx-surface);color:var(--sx-text);border:1px solid var(--sx-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-3);overflow:hidden}
.oya-dk-panel[hidden]{display:none}
.oya-dk-h{flex:none;display:flex;align-items:center;gap:4px;min-height:52px;padding:6px 8px 6px 6px;border-bottom:1px solid var(--sx-line);background:var(--sx-surface)}
[dir=rtl] .oya-dk-h{padding:6px 6px 6px 8px}
.oya-dk-ht{flex:1;min-width:0;display:flex;flex-direction:column;padding-inline:6px}
.oya-dk-ht b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oya-dk-ht small{color:var(--sx-muted);font-size:12px}
.oya-dk-ht small:empty{display:none}
.oya-dk-ib{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--sx-radius-sm);background:transparent;color:var(--sx-text-2);cursor:pointer}
.oya-dk-ib:hover,.oya-dk-ib[aria-pressed=true]{background:var(--sx-surface-2);color:var(--sx-text)}
.oya-dk-ib[hidden]{display:none}
[dir=rtl] .oya-dk-back svg{transform:scaleX(-1)}
.oya-dk-back.has-new::after{content:"";position:absolute;top:7px;inset-inline-end:7px;width:8px;height:8px;border-radius:50%;background:var(--sx-accent)}
.oya-dk-body{flex:1;min-height:0;display:flex;flex-direction:column}
.oya-dk-list{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:4px 0}
.oya-dk-list[hidden],.oya-dk-thread[hidden],.oya-dk-set[hidden]{display:none}
.oya-dk-it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;min-height:56px}
.oya-dk-it:hover{background:var(--sx-zebra)}
.oya-dk-it:focus-visible{outline:2px solid var(--sx-focus);outline-offset:-2px}
.oya-dk-it.is-unread b{font-weight:700}
.oya-dk-contact{border-bottom:1px solid var(--sx-line);background:var(--sx-accent-soft)}
.oya-dk-contact:hover{background:color-mix(in srgb,var(--sx-accent-ink) 14%,var(--sx-surface))}
.oya-dk-contact b{color:var(--sx-accent-ink)}
.oya-dk-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sx-surface-2);color:var(--sx-text-2)}
.oya-dk-av svg.sx-i{width:18px;height:18px}
.oya-dk-av[data-who=client],.oya-dk-av[data-who=company]{background:var(--sx-accent-soft);color:var(--sx-accent-ink)}
.oya-dk-av[data-who=courier]{background:var(--sx-info-soft);color:var(--sx-info)}
.oya-dk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oya-dk-r1,.oya-dk-r2{display:flex;align-items:center;gap:6px;min-width:0}
.oya-dk-r1 b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.oya-dk-tag{flex:0 1 auto;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--sx-muted);border:1px solid var(--sx-line);border-radius:999px;padding:0 6px;line-height:17px}
.oya-dk-r1 time{flex:none;margin-inline-start:auto;font-size:12px;color:var(--sx-muted);font-variant-numeric:tabular-nums}
.oya-dk-prev{flex:1;min-width:0;font-size:13px;color:var(--sx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oya-dk-it.is-unread .oya-dk-prev{color:var(--sx-text-2)}
.oya-dk-from{color:var(--sx-text-2);font-weight:500}
.oya-dk-n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sx-accent);color:var(--sx-on-accent);font-size:12px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.oya-dk-empty{padding:28px 18px;text-align:center;color:var(--sx-muted);font-size:13px;list-style:none;margin:0}
.oya-dk-retry{margin-top:8px;border:1px solid var(--sx-line-strong);background:var(--sx-surface);color:var(--sx-text);border-radius:var(--sx-radius-sm);padding:6px 12px;font:inherit;cursor:pointer}

.oya-dk-thread{flex:1;min-height:0;display:flex;flex-direction:column}
.oya-dk-msgs{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--sx-bg)}
.oya-dk-m{max-width:82%;margin-inline-end:auto;padding:7px 10px 5px;border-radius:var(--sx-radius);background:var(--sx-surface);border:1px solid var(--sx-line);font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.oya-dk-m.is-me{margin-inline-end:0;margin-inline-start:auto;background:var(--sx-accent-soft);border-color:color-mix(in srgb,var(--sx-accent-ink) 22%,transparent)}
.oya-dk-mn{display:block;font-size:12px;font-weight:700;color:var(--sx-text-2);margin-bottom:1px}
.oya-dk-mb{display:block;white-space:pre-wrap}
.oya-dk-mb a{color:var(--sx-accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.oya-dk-att{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sx-text-2)}
.oya-dk-att svg.sx-i{width:16px;height:16px}
.oya-dk-att a{color:var(--sx-accent-ink)}
.oya-dk-m time{display:block;text-align:end;font-size:12px;color:var(--sx-muted);font-variant-numeric:tabular-nums}
.oya-dk-day{text-align:center;margin:4px 0}
.oya-dk-day span{display:inline-block;font-size:12px;color:var(--sx-muted);background:var(--sx-surface-2);border-radius:999px;padding:1px 10px}
.oya-dk-err{margin:0;padding:6px 12px;font-size:12.5px;color:var(--sx-bad);background:var(--sx-bad-soft)}
.oya-dk-form{flex:none;display:flex;gap:6px;padding:8px;border-top:1px solid var(--sx-line);background:var(--sx-surface)}
.oya-dk-in{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--sx-field-line);border-radius:var(--sx-radius);background:var(--sx-field);color:var(--sx-text);font:inherit;font-size:14px}
.oya-dk-in:focus{outline:2px solid var(--sx-focus);outline-offset:-1px;border-color:transparent}
.oya-dk-send{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--sx-radius);background:var(--sx-accent);color:var(--sx-on-accent);cursor:pointer}
.oya-dk-send:hover{background:var(--sx-accent-hover)}
.oya-dk-send[disabled]{opacity:.6;cursor:progress}
[dir=rtl] .oya-dk-send svg{transform:scaleX(-1)}
.oya-dk-note{flex:none;margin:0;padding:0 12px 8px;font-size:12px;color:var(--sx-muted);background:var(--sx-surface)}
.oya-dk-note a{color:var(--sx-accent-ink);font-weight:500}

.oya-dk-set{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:14px}
.oya-dk-set fieldset{border:0;margin:0;padding:0;min-width:0}
.oya-dk-set legend{padding:0;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--sx-text-2)}
.oya-dk-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--sx-line-strong);border-radius:var(--sx-radius);overflow:hidden}
.oya-dk-seg button{min-height:40px;border:0;border-inline-start:1px solid var(--sx-line);background:var(--sx-surface);color:var(--sx-text-2);font:inherit;font-size:13px;cursor:pointer}
.oya-dk-seg button:first-child{border-inline-start:0}
.oya-dk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.oya-dk-grid button{min-height:40px;padding:4px 8px;border:1px solid var(--sx-line-strong);border-radius:var(--sx-radius);background:var(--sx-surface);color:var(--sx-text-2);font:inherit;font-size:12.5px;cursor:pointer;line-height:1.3}
:is(.oya-dk-seg,.oya-dk-grid) button:hover{background:var(--sx-surface-2);color:var(--sx-text)}
:is(.oya-dk-seg,.oya-dk-grid) button[aria-pressed=true]{background:var(--sx-accent-soft);color:var(--sx-accent-ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--sx-accent-ink)}
:is(.oya-dk-seg,.oya-dk-grid) button:focus-visible{outline:2px solid var(--sx-focus);outline-offset:-2px}
.oya-dk-hint{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12px;color:var(--sx-muted)}
.oya-dk-hint svg.sx-i{width:16px;height:16px}
.oya-dk-sw{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0;border:0;background:none;color:var(--sx-text-2);cursor:pointer}
.oya-dk-sw-k{position:relative;width:40px;height:22px;border-radius:999px;background:var(--sx-surface-3);border:1px solid var(--sx-line-strong);transition:background-color var(--sx-dur) var(--sx-ease)}
.oya-dk-sw-k::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--sx-surface);box-shadow:var(--sx-shadow-1);transition:inset-inline-start var(--sx-dur) var(--sx-ease)}
.oya-dk-sw[aria-checked=true] .oya-dk-sw-k{background:var(--sx-accent);border-color:var(--sx-accent)}
.oya-dk-sw[aria-checked=true] .oya-dk-sw-k::after{inset-inline-start:20px}
.oya-dk-sw-t{display:grid}
.oya-dk-sw:focus-visible{outline:2px solid var(--sx-focus);outline-offset:3px;border-radius:999px}
.oya-dk-set-f{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;border-top:1px solid var(--sx-line)}
.oya-dk-set-f button{min-height:40px;padding:0 14px;border-radius:var(--sx-radius);font:inherit;font-size:13px;cursor:pointer}
.oya-dk-reset{border:1px solid var(--sx-line-strong);background:var(--sx-surface);color:var(--sx-text)}
.oya-dk-done{border:0;background:var(--sx-accent);color:var(--sx-on-accent);font-weight:700}
/* 278 — «جروب جديد» (staff): a form view in the dock, same family as the settings view */
.oya-dk-grp{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.oya-dk-grp[hidden]{display:none}
.oya-dk-grp fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.oya-dk-grp fieldset[hidden]{display:none}
.oya-dk-grp legend{padding:0;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--sx-text-2)}
.oya-dk-gn{font-weight:500;color:var(--sx-muted)}
.oya-dk-fl{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--sx-text-2)}
.oya-dk-fl .oya-dk-in{font-weight:400}
.oya-dk-grp .oya-dk-in{flex:none;width:100%}
select.oya-dk-in{padding-inline-end:28px}
.oya-dk-chk{display:flex;flex-direction:column;max-height:196px;overflow-y:auto;border:1px solid var(--sx-line);border-radius:var(--sx-radius);background:var(--sx-surface)}
.oya-dk-ck{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-top:1px solid var(--sx-line);font-size:13.5px;cursor:pointer}
.oya-dk-ck:first-child{border-top:0}
.oya-dk-ck:hover{background:var(--sx-zebra)}
.oya-dk-ck[hidden],.oya-dk-ck.is-out{display:none}
.oya-dk-ck input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--sx-accent)}
.oya-dk-ck span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oya-dk-ck small{color:var(--sx-muted);font-size:12px}
.oya-dk-chk .oya-dk-empty{padding:14px}
.oya-dk-grp .oya-dk-hint{margin:0}
.oya-dk-grp .oya-dk-err{margin:0;border-radius:var(--sx-radius-sm)}
.oya-dk-grp .oya-dk-set-f{justify-content:flex-end}
.oya-dk-gok[disabled]{opacity:.6;cursor:progress}
/* 278 — «الأعضاء» view (same family as the group form) */
.oya-dk-mem{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:14px}
.oya-dk-mem[hidden]{display:none}
.oya-dk-mem form{display:flex;flex-direction:column;gap:8px;margin:0}
.oya-dk-mem fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.oya-dk-mem legend{padding:0;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--sx-text-2)}
.oya-dk-mem .oya-dk-in{flex:none;width:100%}
.oya-dk-mem .oya-dk-chk[hidden]{display:none}
.oya-dk-mem .oya-dk-hint{margin:0}
.oya-dk-mem .oya-dk-err{margin:0;border-radius:var(--sx-radius-sm)}
.oya-dk-mem .oya-dk-set-f{justify-content:flex-end;margin-top:0}
.oya-dk-mem div.oya-dk-ck{cursor:default}
.oya-dk-mem div.oya-dk-ck span{flex:1}
.oya-dk-rm{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-inline-start:auto;border:0;border-radius:var(--sx-radius-sm);background:transparent;color:var(--sx-muted);cursor:pointer}
.oya-dk-rm:hover{background:var(--sx-bad-soft);color:var(--sx-bad)}
.oya-dk-rm:focus-visible{outline:2px solid var(--sx-focus);outline-offset:-2px}
.oya-dk-rm svg.sx-i{width:16px;height:16px}
.oya-dk-gnew{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--sx-line-strong);border-radius:var(--sx-radius-sm);background:var(--sx-surface);color:var(--sx-text);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.oya-dk-gnew:hover{background:var(--sx-surface-2)}
.oya-dk-gnew:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px}
.oya-dk-gnew svg.sx-i{width:15px;height:15px}

.oya-dk-f{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--sx-line);background:var(--sx-surface)}
.oya-dk-f[hidden]{display:none}
.oya-dk-open{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--sx-accent-ink);font-weight:700;font-size:13px;text-decoration:none}
.oya-dk-open:hover{text-decoration:underline;text-underline-offset:3px}
.oya-dk-open svg.sx-i{width:16px;height:16px}
.oya-dk-push{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--sx-line-strong);border-radius:var(--sx-radius-sm);background:var(--sx-surface);color:var(--sx-text-2);font:inherit;font-size:12.5px;cursor:pointer}
.oya-dk-push[hidden],.oya-dk-pushon[hidden]{display:none}
.oya-dk-push svg.sx-i{width:15px;height:15px}
.oya-dk-pushon{font-size:12px;color:var(--sx-muted)}

/* phone: the panel is a full-screen sheet above everything but the drawer / palette */
@media (max-width:767.98px){
  .oya-dk-panel{inset:0;width:auto!important;height:auto!important;border:0;border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px);z-index:84}
  .oya-dock.is-open .oya-dk-btn{display:none}
  html.oya-dk-lock,html.oya-dk-lock body{overflow:hidden}
  .oya-dk-h{min-height:56px}
  .oya-dk-ib{width:44px;height:44px}
  .oya-dk-in,.oya-dk-send{height:44px}
  .oya-dk-send{width:44px}
}
html.sx-on .sx-main{padding-bottom:96px}   /* the end of every page scrolls clear of the dock button */
@media (prefers-reduced-motion:reduce){.oya-dk-btn,.oya-dk-sw-k,.oya-dk-sw-k::after{transition:none}}
@media print{.oya-dock,#ssw{display:none!important}}

/* ---------- 13) the dashboard section strip (launcher option 2; tiles = sx-shell [data-sec] buttons) ---------- */
.oya-strip{margin:0 0 16px}
.oya-strip-l{display:flex;gap:8px;list-style:none;margin:0;padding:0 0 2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.oya-strip-l>li{flex:1 0 128px;scroll-snap-align:start;min-width:0;display:flex}
.oya-st{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:8px 12px;border:1px solid var(--sx-line);border-radius:var(--sx-radius);
  background:var(--sx-surface);color:var(--sx-text);font:inherit;font-size:13px;font-weight:500;text-align:start;cursor:pointer;box-shadow:var(--sx-shadow-1);
  transition:border-color var(--sx-dur) var(--sx-ease),background-color var(--sx-dur) var(--sx-ease)}
.oya-st:hover{border-color:var(--sx-line-strong);background:var(--sx-zebra)}
.oya-st[aria-expanded=true]{border-color:var(--sx-accent-ink);background:var(--sx-accent-soft)}
.oya-st:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px}
.oya-st-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--sx-radius-sm);background:var(--sx-accent-soft);color:var(--sx-accent-ink)}
.oya-st-ic svg.sx-i{width:18px;height:18px}
.oya-st-t{flex:1;min-width:0;overflow:hidden;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.oya-st-b{position:absolute;top:-7px;inset-inline-end:-5px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sx-surface);color:var(--sx-text-2);
  border:1px solid var(--sx-line-strong);font-size:12px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.oya-st-b.is-warn{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 45%,transparent)}
.oya-strip-l{padding-top:8px;margin-top:-8px}
@media (max-width:767.98px){
  .oya-strip-l{gap:6px;margin-inline:calc(var(--sx-sp-4) * -1);padding-inline:var(--sx-sp-4);scroll-padding-inline:var(--sx-sp-4)}
  .oya-strip-l>li{flex:0 0 auto}
  .oya-st{min-height:44px;width:auto;max-width:200px}
}
@media print{.oya-strip{display:none}}
.sx-pal-list:has(.oya-pal-sup) .sx-pal-empty{display:none}

/* ---------- 14) 282 (v8.1.6) — the page heading names the page: the last crumb hides on a desktop (OYA-P2-17) ---------- */
@media (min-width:1024px){html.oya-crumb-h .sx-crumb li:last-child:not(:first-child){display:none}}

/* ---------- 15) 282 — one toast after a save (OYA-P3-24); the inline success line it repeats steps aside ---------- */
.content>.flash.ok.oya-toasted{display:none}
.oya-toasts{position:fixed;z-index:62;top:72px;inset-inline-end:16px;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.oya-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--sx-surface);color:var(--sx-text);border:1px solid var(--sx-line);
  border-inline-start:3px solid var(--sx-ok);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-3);font-size:13px;line-height:1.55;
  animation:oyaToastIn var(--sx-dur,160ms) var(--sx-ease,ease-out)}
.oya-toast>svg.sx-i{flex:none;width:18px;height:18px;color:var(--sx-ok);fill:none;stroke:currentColor;stroke-width:2;margin-top:1px}
.oya-toast-t{flex:1;min-width:0;overflow-wrap:anywhere}
.oya-toast-x{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px -6px 0 0;border:0;border-radius:6px;background:transparent;color:var(--sx-muted);cursor:pointer}
[dir=rtl] .oya-toast-x{margin:-4px 0 0 -6px}
.oya-toast-x:hover{background:var(--sx-surface-3);color:var(--sx-text)}
.oya-toast-x:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px}
.oya-toast-x svg.sx-i{width:16px;height:16px}
.oya-toast.is-out{opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s}
@keyframes oyaToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:767.98px){.oya-toasts{top:64px;inset-inline:16px;width:auto}}
@media (prefers-reduced-motion:reduce){.oya-toast{animation:none}.oya-toast.is-out{transition:none}}
@media print{.oya-toasts{display:none}.content>.flash.ok.oya-toasted{display:flex}}

/* ---------- 16) 282 — chart skeleton while a filter reloads the dashboard (OYA-P3-24) ---------- */
html.oya-busy .card:has(svg.oya-chart){position:relative;overflow:hidden}
html.oya-busy .card:has(svg.oya-chart)>*{visibility:hidden}
html.oya-busy .card:has(svg.oya-chart)::after{content:"";position:absolute;inset:16px;border-radius:var(--sx-radius-sm,6px);
  background:linear-gradient(90deg,var(--sx-surface-2) 0%,var(--sx-surface-3) 50%,var(--sx-surface-2) 100%);background-size:200% 100%;animation:oyaSkel 1.1s linear infinite}
@keyframes oyaSkel{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){html.oya-busy .card:has(svg.oya-chart)::after{animation:none}}