/* ==========================================================================================
   audiexa-sx-bridge.css — B899 · Audiexa on the shared Sysenta shell (layout «ل»)
   Loaded AFTER sx-tokens.css → sx-shell.css → style.css, only on html.sx-on pages (the app shell,
   sign-in, password, client portal). It maps Audiexa's existing variables and classes onto the sx tokens
   in ONE layer, so every module screen takes the new look without per-page edits.
     1  token bridge (Audiexa names → sx tokens · light F1 / dark D1 · 8px · no gold, no gradients)
     2  base: IBM Plex Sans Arabic, page, scrollbars, focus
     3  shell slots: top-bar buttons, page head, rail logo, content frame, help panel
     4  components: panels, KPI cards, buttons, fields, tabs, badges, flashes — calm, flat, one accent
     5  TABLES: every table.data → sx table (grid + zebra, sticky head, numbers, totals, frozen actions, cards)
     6  audit P1s (coverage bar, office tabs, periods, wide tables)
     7  sign-in · password · client portal
     8  Sysenta support connector (discreet)
     9  dashboard section strip
    10  glyph icons · print
   Product colour = the logo colour #00704F (sx-tokens preset «audiexa»: ink #00704F light / #34D399 dark;
   rail = 38% with black = #053025 because the colour is not dark: luminance 0.12 > 0.08).
   ========================================================================================== */

/* ---------- 1) token bridge ---------- */
:root.sx-on,:root.sx-on[data-theme]{
  --paper:var(--sx-bg); --surface:var(--sx-surface); --tint:var(--sx-zebra); --zebra:var(--sx-zebra);
  --border:var(--sx-line); --border-strong:var(--sx-line-strong);
  --text:var(--sx-text); --muted:var(--sx-muted); --muted-2:var(--sx-placeholder);
  --ink:var(--sx-text); --ink-2:var(--sx-text-2); --ink-3:var(--sx-accent-ink); --ink-soft:var(--sx-surface-2);
  /* the gold second colour is retired: neutral greys (owner rule — one accent per product) */
  --gold:var(--sx-text-2); --gold-ink:var(--sx-text-2); --gold-ink-2:var(--sx-text-2); --gold-soft:var(--sx-surface-2); --gold-line:var(--sx-line-strong);
  --pos:var(--sx-ok); --pos-ink:var(--sx-ok); --pos-soft:var(--sx-ok-soft);
  --neg:var(--sx-bad); --neg-ink:var(--sx-bad); --neg-soft:var(--sx-bad-soft); --neg-tint:var(--sx-bad-soft); --neg-fill:#B91C1C;
  --warn:var(--sx-warn); --warn-ink:var(--sx-warn); --warn-soft:var(--sx-warn-soft); --warn-tint:var(--sx-warn-soft);
  --info:var(--sx-info); --info-soft:var(--sx-info-soft);
  --track:var(--sx-surface-2); --soft:var(--sx-surface-2); --soft-ink:var(--sx-text-2);
  --brand:var(--sx-accent); --brand-hover:var(--sx-accent-hover); --on-brand:var(--sx-on-accent); --brand-ink:var(--sx-accent-ink); --brand-tint:var(--sx-accent-soft);
  --side:var(--sx-rail-bg); --side-2:var(--sx-rail-active); --brand-on-side:#FFFFFF;
  --ink-bg:var(--sx-accent); --on-ink:var(--sx-on-accent);
  --tick-bg:var(--sx-warn-soft); --tick-ink:var(--sx-warn); --tick-line:color-mix(in srgb,var(--sx-warn) 35%,transparent);
  --bg:var(--sx-surface-2); --surface-2:var(--sx-surface-2); --overlay:var(--sx-scrim);
  --sh-sm:var(--sx-shadow-1); --sh:var(--sx-shadow-1); --sh-md:var(--sx-shadow-2); --sh-lg:var(--sx-shadow-3); --shadow:var(--sx-shadow-1);
  --radius:var(--sx-radius); --radius-sm:var(--sx-radius-sm);
  --ring:0 0 0 3px color-mix(in srgb,var(--sx-accent-ink) 24%,transparent);
  --font:var(--sx-font);
}

