/* ========================================================================================== dm-sx-bridge.css — Docmano v3.8 (+3.8.1) · Docmano on the shared Sysenta shell (layout «ل») Loaded AFTER sx-tokens.css → sx-shell.css → app.css, only on sx pages (html.sx-on; guest pages add .dmx-guest). It maps Docmano's variables and classes onto the sx tokens in ONE layer, so every screen takes the new look without per-page edits. app.css keeps the classic look for ?ui=classic. 1 token bridge (Docmano names → sx tokens · light F1 / dark D1 · 8px · no glow, no gradients) 2 base: IBM Plex Sans Arabic, page, visible scrollbars, focus 3 shell slots: top-bar buttons, banners, content frame, rail logo 4 components: buttons, fields, cards, tabs, badges, flashes, modals — calm, flat, one accent 5 neutral icon tiles (KPI + file types): the accent stays on the active item and the primary button 6 TABLES: every table with a header → sx table (grid + zebra, sticky head, numbers, frozen actions, phone cards) 7 G2 audit P1s: file-card actions, number pairs, 404, codes on one line 8 guest pages: sign-in, register, reset, 2FA, shared links 9 the Sysenta support connector (launcher hidden; the account menu opens it) 10 the dashboard section strip (launcher option 2) 11 print 12 3.8.1: date fields · filters folded on desktop · plans grid · empty states · calm entrance · «copied» · admin money row Product colour = the in-app logo mark #F26B1D (catalogue «line-docmano»), dark #15171A on it (5.9:1). The orange is never text on a light surface (3.05:1): text uses --sx-accent-ink #A8430A (6.05:1 on white). Rail = #F26B1D mixed 38% with #08080C = #612E12 (white 11.0:1). ========================================================================================== */ /* ---------- 1) token bridge ---------- */ :root.sx-on{ --bg:var(--sx-bg); --surface:var(--sx-surface); --surface-2:var(--sx-surface-2); --surface-3:var(--sx-surface-3); --ink:var(--sx-text); --ink-soft:var(--sx-text-2); --ink-faint:var(--sx-muted); --border:var(--sx-line); --border-strong:var(--sx-line-strong); --accent:var(--sx-accent); --accent-hover:var(--sx-accent-hover); --on-accent:var(--sx-on-accent); --accent-deep:var(--sx-accent-ink); --accent-text:var(--sx-accent-ink); --accent-soft:var(--sx-accent-soft); --accent-glow:transparent; --accent-glow-soft:transparent; --teal:var(--sx-ok); --teal-ink:var(--sx-ok); --teal-soft:var(--sx-ok-soft); --danger:var(--sx-bad); --danger-ink:var(--sx-bad); --danger-soft:var(--sx-bad-soft); --warn:var(--sx-warn); --sky:var(--sx-info); --sky-soft:var(--sx-info-soft); --violet:var(--sx-text-2); --violet-soft:var(--sx-surface-2); --shadow:var(--sx-shadow-1); --shadow-lg:var(--sx-shadow-3); --radius:var(--sx-radius); --radius-sm:var(--sx-radius-sm); --font-d:var(--sx-font); --font-b:var(--sx-font); --font-m:var(--sx-font); } /* light: the primary hover keeps dark text readable (the shared 86%-black mix gives 4.47:1 under #15171A) */ :root.sx-on:not([data-theme="dark"]){--sx-accent-hover:#E0601A} /* ---------- 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 :is(h1,h2,h3,h4){font-family:var(--sx-font);letter-spacing:0} html.sx-on .mono{font-family:var(--sx-font);font-variant-numeric:tabular-nums} html.sx-on .code{font-family:var(--sx-font-mono);border-radius:var(--sx-radius)} html.sx-on ::selection{background:var(--sx-selection)} /* scrollbars — visible in both themes (restated after app.css, which carried a faint 1.43:1 thumb) */ 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);background-clip:border-box;border-radius:8px;border:3px solid var(--sx-sb-track)} html.sx-on ::-webkit-scrollbar-thumb:hover{background:var(--sx-accent-ink)} 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} /* ---------- 3) shell slots ---------- */ html.sx-on .content.dmx-content{padding:0;max-width:none;width:auto;margin:0} .dmx-top-end{display:flex;align-items:center;gap:2px} .dmx-top-end .sx-btn{height:36px;color:var(--sx-text-2)} .dmx-top-end .dmx-tb-lang{min-width:36px;padding:0 8px;font-weight:700;font-size:13px} .dmx-tb-bell{position:relative} .dmx-nb{position:absolute;top:1px;inset-inline-end:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--sx-bad);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums} html.sx-on[data-theme=dark] .dmx-nb{color:#141414} .sx-main>.sx-page>.dmx-top-end{justify-content:flex-end;margin:8px 0} /* before the shell moves it (no JS) */ .dmx-banners>*{margin-bottom:12px} .dmx-noscript{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;background:var(--sx-surface);border-bottom:1px solid var(--sx-line)} .dmx-noscript form{display:inline} .sx-rail-logo.dmx-logo{background:transparent;box-shadow:none;overflow:hidden} .sx-rail-logo.dmx-logo img{width:100%;height:100%;object-fit:contain;border-radius:var(--sx-radius)} /* ---------- 4) components: calm, flat, 8px ---------- */ html.sx-on :is(.card,.tile,.tbl-wrap,.flash,.btn,.icon-btn,.search,.field input,.field select,.input,.tabs,.modal,.gw,.api-row,.code,.plan-pill,.toast,.demo-note,.role-switch){border-radius:var(--sx-radius)} html.sx-on :is(.tab,.btn-sm,.role-switch button,.mini-ico,.s-ico,.gw-ico,.tile-ico,.ph-tag,.api-m){border-radius:var(--sx-radius-sm)} html.sx-on .card{background:var(--sx-surface);border-color:var(--sx-line);box-shadow:var(--sx-shadow-1)} html.sx-on .page-head{margin-bottom:var(--sx-sp-6);align-items:flex-end} html.sx-on .page-head h1{font-size:var(--sx-fs-22);font-weight:var(--sx-fw-bold);gap:10px} html.sx-on .page-head .sub{color:var(--sx-muted)} html.sx-on .section-title h3{font-size:var(--sx-fs-16);font-weight:var(--sx-fw-bold)} html.sx-on .section-title a{color:var(--sx-accent-ink)} html.sx-on .grid{gap:var(--sx-sp-4)} /* buttons: one filled accent (primary), everything else neutral — no glow, no lift */ html.sx-on .btn{font-weight:600;transition:background-color var(--sx-dur) var(--sx-ease),border-color var(--sx-dur) var(--sx-ease);justify-content:center} html.sx-on .btn-primary{background:var(--sx-accent);border-color:var(--sx-accent);color:var(--sx-on-accent);box-shadow:none} html.sx-on .btn-primary:hover{background:var(--sx-accent-hover);border-color:var(--sx-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)} html.sx-on .btn-danger{background:var(--sx-bad-soft);border-color:color-mix(in srgb,var(--sx-bad) 30%,transparent);color:var(--sx-bad)} html.sx-on .btn-danger:hover{background:color-mix(in srgb,var(--sx-bad) 14%,var(--sx-surface))} html.sx-on .icon-btn{background:var(--sx-surface);border-color:var(--sx-line-strong);color:var(--sx-text-2)} html.sx-on .icon-btn:hover{background:var(--sx-surface-2);color:var(--sx-text)} html.sx-on .row-act button{background:var(--sx-surface-2);color:var(--sx-text-2)} /* fields: 3:1 boundary, accent focus ring */ html.sx-on :is(.field input,.field select,.field textarea,input.input,select.input,textarea.input){border:1px solid var(--sx-field-line);background-color:var(--sx-field);color:var(--sx-text)} html.sx-on :is(.field input,.field select,.field textarea,input.input,select.input,textarea.input):focus{border-color:var(--sx-accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-accent-ink) 22%,transparent)} html.sx-on .field label,html.sx-on label.lbl{color:var(--sx-text-2)} html.sx-on select{background-color:var(--sx-field);color:var(--sx-text)} html.sx-on ::placeholder{color:var(--sx-placeholder)} html.sx-on input[type=checkbox],html.sx-on input[type=radio]{accent-color:var(--sx-accent)} /* tabs, toggles, pickers */ html.sx-on .tabs{background:var(--sx-surface-2);border-color:var(--sx-line)} html.sx-on .tab{color:var(--sx-text-2)} html.sx-on .tab.on{background:var(--sx-surface);color:var(--sx-text);box-shadow:var(--sx-shadow-1)} html.sx-on .toggle.on{background:var(--sx-accent)} html.sx-on .gw.sel{border-color:var(--sx-accent-ink);background:var(--sx-accent-soft)} html.sx-on .gw.sel .chk{border-color:var(--sx-accent);background:var(--sx-accent)} html.sx-on .role-switch button.on{background:var(--sx-accent);color:var(--sx-on-accent)} /* badges and flashes — status colours, never the accent */ html.sx-on .badge{border-radius:999px;font-weight:600} html.sx-on :is(.b-active,.b-paid){background:var(--sx-ok-soft);color:var(--sx-ok)} html.sx-on :is(.b-susp,.b-unpaid){background:var(--sx-bad-soft);color:var(--sx-bad)} html.sx-on :is(.b-trial,.b-pending){background:var(--sx-warn-soft);color:var(--sx-warn)} html.sx-on .b-ink{background:var(--sx-surface-2);color:var(--sx-text-2)} html.sx-on .flash{font-weight:500;border:1px solid transparent;box-shadow:none} html.sx-on .flash-success{background:var(--sx-ok-soft);color:var(--sx-ok);border-color:color-mix(in srgb,var(--sx-ok) 30%,transparent)} html.sx-on .flash-error{background:var(--sx-bad-soft);color:var(--sx-bad);border-color:color-mix(in srgb,var(--sx-bad) 30%,transparent)} html.sx-on .flash-warn{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 30%,transparent)} html.sx-on .demo-note{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 35%,transparent)} /* modals and toasts */ html.sx-on .modal-scrim{background:var(--sx-scrim)} html.sx-on .modal{background:var(--sx-surface);border-color:var(--sx-line);box-shadow:var(--sx-shadow-3);animation:none} html.sx-on .toast{background:var(--sx-surface);border-color:var(--sx-line);border-inline-start-color:var(--sx-ok);box-shadow:var(--sx-shadow-3)} html.sx-on .toast.err{border-inline-start-color:var(--sx-bad)} /* plans (subscription): the recommended plan is marked by a word, not a glow */ html.sx-on .plan-card.feat{border-color:var(--sx-accent-ink);box-shadow:var(--sx-shadow-1)} html.sx-on .plan-tag{background:var(--sx-surface);color:var(--sx-accent-ink);border:1px solid var(--sx-accent-ink);border-radius:999px} html.sx-on .plan-feats svg{color:var(--sx-ok)} html.sx-on .plan-price .amt{font-weight:700} /* no gradients anywhere (owner rule) */ html.sx-on .brand-mark{background:var(--sx-brand);box-shadow:none;border-radius:var(--sx-radius)} html.sx-on .brand-mark svg{color:var(--sx-on-brand)} html.sx-on .pp-bar{background:var(--sx-surface-3)!important} html.sx-on .pp-bar i{background:var(--sx-accent)} html.sx-on .bar{background:var(--sx-accent);border-radius:4px 4px 0 0} html.sx-on .avatar{background:var(--sx-surface-2);color:var(--sx-text);border:1px solid var(--sx-line)} html.sx-on .crumb b{color:var(--sx-text)} html.sx-on .crumb a:hover{color:var(--sx-accent-ink)} /* KPI cards: quieter numbers */ html.sx-on .s-val{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums} html.sx-on .s-lbl{color:var(--sx-muted)} html.sx-on .ring-mid .big{font-weight:700} html.sx-on .leg-v{font-family:var(--sx-font);font-variant-numeric:tabular-nums} /* ---------- 5) neutral icon tiles — the accent stays on the active item and the primary button ---------- */ html.sx-on :is(.i-amber,.i-teal,.i-sky,.i-ink,.i-violet,.i-danger){background:var(--sx-surface-2);color:var(--sx-text-2)} html.sx-on :is(.f-folder,.f-pdf,.f-doc,.f-xls,.f-img,.f-zip,.f-file){background:var(--sx-surface-2);color:var(--sx-text-2)} html.sx-on .f-pdf{color:var(--sx-bad)} html.sx-on .f-doc{color:var(--sx-info)} html.sx-on .f-xls{color:var(--sx-ok)} html.sx-on .tile{background:var(--sx-surface);border-color:var(--sx-line);box-shadow:var(--sx-shadow-1)} html.sx-on .tile:hover{transform:none;border-color:var(--sx-line-strong);box-shadow:var(--sx-shadow-2)} html.sx-on .tile-meta{color:var(--sx-muted);font-variant-numeric:tabular-nums} html.sx-on .fm-grid{gap:var(--sx-sp-3)} /* ---------- 6) TABLES — every table with a header becomes an sx table (dm-sx.js adds the classes) ---------- light grid + zebra + comfortable · sticky header · numbers tabular & end-aligned · frozen actions column · 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 .card .tbl-wrap.sx-twrap[style*="border:none"]{box-shadow:none;border:1px solid var(--sx-line)!important} html.sx-on .sx-table{font-size:14px} html.sx-on .sx-table.sx-table--compact{font-size:13px} html.sx-on .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 .sx-table tbody td{padding:var(--sx-py) var(--sx-px);border-bottom:1px solid var(--sx-tbl-line);max-width:28rem} html.sx-on .sx-table tbody tr,html.sx-on .sx-table tbody tr:hover{background:transparent} html.sx-on .sx-table tbody tr:last-child td{border-bottom-color:transparent} html.sx-on .sx-table tbody tr:last-child td:not(:last-child){border-inline-end:1px solid var(--sx-tbl-grid)} html.sx-on .sx-table td .btn-sm{padding:5px 10px} html.sx-on .sx-table .mono{white-space:nowrap} /* DOC-000005 / BOX-… stay on one line (G2 P2) */ /* 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} html.sx-on[dir=ltr] .sx-table .n{text-align:right} html.sx-on .sx-table .n.n-ar{direction:inherit} html.sx-on .sx-table tfoot tr{background:transparent!important} /* the actions column stays in view while a wide table scrolls (desktop; phones get cards) */ @media (min-width:768px){ html.sx-on .sx-table.dmx-act :is(thead th,tbody td,tfoot td):last-child{position:sticky;inset-inline-end:0;z-index:1} html.sx-on .sx-table.dmx-act thead th:last-child{z-index:3} html.sx-on[dir=ltr] .sx-table.dmx-act :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.dmx-act :is(thead th,tbody td,tfoot td):last-child{box-shadow:inset -1px 0 0 var(--sx-line-strong)} } /* density toggle */ .dmx-dens-bar{display:flex;justify-content:flex-end;margin-bottom:8px} .dmx-dens button{height:30px;padding:0 10px} /* phones: labelled cards */ @media (max-width:767.98px){ html.sx-on .tbl-wrap.sx-twrap:has(> .sx-tscroll .sx-table--cards){border:0!important;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} html.sx-on .sx-table--cards td>div[style*="display:flex"]{flex-wrap:wrap;justify-content:flex-end} .dmx-dens-bar{display:none} } /* ---------- 7) G2 audit P1s ---------- */ /* file cards: 3 named icon buttons + «more actions»; 44px on touch (app.css v3.8 block carries the base) */ html.sx-on .dm-acts{gap:4px;margin-top:10px} html.sx-on .fm-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))} @media (min-width:768px) and (pointer:fine){html.sx-on .dm-ib{min-width:32px;padding:6px 7px}} html.sx-on .dm-ib{color:var(--sx-text-2)} html.sx-on .dm-ib:hover{color:var(--sx-text)} html.sx-on .dm-more-list{border-radius:var(--sx-radius);border-color:var(--sx-line);box-shadow:var(--sx-shadow-3)} html.sx-on .dm-mi{border-radius:var(--sx-radius-sm);color:var(--sx-text)} html.sx-on .dm-mi:hover,html.sx-on .dm-mi:focus-visible{background:var(--sx-surface-2)} html.sx-on .dm-mi svg{color:var(--sx-text-2)} html.sx-on .dm-mi.is-on svg{color:var(--sx-accent-ink)} html.sx-on .dm-mi--hold.is-on,html.sx-on .dm-mi--hold.is-on svg{color:var(--sx-bad)} /* the filter card and the select-all bar on phones: wrap, never overflow */ @media (max-width:767.98px){ html.sx-on .fm-bar{gap:8px} html.sx-on .fm-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sx-sp-2)} html.sx-on .tile{padding:12px} } /* 404 */ html.sx-on .dmx-nf{box-shadow:var(--sx-shadow-1)} html.sx-on .dmx-nf-code{color:var(--sx-accent-ink)!important;font-variant-numeric:tabular-nums} /* ---------- 8) guest pages ---------- */ html.sx-on.dmx-guest body{background:var(--sx-bg)} html.sx-on.dmx-guest body>.card{width:100%;border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-1)} html.sx-on.dmx-guest .btn{justify-content:center} html.sx-on.dmx-guest .btn-primary{min-height:44px} html.sx-on.dmx-guest .field input{min-height:44px} .dmx-guest-top{display:flex;gap:6px;z-index:5} html.sx-on .dmx-guest-top .icon-btn{width:40px;height:40px} html.sx-on .dmx-guest-top .lang-btn{width:auto} html.sx-on .dmx-g-theme .dmx-i-sun{display:none} html.sx-on[data-theme=dark] .dmx-g-theme .dmx-i-sun{display:inline-flex} html.sx-on[data-theme=dark] .dmx-g-theme .dmx-i-moon{display:none} .dmx-g-theme span{display:inline-flex} .dmx-g-theme svg.sx-i{width:19px;height:19px} @media (max-width:767.98px){ html.sx-on.dmx-guest body{padding:72px 16px 24px!important;place-items:start center!important} } /* ---------- 9) the Sysenta support connector (public/support/boot.php — not edited) ---------- Its own floating «الدعم» button / menu item is hidden; the account menu and Ctrl+K click it (dm-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; 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 .dmx-pal-sup svg.sx-i,.sx-pal .dmx-pal-all svg.sx-i{color:var(--sx-accent-ink)} .sx-pal .dmx-pal-all b{font-weight:var(--sx-fw-medium)} .sx-pal-list:has(.dmx-pal-sup) .sx-pal-empty{display:none} /* ---------- 10) the dashboard section strip (launcher option 2; tiles = sx-shell [data-sec] buttons) ---------- */ .dmx-strip{margin:0 0 16px} .dmx-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} .dmx-strip-l>li{flex:1 0 140px;scroll-snap-align:start;min-width:0;display:flex} .dmx-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)} .dmx-st:hover{border-color:var(--sx-line-strong);background:var(--sx-zebra)} .dmx-st[aria-expanded=true]{border-color:var(--sx-accent-ink);background:var(--sx-accent-soft)} .dmx-st:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px} .dmx-st-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--sx-radius-sm);background:var(--sx-surface-2);color:var(--sx-text-2)} .dmx-st[aria-expanded=true] .dmx-st-ic{background:var(--sx-surface);color:var(--sx-accent-ink)} .dmx-st-ic svg.sx-i{width:18px;height:18px} .dmx-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} .dmx-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} .dmx-st-b.is-warn{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 45%,transparent)} @media (max-width:767.98px){ .dmx-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)} .dmx-strip-l>li{flex:0 0 auto} .dmx-st{min-height:44px;width:auto;max-width:220px} } /* phones: KPI cards two by two (G2 P2 13) */ @media (max-width:560px){ html.sx-on .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} html.sx-on .grid.cols-4 .card-pad{padding:14px} html.sx-on .grid.cols-4 .s-val{font-size:21px} } /* ---------- 11) print ---------- */ @media print{ html.sx-on body{background:#fff;color:#000} .dmx-top-end,.dmx-dens-bar,.dmx-strip,.dmx-banners,.dmx-guest-top{display:none!important} html.sx-on .tbl-wrap.sx-twrap{overflow:visible;border:0;box-shadow:none} html.sx-on #ssw{display:none!important} } /* a full-width row («no rows yet») on a phone card: no column label, centred text */ @media (max-width:767.98px){ html.sx-on .sx-table--cards td.dmx-span{display:block;text-align:center} html.sx-on .sx-table--cards td.dmx-span::before{display:none} } /* ---------- 12) 3.8.1 ---------- */ /* 12a date fields (dm-sx.js §8): a text twin that reads dd/mm/yyyy · the native input under the calendar button submits the ISO value */ html.sx-on .dmx-date{position:relative;display:block;min-width:0;width:100%} html.sx-on .dmx-date .dmx-date-txt{width:100%;padding-inline-end:42px;font-variant-numeric:tabular-nums;letter-spacing:.02em} html.sx-on[dir=rtl] .dmx-date .dmx-date-txt,html.sx-on[dir=rtl] .dmx-date .dmx-date-txt::placeholder{text-align:right} html.sx-on .dmx-date-btn{position:absolute;inset-block:0;inset-inline-end:0;width:40px;display:grid;place-items:center;color:var(--sx-text-2);pointer-events:none; border-inline-start:1px solid var(--sx-line);margin-block:8px} html.sx-on .dmx-date-btn svg.sx-i{width:18px;height:18px} html.sx-on .dmx-date:hover .dmx-date-btn{color:var(--sx-accent-ink)} html.sx-on .dmx-date .dmx-date-nat{position:absolute;inset-block:0;inset-inline-end:0;width:40px;height:100%;min-height:0;padding:0;margin:0;border:0;box-shadow:none;opacity:0;cursor:pointer;font-size:16px} html.sx-on .dmx-date .dmx-date-nat::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;cursor:pointer;opacity:0} html.sx-on[data-theme=dark] .dmx-date .dmx-date-nat{color-scheme:dark} html.sx-on .dmx-date .dmx-date-txt:is(:disabled,:read-only)~.dmx-date-nat{pointer-events:none} html.sx-on .dmx-date .dmx-date-txt:user-invalid{border-color:var(--sx-bad)} html.sx-on .dmx-date-fmt{margin-inline-start:6px;font-size:12px;font-weight:500;color:var(--sx-muted);white-space:nowrap} /* 12b files: the filters stay folded behind «تصفية» on every screen (open when a filter is active — the checkbox is checked) */ html.sx-on .fbar-open{display:inline-flex} html.sx-on .fbar-t:not(:checked)~.fbar-body{display:none!important} html.sx-on .fbar-t:checked~.fbar-open{margin-bottom:14px} html.sx-on .fbar-t:focus-visible~.fbar-open{outline:2px solid var(--sx-focus);outline-offset:2px} html.sx-on form.card:has(> .fbar-t:not(:checked)){background:transparent;border-color:transparent;box-shadow:none;padding:0;margin-bottom:12px!important} /* folded: just the button, no empty card */ /* 12c subscription: as many columns as plans (3 plans → 3 equal columns) */ html.sx-on .grid.dmx-plans{grid-template-columns:repeat(var(--dmx-plans,3),minmax(0,1fr))} @media (max-width:1080px){html.sx-on .grid.dmx-plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}} /* 12d empty states: the line, a short hint, one next step */ html.sx-on .empty .empty-t{font-weight:600;color:var(--sx-text);font-size:15px} html.sx-on .empty .empty-h{margin:6px auto 0;max-width:52ch;font-size:14px;color:var(--sx-muted);line-height:1.6} html.sx-on .empty-a{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px} html.sx-on .empty .empty-a svg{width:18px;height:18px;opacity:1;margin:0} html.sx-on td .empty-t{font-weight:600;color:var(--sx-text-2)} /* 12e admin dashboard: the money row links to its screens */ html.sx-on .dmx-adm-link{color:inherit;text-decoration:none;transition:border-color var(--sx-dur) var(--sx-ease)} html.sx-on .dmx-adm-link:hover{border-color:var(--sx-line-strong)} html.sx-on .dmx-adm-link .s-val small{font-size:13px;font-weight:600;color:var(--sx-muted)} html.sx-on .dmx-adm-link.is-due{border-color:color-mix(in srgb,var(--sx-warn) 45%,var(--sx-line))} @media (max-width:560px){html.sx-on .grid.dmx-adm-money{grid-template-columns:1fr}} /* 3.8.2 subscriptions ending in 14 days: calm list; the account name is the link; ≤3 days gets a quiet warn edge, never colour alone (the number is there) */ html.sx-on .dmx-adm-ending .section-title h3{display:flex;align-items:center;gap:8px} html.sx-on .dmx-adm-acct{color:var(--sx-accent-ink);text-decoration:none} html.sx-on .dmx-adm-acct:hover{text-decoration:underline} html.sx-on .dmx-adm-ending tr.is-soon td:first-child{box-shadow:inset -3px 0 0 color-mix(in srgb,var(--sx-warn) 70%,transparent)} html.sx-on[dir=ltr] .dmx-adm-ending tr.is-soon td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sx-warn) 70%,transparent)} html.sx-on .dmx-adm-ending .empty{border:none;padding:18px 8px} html.sx-on tr[id^=u-]:target td{background:var(--sx-accent-soft)} /* 12f calm motion (150ms, once): cards appear · «copied» confirms — nothing moves for reduced-motion */ @media (prefers-reduced-motion:no-preference){ @keyframes dmx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} html.sx-on .dmx-content>:is(.card,.grid,.tbl-wrap,.empty,.fm-grid,.dmx-strip){animation:dmx-in 150ms var(--sx-ease) both} html.sx-on .dmx-content>:nth-child(3){animation-delay:30ms} html.sx-on .dmx-content>:nth-child(4){animation-delay:60ms} html.sx-on .dmx-content>:nth-child(n+5){animation-delay:90ms} @keyframes dmx-ok{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sx-ok) 40%,transparent)}100%{box-shadow:0 0 0 6px transparent}} html.sx-on .dmx-copied{animation:dmx-ok 600ms var(--sx-ease)} } html.sx-on .dmx-copied{color:var(--sx-ok)!important;border-color:color-mix(in srgb,var(--sx-ok) 45%,var(--sx-line))!important} html.sx-on .dmx-busy{position:relative;pointer-events:none;opacity:.85;overflow:hidden} html.sx-on .dmx-busy::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:currentColor;opacity:.55} @media (prefers-reduced-motion:no-preference){ @keyframes dmx-bar{from{transform:translateX(-100%)}to{transform:translateX(100%)}} html.sx-on .dmx-busy::after{animation:dmx-bar 900ms linear infinite} } @media print{ html.sx-on .dmx-date-btn,html.sx-on .dmx-date-fmt{display:none!important} html.sx-on .dmx-content>*{animation:none!important} }