/* ---------- 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)}
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 :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px;box-shadow:none}
html.sx-on :is(input,select,textarea):focus{border-color:var(--sx-accent-ink);box-shadow:var(--ring);outline:none}
html.sx-on a{color:inherit}
html.sx-on .content a:not([class]){color:var(--sx-accent-ink)}

/* ---------- 3) shell slots ---------- */
html.sx-on .sx-main .content{padding:0 0 32px;flex:none}
html.sx-on body .content{padding-bottom:32px}
.au-top-end{display:flex;align-items:center;gap:2px}
.au-top-end .sx-btn{height:36px;color:var(--sx-text-2)}
.au-top-end .au-tb-lang{min-width:36px;padding:0 8px;font-weight:700;font-size:13px;text-decoration:none}
.sx-main>.sx-page>.au-top-end{justify-content:flex-end;margin:8px 0}   /* before the shell moves it (no JS) */
.au-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 20px}
.au-ph-t{min-width:0}
.au-ph h1{font-size:22px;font-weight:700;line-height:1.3;color:var(--sx-text);margin:0}
.au-ph-sub{display:block;font-size:13px;color:var(--sx-muted);margin-top:2px}
.au-ph-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.au-ph .hdr-eng{margin:0!important;min-width:0;max-width:100%}
.au-ph .hdr-eng select{min-width:0!important;width:clamp(220px,30vw,360px);max-width:100%!important}
.au-ph .hdr-eng .cell-muted{font-size:12px!important;color:var(--sx-muted)}
html.sx-on .app-foot{text-align:center;padding:16px 12px 0;margin-top:24px;border-top:1px solid var(--sx-line);color:var(--sx-muted);font-size:12px;line-height:1.7;background:transparent}
.au-noscript{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;background:var(--sx-surface);border-top:1px solid var(--sx-line)}
.au-noscript form{display:inline}
/* the real Audiexa mark fills the rail square (it carries its own #00704F tile) — was a CSS box with the letter «A» */
.sx-rail-logo.au-logo{background:transparent;box-shadow:none;overflow:hidden}
.sx-rail-logo.au-logo img{width:100%;height:100%;object-fit:cover;border-radius:var(--sx-radius)}
@media (max-width:767.98px){html.sx-on .au-ph h1{font-size:18px}.au-ph{margin-bottom:14px}.au-ph-end,.au-ph .hdr-eng{width:100%}.au-ph .hdr-eng{flex-wrap:wrap}.au-ph .hdr-eng select{width:100%}}
/* help: the floating button is gone (it covered content — G2 P1); the top-bar «?» opens the same panel under it */
html.sx-on .hlp-fab{display:none!important}
html.sx-on[dir] .hlp-panel.hlp-pos-auto{top:calc(var(--sx-top-h) + 8px)!important;bottom:auto!important;max-height:calc(100dvh - var(--sx-top-h) - 24px)!important;border-radius:var(--sx-radius);border-color:var(--sx-line);box-shadow:var(--sx-shadow-3)}
html.sx-on[dir=rtl] .hlp-panel.hlp-pos-auto{left:16px!important;right:auto!important}
html.sx-on[dir=ltr] .hlp-panel.hlp-pos-auto{right:16px!important;left:auto!important}
@media (max-width:767.98px){html.sx-on[dir] .hlp-panel.hlp-pos-auto{left:12px!important;right:12px!important;width:auto!important;top:calc(var(--sx-top-h) + 8px)!important;max-height:calc(100dvh - var(--sx-top-h) - 20px)!important}}
html.sx-on .hlp-head{background:var(--sx-surface-2);color:var(--sx-text);border-bottom:1px solid var(--sx-line)}
html.sx-on .hlp-title .ic{color:var(--sx-accent-ink)}
html.sx-on .hlp-full{color:var(--sx-accent-ink)}
html.sx-on .hlp-x{color:var(--sx-muted)}
html.sx-on .hlp-x:hover{background:var(--sx-surface-3);color:var(--sx-text)}
html.sx-on :is(.hlp-sug,.hlp-link,.hlp-searchbar input,.hlp-ai){border-radius:var(--sx-radius-sm)}

/* ---------- 4) components: calm, flat, 8px ---------- */
html.sx-on :is(.panel,.form-card,.kpi,.doc-card,.dio-card,.dio-stat,.ef-row,.vo-doc,.fsmap-savebar,.eg-tabs,.tbt-note,.perm-row,.mk-form,.cal-wrap .panel){border-radius:var(--sx-radius)}
html.sx-on :is(.panel,.form-card,.kpi,.doc-card){border-color:var(--sx-line);box-shadow:var(--sx-shadow-1)}
html.sx-on :is(.panel,.kpi,.doc-card,.btn):hover{transform:none}
html.sx-on .panel:hover{box-shadow:var(--sx-shadow-1)}
html.sx-on .panel-head{border-bottom-color:var(--sx-line)}
html.sx-on .panel-title{font-size:15px;font-weight:700;color:var(--sx-text);display:flex;align-items:center;gap:8px}
html.sx-on .panel-title .ic{color:var(--sx-muted)}
html.sx-on .kpi{padding:16px 18px}
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)}
html.sx-on .kpi-label{font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--sx-muted)}
html.sx-on .kpi-value{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--sx-text)}
@media (max-width:767.98px){
  html.sx-on .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html.sx-on .kpi{padding:12px}
  html.sx-on .kpi-value{font-size:20px}
}
/* buttons: one filled accent (primary), everything else neutral */
html.sx-on .btn{border-radius:var(--sx-radius);font-weight:600;box-shadow:none;transform:none;background-image:none;min-height:36px;justify-content:center}
html.sx-on .btn:hover,html.sx-on .btn:active{transform:none;box-shadow:none}
html.sx-on .btn-sm{min-height:30px}
html.sx-on .btn-primary{background:var(--sx-accent);color:var(--sx-on-accent);border:1px solid var(--sx-accent)}
html.sx-on .btn-primary:hover{background:var(--sx-accent-hover);border-color:var(--sx-accent-hover);box-shadow:none}
html.sx-on .btn-ghost{background:var(--sx-surface);color:var(--sx-text);border:1px solid var(--sx-line-strong)}
html.sx-on .btn-ghost:hover{background:var(--sx-surface-2);border-color:var(--sx-field-line)}
html.sx-on .icon-btn{border-radius:var(--sx-radius-sm);border-color:var(--sx-line-strong);background:var(--sx-surface);color:var(--sx-text-2)}
html.sx-on .icon-btn:hover{background:var(--sx-surface-2);color:var(--sx-text)}
html.sx-on .icon-btn.danger:hover{color:var(--sx-bad);border-color:var(--sx-bad)}
html.sx-on .lang-toggle{border-radius:var(--sx-radius);border-color:var(--sx-line-strong);background:var(--sx-surface);color:var(--sx-text-2)}
/* fields: 3:1 boundary, accent focus */
html.sx-on :is(.field input,.field select,.field textarea,.filter-select,.search input,.perm-row select,.login-body input,.dio-map-sel,.mk-form select,.mk-form input){border:1px solid var(--sx-field-line);background-color:var(--sx-field);color:var(--sx-text);border-radius:var(--sx-radius)}
html.sx-on :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=image],[type=hidden]),select,textarea){border-color:var(--sx-field-line)}
html.sx-on .field label{color:var(--sx-text-2);font-weight:600}
html.sx-on ::placeholder{color:var(--sx-placeholder);opacity:1}
html.sx-on .sec-title{color:var(--sx-text-2);text-transform:none;letter-spacing:0;font-size:13px}
/* tabs & chips: active = accent, the rest neutral */
html.sx-on .eg-tabs{border-color:var(--sx-line);box-shadow:none;background:var(--sx-surface-2)}
html.sx-on .eg-tab{border-radius:var(--sx-radius-sm);color:var(--sx-text-2)}
html.sx-on .eg-tab:hover{background:var(--sx-surface);color:var(--sx-text)}
html.sx-on .eg-tab.on{background:var(--sx-accent);color:var(--sx-on-accent)}
html.sx-on .eg-tab-n{background:var(--sx-surface);color:var(--sx-text-2)}
html.sx-on .eg-tab.on .eg-tab-n{background:rgb(0 0 0 / .28);color:#fff}
html.sx-on .eg-chip,html.sx-on .fsmap-chip{border-color:var(--sx-line-strong);background:var(--sx-surface)}
html.sx-on .fsmap-chip.active{background:var(--sx-accent);border-color:var(--sx-accent);color:var(--sx-on-accent)}
html.sx-on .fsmap-chip.active .fsmap-chip-n{background:var(--sx-surface);color:var(--sx-text)}
/* badges: status pills from the shared status colours; ink/gold/soft = neutral */
html.sx-on .badge{font-weight:500;letter-spacing:0}
html.sx-on :is(.b-ink,.b-gold,.b-soft){background:var(--sx-surface-2);color:var(--sx-text-2)}
/* flashes */
html.sx-on .flash{border-radius:var(--sx-radius);box-shadow:none;animation:none;border:1px solid;border-inline-start-width:4px}
html.sx-on .flash-ok{border-color:color-mix(in srgb,var(--sx-ok) 35%,transparent)}
html.sx-on .flash-err{border-color:color-mix(in srgb,var(--sx-bad) 35%,transparent)}
html.sx-on .flash-warn{border-color:color-mix(in srgb,var(--sx-warn) 35%,transparent)}
/* lists, empty states, misc */
html.sx-on .lrow{border-bottom-color:var(--sx-line)}
html.sx-on .li-ic{border-radius:var(--sx-radius-sm)}
html.sx-on .empty .ic{color:var(--sx-muted)}
html.sx-on .dio-ic{border-radius:var(--sx-radius-sm)}
html.sx-on .prog{background:var(--sx-surface-2)}
html.sx-on .eg-client-row td{background:var(--sx-surface-2);border-top-color:var(--sx-line-strong)}
html.sx-on .eg-client-row:hover td{background:color-mix(in srgb,var(--sx-accent-ink) 7%,var(--sx-surface-2))}
html.sx-on .eg-client-row .eg-client-name .ic{color:var(--sx-muted)}
html.sx-on .cal-today{box-shadow:inset 0 0 0 2px var(--sx-accent-ink)}
html.sx-on .vo-amount{background:var(--sx-surface-2);border-color:var(--sx-line-strong)}
html.sx-on .tbt-note{border-color:color-mix(in srgb,var(--sx-warn) 35%,transparent)}
/* no gradients anywhere (owner rule) */
html.sx-on [style*="linear-gradient"],html.sx-on [style*="radial-gradient"]{background-image:none!important;background-color:var(--sx-line-strong)!important}

/* ---------- 5) TABLES — every table.data becomes an sx table (audiexa-sx.js adds the classes) ----------
   light grid + zebra + comfortable · sticky header · numbers tabular & end-aligned · totals row ·
   horizontal scroll with edge shadows (never clipped) · frozen actions column · phone cards with labels */
html.sx-on .tbl-wrap.sx-twrap{overflow:visible}
html.sx-on .panel>.tbl-wrap.sx-twrap,html.sx-on .panel>.sx-tscroll{border-top:0}
html.sx-on table.data.sx-table{border-collapse:separate;border-spacing:0;font-size:14px;width:max-content;min-width:100%}
html.sx-on table.data.sx-table.sx-table--compact{font-size:13px}
html.sx-on table.data.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);box-shadow:none;white-space:nowrap}
html.sx-on table.data.sx-table td{padding:var(--sx-py) var(--sx-px);border-bottom:1px solid var(--sx-tbl-line);max-width:30rem}
html.sx-on table.data.sx-table tbody tr,html.sx-on table.data.sx-table tbody tr:hover,html.sx-on table.data.sx-table tbody tr:nth-child(even){background:transparent}
html.sx-on table.data.sx-table td.cell-muted{color:var(--sx-muted)}
html.sx-on .sx-table .n{white-space:nowrap;font-variant-numeric:tabular-nums;unicode-bidi:isolate}
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 */
html.sx-on .sx-table thead th.n{direction:inherit}
html.sx-on .sx-table tfoot tr{background:transparent!important}
html.sx-on .sx-table tfoot td{font-weight:700}
html.sx-on .sx-table tfoot:not(:last-of-type) td{position:static}
/* light totals row on the zebra grey (status inks on #E3E6EA dropped below 4.5:1) */
:root.sx-on:not([data-theme=dark]){--sx-tbl-foot-bg:var(--sx-l-zebra)}
/* the empty-state row spans the table and carries no column label */
html.sx-on .sx-table tr.au-empty-row td{text-align:center;white-space:normal}
/* frozen actions column: row buttons stay in view while a wide table scrolls (owner decision) */
html.sx-on .sx-table.au-actstick :is(thead th,tbody td,tfoot td):last-child{position:sticky;inset-inline-end:0;z-index:1}
html.sx-on .sx-table.au-actstick thead th:last-child,html.sx-on .sx-table.au-actstick tfoot td:last-child{z-index:3}
html.sx-on[dir=ltr] .sx-table.au-actstick :is(thead th,tbody td,tfoot td):last-child{box-shadow:inset 1px 0 0 var(--sx-line-strong)}
html.sx-on[dir=rtl] .sx-table.au-actstick :is(thead th,tbody td,tfoot td):last-child{box-shadow:inset -1px 0 0 var(--sx-line-strong)}
html.sx-on .sx-table .row-actions{flex-wrap:nowrap}
/* density toggle */
.au-dens{margin-inline-start:4px}
.au-dens button{height:30px;padding:0 10px}
/* phones: labelled cards */
@media (max-width:767.98px){
  html.sx-on table.data.sx-table--cards{width:100%;min-width:0}
  html.sx-on .sx-table--cards td{max-width:none;overflow-wrap:anywhere}
  html.sx-on .sx-table--cards td::before{font-size:12px}
  html.sx-on .sx-table--cards td[data-label=""]::before{display:none}
  html.sx-on .sx-table--cards td[data-label=""]{justify-content:flex-end}
  html.sx-on .sx-table--cards tr.au-empty-row td{display:block;text-align:center}
  html.sx-on .sx-table--cards tr.eg-client-row td{display:block;text-align:start;line-height:1.9}
  html.sx-on .sx-table--cards tr.eg-client-row td::before{display:none}
  html.sx-on .panel:has(.sx-table--cards){background:transparent;border:0;box-shadow:none;overflow:visible}
  html.sx-on .panel:has(.sx-table--cards)>.panel-head{background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:var(--sx-radius)}
  html.sx-on .sx-table--cards tbody{padding:8px 0}
  html.sx-on table.data.sx-table--cards tbody tr:nth-child(n){background:var(--sx-surface)}
  html.sx-on .sx-table--cards td.cell-strong{display:block;text-align:start}
  html.sx-on .sx-table--cards td.cell-strong::before{display:block;max-width:none;margin-bottom:2px}
  html.sx-on .sx-table.au-actstick :is(thead th,tbody td,tfoot td):last-child{position:static}
  .au-dens{display:none}
}

/* ---------- 6) audit P1s ---------- */
/* coverage bar keeps its width inside a phone card */
html.sx-on .sx-table--cards td:has(>.au-cov){gap:12px}
html.sx-on .au-cov{min-width:96px}
/* engagements: the period never breaks, reads in the page direction (au_period) */
html.sx-on .sx-table td.au-period-td{white-space:nowrap}
/* office-accounts tabs: one scrolling row, nothing clipped */
html.sx-on .au-tabs{background:var(--sx-surface-2);border-color:var(--sx-line)}
html.sx-on .au-tab{color:var(--sx-text-2)}
html.sx-on .au-tab:hover{background:var(--sx-surface);color:var(--sx-text)}
html.sx-on .au-tab.is-on{background:var(--sx-accent);color:var(--sx-on-accent)}

/* ---------- 7) sign-in · password · client portal ---------- */
html.sx-on .login-wrap{min-height:100vh;min-height:100dvh;background:var(--sx-bg);padding:24px 16px}
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);max-width:400px}
html.sx-on[data-theme] .login-card{box-shadow:var(--sx-shadow-1)}
html.sx-on .login-head{background:var(--sx-surface);color:var(--sx-text);padding:28px 28px 8px;text-align:center}
html.sx-on .login-mark-img{margin:0 auto 14px;width:48px;height:48px}
html.sx-on .login-title{font-size:22px;font-weight:700;letter-spacing:0;color:var(--sx-text)}
html.sx-on .login-sub{color:var(--sx-muted);font-size:13px}
html.sx-on .login-head .th-toggle{background:var(--sx-surface);border:1px solid var(--sx-line-strong);color:var(--sx-text-2)}
html.sx-on .login-head .th-toggle:hover{background:var(--sx-surface-2);color:var(--sx-text)}
html.sx-on .login-body{padding:20px 28px 26px}
html.sx-on .login-body label{color:var(--sx-text-2)}
html.sx-on .login-body input{min-height:44px}
html.sx-on .login-btn{background:var(--sx-accent);color:var(--sx-on-accent);border-radius:var(--sx-radius);min-height:44px;font-size:15px}
html.sx-on .login-btn:hover{background:var(--sx-accent-hover)}
html.sx-on .login-err{border-radius:var(--sx-radius-sm)}
html.sx-on .login-hint{color:var(--sx-muted)}
html.sx-on .login-lang{color:var(--sx-accent-ink);font-weight:600}
html.sx-on .login-foot{color:var(--sx-muted);font-size:12px}
html.sx-on .cpw-note{background:var(--sx-surface-2);color:var(--sx-text);border-radius:var(--sx-radius-sm)}
@media (max-width:520px){html.sx-on .login-head{padding:22px 18px 6px}html.sx-on .login-body{padding:18px}}
/* client portal: a plain top bar (same tokens, font, theme toggle, language) + scrolling tabs */
html.sx-on .au-portal .au-ptop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px;background:var(--sx-surface);border-bottom:1px solid var(--sx-line)}
html.sx-on .au-ptop-mark{width:34px;height:34px;flex:none}
html.sx-on .au-ptop-t{min-width:0}
html.sx-on .au-portal .page-title{color:var(--sx-text);font-weight:700}
html.sx-on .au-portal .page-sub{color:var(--sx-muted)}
html.sx-on .au-ptop-user{font-size:13px;font-weight:600;color:var(--sx-text-2);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.sx-on .au-ptop .th-toggle{border-radius:var(--sx-radius-sm)}
html.sx-on .au-ptabs{padding:10px 24px;background:var(--sx-surface);border-bottom:1px solid var(--sx-line)}
html.sx-on .au-ptabs .au-tabs{display:inline-flex;max-width:100%}
html.sx-on .au-portal .content{padding:24px;max-width:1240px;margin:0 auto}
@media (max-width:640px){
  html.sx-on .au-portal .au-ptop{padding:10px 12px;gap:8px}
  html.sx-on .au-portal .page-title{font-size:16px!important}
  html.sx-on .au-ptop-user{display:none}
  html.sx-on .au-ptabs{padding:8px 12px}
  html.sx-on .au-ptabs .au-tabs{display:flex}
  html.sx-on .au-portal .content{padding:14px 12px 40px}
}

/* ---------- 8) the Sysenta support connector (support/boot.php — not edited) ----------
   Its own floating «الدعم» button / menu item is hidden; the account menu and Ctrl+K click it (audiexa-sx.js).
   The panel opens beside the rail's account button. */
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 .au-pal-sup svg.sx-i{color:var(--sx-accent-ink)}
.sx-pal-list:has(.au-pal-sup) .sx-pal-empty{display:none}

/* ---------- 9) the dashboard section strip (launcher option 2; tiles = sx-shell [data-sec] buttons) ---------- */
.au-strip{margin:0 0 16px}
.au-strip-l{display:flex;gap:8px;list-style:none;margin:-8px 0 0;padding:8px 0 2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.au-strip-l>li{flex:1 0 128px;scroll-snap-align:start;min-width:0;display:flex}
.au-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)}
.au-st:hover{border-color:var(--sx-line-strong);background:var(--sx-zebra)}
.au-st[aria-expanded=true]{border-color:var(--sx-accent-ink);background:var(--sx-accent-soft)}
.au-st:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px}
.au-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)}
.au-st-ic svg.sx-i{width:18px;height:18px}
.au-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}
.au-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:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.au-st-b.is-warn{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 45%,transparent)}
.au-st-b.is-bad{background:var(--sx-bad-soft);color:var(--sx-bad);border-color:color-mix(in srgb,var(--sx-bad) 45%,transparent)}
@media (max-width:767.98px){
  .au-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)}
  .au-strip-l>li{flex:0 0 auto}
  .au-st{min-height:44px;width:auto;max-width:200px}
}

/* ---------- 10) glyph icons (emoji in buttons / headings / badges → one SVG family) · print ---------- */
svg.au-gi{width:1.05em;height:1.05em;vertical-align:-.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
html.sx-on .badge svg.au-gi{width:12px;height:12px}
@media print{
  html.sx-on body{background:#fff;color:#000}
  .au-top-end,.au-dens,.au-strip,.au-ph-end{display:none!important}
  html.sx-on .tbl-wrap.sx-twrap{overflow:visible}
  html.sx-on .sx-table.au-actstick :is(thead th,tbody td,tfoot td):last-child{position:static}
}
/* ---------- 11) B900 · «محتاج منك النهارده» · قائمة التصدير · زر الطي · حركة هادية ---------- */
.au-today{margin:0 0 16px}
.au-today .panel-head{display:flex;align-items:center;gap:8px}
.au-today h2.panel-title{margin:0}
.au-today-role{margin-inline-start:auto;padding:0 10px;line-height:24px;border:1px solid var(--sx-line-strong);border-radius:999px;color:var(--sx-text-2);font-size:12px;font-weight:500;white-space:nowrap}
.au-today-office{margin:0;padding:10px 16px;border-bottom:1px solid var(--sx-line);color:var(--sx-text-2);font-size:13px}
.au-today-l{list-style:none;margin:0;padding:0}
.au-today-i{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--sx-line);transition:background-color var(--sx-dur) var(--sx-ease)}
.au-today-i:first-child{border-top:0}
.au-today-i:hover{background:var(--sx-zebra)}
.au-today-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--sx-radius-sm);background:var(--sx-accent-soft);color:var(--sx-accent-ink)}
.au-today-ic .ic{width:18px;height:18px}
.au-today-i.is-warn .au-today-ic{background:var(--sx-warn-soft);color:var(--sx-warn)}
.au-today-i.is-bad .au-today-ic{background:var(--sx-bad-soft);color:var(--sx-bad)}
.au-today-m{flex:1;min-width:0}
.au-today-t{display:block;color:var(--sx-text);font-weight:600;font-size:14px;text-decoration:none}
.au-today-t::after{content:"";position:absolute;inset:0}
.au-today-t:focus-visible{outline:none}
.au-today-i:has(.au-today-t:focus-visible){outline:2px solid var(--sx-focus);outline-offset:-2px}
.au-today-s{color:var(--sx-muted);font-size:12.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-today-n{flex:none;min-width:3ch;text-align:end;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sx-text)}
.au-today-i.is-bad .au-today-n{color:var(--sx-bad)}
.au-today-go{flex:none;position:relative;z-index:0}
.au-today .empty{padding:24px 16px}
@media (max-width:767.98px){
  .au-today-i{padding:12px}
  .au-today-go{display:none}
  .au-today-n{font-size:18px}
}
/* export menu (details/summary — works without JS) */
.au-exp{position:relative;display:inline-block}
.au-exp>summary{list-style:none;cursor:pointer;user-select:none}
.au-exp>summary::-webkit-details-marker{display:none}
.au-exp>summary .au-exp-chev{transition:transform var(--sx-dur) var(--sx-ease)}
.au-exp[open]>summary{background:var(--sx-surface-2);border-color:var(--sx-field-line)}
.au-exp[open]>summary .au-exp-chev{transform:rotate(180deg)}
.au-exp-m{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:40;min-width:200px;padding:4px;background:var(--sx-surface);border:1px solid var(--sx-line-strong);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-2);display:flex;flex-direction:column}
html.sx-on .au-exp-m .btn{justify-content:flex-start;width:100%;min-height:36px;border:0;background:transparent;border-radius:var(--sx-radius-sm);font-weight:500}
html.sx-on .au-exp-m .btn:hover{background:var(--sx-surface-2)}
html.sx-on .au-exp-m .btn:focus-visible{outline:2px solid var(--sx-focus);outline-offset:-2px}
.au-exp-m .btn[href*="do=import"],.au-exp-m .btn[href*="action=import"],.au-exp-m .btn[href^="index.php?page=dataio&ent="]{border-top:1px solid var(--sx-line)!important;border-radius:0 0 var(--sx-radius-sm) var(--sx-radius-sm)}
.au-fold.is-one{display:inline-flex}
.au-fold [hidden]{display:none!important}
/* calm motion: cards appear in 150ms, the save flash slides in once — nothing loops */
@media (prefers-reduced-motion:no-preference){
  html.sx-on .content>:is(.panel,.kpi-grid,.au-today,.au-pneed,.form-card){animation:au-in .15s var(--sx-ease) both}
  html.sx-on .flash{animation:au-flash .24s var(--sx-ease) both}
}
@keyframes au-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes au-flash{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media print{ .au-today,.au-exp,.au-fold{display:none!important} }