/* ========================================================================================== hub-sx-bridge.css — Sysenta Support Hub 1.15.1 on the shared Sysenta shell (sx-shell) Loaded AFTER sx-tokens.css → sx-shell.css → app.css | accounts.css, only when the new shell is on (html.sx-on). It maps the Hub's own variables and classes onto the sx tokens in ONE layer, so every screen (34 admin pages, the licence console, the portal and accounts.sysenta.com) takes the new look without per-screen edits. 1 brand = the measured logo colour #15171A (rail used as is — luminance 0.007 < 0.08) · dark inks 2 token bridge: Hub app.css names → sx tokens (light F1 / dark D1, 8px, no gradients) 3 base: IBM Plex Sans Arabic, focus, the no-JS fallback header 4 admin shell slots: page head, top-bar tools, footer, rail edge 5 components: cards, KPIs (calm numbers, status as a dot), buttons, fields, tabs, pills, thread, pager 6 TABLES: Hub .tbl → sx table (grid + zebra, sticky head, numbers, frozen actions, phone cards) 7 dashboard section strip (launcher option 2) 8 staff sign-in page 9 customer portal (top bar) 10 accounts.sysenta.com (top bar · no gradients · product colour only on the product's own mark) 11 print ========================================================================================== */ /* ---------- 1) brand ---------- #15171A = 97% of the pixels of the Sysenta catalogue mark (and the Hub's in-app mark); luminance 0.0071. A colour that dark IS the rail (no 38% mix). light: ink/fill #15171A on white 17.9:1. dark: ink #E6E6E6 on #1C1C1C 13.6:1 / on #141414 14.9:1 · fill #E6E6E6 with #141414 text 14.9:1 (neutral, no blue — D1). */ :root.sx-on[data-product="hub"]{ --sx-brand:#15171A; --sx-on-brand:#FFFFFF; --sx-ink-l:#15171A; --sx-ink-d:#E6E6E6; --sx-fill-d:#E6E6E6; --sx-on-fill-d:#141414; --sx-rail-bg:#15171A; } /* the rail is as dark as the dark page — a hairline keeps its edge visible */ .sx-on .sx-rail{box-shadow:inset -1px 0 0 rgb(255 255 255 / .09)} [dir="rtl"].sx-on .sx-rail,[dir="rtl"] .sx-on .sx-rail{box-shadow:inset 1px 0 0 rgb(255 255 255 / .09)} .sx-on .sx-rail-logo img{width:24px;height:24px} /* ---------- 2) token bridge (Hub names → sx tokens; same names in light and dark) ---------- */ :root.sx-on.sx-on,:root.sx-on.sx-on[data-theme]{ --brand:var(--sx-accent); --on-brand:var(--sx-on-accent); --brand-deep:var(--sx-accent); --brand-soft:var(--sx-surface-2); --brand-line:var(--sx-line-strong); --ink:var(--sx-text); --ink-2:var(--sx-text-2); --muted:var(--sx-muted); --line:var(--sx-line); --line-2:var(--sx-line-strong); --bg:var(--sx-bg); --card:var(--sx-surface); --panel-2:var(--sx-surface-2); --panel:var(--sx-surface-2); --hi:var(--sx-surface); --ok:var(--sx-ok); --warn:var(--sx-warn); --bad:var(--sx-bad); --info:var(--sx-info); --ok-soft:var(--sx-ok-soft); --ok-line:color-mix(in srgb,var(--sx-ok) 35%,var(--sx-surface)); --ok-ink:var(--sx-ok); --bad-soft:var(--sx-bad-soft); --bad-line:color-mix(in srgb,var(--sx-bad) 35%,var(--sx-surface)); --bad-ink:var(--sx-bad); --warn-soft:var(--sx-warn-soft); --warn-line:color-mix(in srgb,var(--sx-warn) 35%,var(--sx-surface)); --warn-ink:var(--sx-warn); --top-bg:var(--sx-surface); --scrim:var(--sx-scrim); --ring:0 0 0 3px color-mix(in srgb,var(--sx-focus) 28%,transparent); --r-s:var(--sx-radius); --r-m:var(--sx-radius); --r-l:var(--sx-radius); --sh-1:var(--sx-shadow-1); --sh-2:var(--sx-shadow-2); --sh-3:var(--sx-shadow-3); --hello-glow:transparent; /* accounts.css names (accounts.sysenta.com): the Sysenta accent everywhere, never the product colour */ --p:var(--sx-accent); --p2:var(--sx-accent); --on:var(--sx-on-accent); --shade:#000; --p-ink:var(--sx-accent-ink); --p-btn:var(--sx-accent); --p-soft:var(--sx-accent-soft); --p-line:var(--sx-line-strong); } /* ---------- 3) 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.hsx-portal body,html.sx-on.hsx-acc body{font-size:15px} html.sx-on :is(input,select,textarea,button){font-family:inherit} html.sx-on h1,html.sx-on h2,html.sx-on h3,html.sx-on h4{letter-spacing:0;color:var(--sx-text)} html.sx-on :focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px;box-shadow:none;border-radius:var(--sx-radius-sm)} html.sx-on .inp:focus-visible{outline:none} html.sx-on .num{font-variant-numeric:tabular-nums} html.sx-on a{color:inherit} html.sx-on .lnk{color:var(--sx-accent-ink);font-weight:600;text-decoration-color:var(--sx-line-strong)} html.sx-on .mut,html.sx-on .small.mut{color:var(--sx-muted)} html.sx-on ::placeholder{color:var(--sx-placeholder)} html.sx-on .rise{animation-duration:.24s} .hsx-skip:focus{position:fixed;inset-inline-start:12px;top:12px;width:auto;height:auto;clip-path:none;z-index:99;background:var(--sx-surface);color:var(--sx-text);padding:8px 12px;border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-2)} /* no-JS / blocked-JS fallback header — hidden once the shell is up (hub-sx-boot.js sets .hsx-js) */ .hsx-fb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px;background:var(--sx-surface);border-bottom:1px solid var(--sx-line);font-size:14px} .hsx-fb b{font-weight:700;margin-inline-end:8px} .hsx-fb a{color:var(--sx-text-2);text-decoration:none} .hsx-fb a:hover{color:var(--sx-text);text-decoration:underline} .hsx-fb form{display:inline-flex;margin:0} .hsx-fb button{font:inherit;background:none;border:0;color:var(--sx-text-2);cursor:pointer;padding:0} .hsx-js .hsx-fb{display:none} /* ---------- 4) admin shell slots ---------- */ html.sx-on .sx-page{max-width:1320px} .hsx-top-end{display:flex;align-items:center;gap:4px;min-width:0} .sx-main>.sx-page>.hsx-top-end{justify-content:flex-end;margin:8px 0} /* before the shell moves it */ .hsx-top-end .hsx-tb{display:inline-flex;align-items:center;gap:6px;min-height:36px;height:36px;padding:0 10px;border-radius:var(--sx-radius);color:var(--sx-text-2);text-decoration:none;font-size:13px;font-weight:700} .hsx-top-end .hsx-tb:hover{background:var(--sx-surface-2);color:var(--sx-text)} .hsx-top-end .hsx-tb svg.sx-i{width:18px;height:18px} html.sx-on .page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 20px} html.sx-on .page-title{font-size:var(--sx-fs-22);font-weight:700;line-height:1.3;margin:0} html.sx-on .page-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center} html.sx-on .page-actions:empty{display:none} .hsx-foot{margin-top:32px;padding-top:16px;border-top:1px solid var(--sx-line);color:var(--sx-muted);font-size:12px;text-align:center} .hsx-foot a{color:var(--sx-muted)} .hsx-noscript{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;background:var(--sx-surface);border-top:1px solid var(--sx-line)} @media (max-width:767.98px){ .hsx-top-end .hsx-tb span{display:none} .sx-crumb li:not(:last-child){display:none} .sx-crumb li:last-child::before{display:none} html.sx-on .page-title{font-size:var(--sx-fs-18)} html.sx-on .page-head{margin-bottom:14px} } /* ---------- 5) components: calm, flat, 8px ---------- */ html.sx-on .card{border-color:var(--sx-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-1)} html.sx-on .card > .hd{padding:14px 18px;border-bottom-color:var(--sx-line)} html.sx-on .card > .hd h2{font-size:var(--sx-fs-16)} html.sx-on .card.note{background:var(--sx-surface);border-color:var(--sx-line-strong)} html.sx-on .card.danger-zone{border-color:color-mix(in srgb,var(--sx-bad) 40%,var(--sx-line))} html.sx-on .grid{gap:14px} /* KPIs: no lift, numbers in ink; a status shows as a small dot + tinted edge (G4 H-P2-4) */ html.sx-on .kpi{border-radius:var(--sx-radius);border-color:var(--sx-line);box-shadow:var(--sx-shadow-1);padding:14px 16px;transition:border-color var(--sx-dur) var(--sx-ease)} html.sx-on .kpi:hover{transform:none;box-shadow:var(--sx-shadow-1)} html.sx-on a.kpi:hover{border-color:var(--sx-field-line)} html.sx-on .kpi .lb{color:var(--sx-muted);font-size:13px} html.sx-on .kpi .vl{color:var(--sx-text)!important;font-size:var(--sx-fs-28);letter-spacing:0} html.sx-on .kpi:is(.acc-bad,.acc-warn,.acc-ok) .lb::after{content:"";width:8px;height:8px;border-radius:50%;margin-inline-start:auto;flex:none} html.sx-on .kpi.acc-bad{border-color:color-mix(in srgb,var(--sx-bad) 40%,var(--sx-line))} html.sx-on .kpi.acc-bad .lb::after{background:var(--sx-bad)} html.sx-on .kpi.acc-warn{border-color:color-mix(in srgb,var(--sx-warn) 40%,var(--sx-line))} html.sx-on .kpi.acc-warn .lb::after{background:var(--sx-warn)} html.sx-on .kpi.acc-ok .lb::after{background:var(--sx-ok)} html.sx-on .kpi .sub{color:var(--sx-muted)} /* buttons: .btn = the one filled accent; .ghost neutral; .danger tinted */ html.sx-on .btn{min-height:var(--sx-ctl-h);padding:6px 14px;border-radius:var(--sx-radius);border:1px solid var(--sx-accent);background:var(--sx-accent);color:var(--sx-on-accent); font-weight:600;font-size:14px;box-shadow:none;transition:background-color var(--sx-dur) var(--sx-ease),border-color var(--sx-dur) var(--sx-ease)} html.sx-on .btn:hover{transform:none;box-shadow:none;background:var(--sx-accent-hover);border-color:var(--sx-accent-hover)} html.sx-on .btn:active{transform:translateY(1px)} 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 .btn.danger{background:var(--sx-surface);border-color:color-mix(in srgb,var(--sx-bad) 45%,var(--sx-line));color:var(--sx-bad)} html.sx-on .btn.danger:hover{background:var(--sx-bad-soft)} html.sx-on .btn.sm{min-height:32px;padding:4px 10px;font-size:13px;border-radius:var(--sx-radius)} html.sx-on .btn[disabled]{opacity:.5} /* fields: 3:1 boundary, accent focus */ html.sx-on .inp,html.sx-on select.inp,html.sx-on textarea.inp{min-height:var(--sx-ctl-h);padding:6px 12px;border:1px solid var(--sx-field-line);border-radius:var(--sx-radius);background-color:var(--sx-field);color:var(--sx-text);font-size:14px} html.sx-on select.inp{padding-inline-start:34px} [dir="ltr"].sx-on select.inp{padding-inline-start:12px;padding-inline-end:34px} html.sx-on textarea.inp{min-height:110px} html.sx-on .inp:hover{border-color:var(--sx-text-2)} html.sx-on .inp:focus{border-color:var(--sx-accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-accent-ink) 20%,transparent)} html.sx-on .inp[readonly]{background:var(--sx-surface-2)} html.sx-on .fld > label{font-size:13px;font-weight:600;color:var(--sx-text-2)} html.sx-on .chk input{accent-color:var(--sx-accent)} html.sx-on .toolbar{gap:8px;margin-bottom:12px;align-items:flex-end} html.sx-on .toolbar .inp{min-height:34px;padding-block:4px;font-size:13px} html.sx-on .toolbar .btn{min-height:34px} /* pills (status/priority colours come from the DB and are AA-tuned by app.css) */ html.sx-on .pill{font-weight:600;font-size:12px} html.sx-on .tag{border-radius:var(--sx-radius-sm);background:var(--sx-surface-2);border-color:var(--sx-line)} /* alerts */ html.sx-on .flash{border-radius:var(--sx-radius);font-size:14px;padding:10px 14px;align-items:center} html.sx-on .flash.info{background:var(--sx-surface);border-color:var(--sx-line-strong);color:var(--sx-text)} /* tabs, pager */ html.sx-on .tabs{border-bottom-color:var(--sx-line)} html.sx-on .tabs a{color:var(--sx-muted);font-size:14px;min-height:40px} html.sx-on .tabs a:hover{color:var(--sx-text)} html.sx-on .tabs a.on{color:var(--sx-accent-ink);border-bottom-color:var(--sx-accent-ink)} html.sx-on .pager a{border-radius:var(--sx-radius);min-width:36px;min-height:36px;border-color:var(--sx-line)} html.sx-on .pager a:hover{background:var(--sx-surface-2)} html.sx-on .pager a.on{background:var(--sx-accent);color:var(--sx-on-accent)} /* ticket thread + timeline + definition lists + code */ html.sx-on .msg{border-radius:var(--sx-radius);border-color:var(--sx-line)} html.sx-on .msg > .mh{background:var(--sx-surface-2);border-bottom-color:var(--sx-line)} html.sx-on .msg.staff{border-inline-start:3px solid var(--sx-accent-ink)} html.sx-on .msg.staff > .mh{background:var(--sx-surface-2)} html.sx-on .msg.customer{border-inline-start:3px solid var(--sx-line-strong)} html.sx-on .msg.internal{border-inline-start:3px solid var(--sx-warn);background:var(--sx-warn-soft)} html.sx-on .msg.internal > .mh{background:transparent;color:var(--sx-warn);border-bottom-color:color-mix(in srgb,var(--sx-warn) 30%,var(--sx-line))} html.sx-on .msg.system{border-inline-start:3px solid var(--sx-muted)} html.sx-on .msg .files a{border-radius:var(--sx-radius-sm)} html.sx-on .tl::before{background:var(--sx-line)} html.sx-on .tl li .dot{border-color:var(--sx-line-strong)} html.sx-on .tl li .dot.on{background:var(--sx-accent);border-color:var(--sx-accent);color:var(--sx-on-accent)} html.sx-on .dl dt{color:var(--sx-muted)} html.sx-on .code{border-radius:var(--sx-radius);font-family:var(--sx-font-mono)} html.sx-on .empty .ic{color:var(--sx-line-strong)} html.sx-on .ok-badge{border-radius:var(--sx-radius)} html.sx-on .eyebrow{color:var(--sx-muted)} /* G4 H-P3-2: the 3-step «vault closed» card is not stranded at half width */ html.sx-on .lic-empty{max-width:none} /* mobile dashboard (G4 H-P1-4): KPI cards two per row, compact — the tickets show on the first screen */ @media (max-width:760px){ html.sx-on .grid:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px!important} html.sx-on .kpi{padding:10px 12px} html.sx-on .kpi .lb{font-size:12px;gap:6px;line-height:1.35} html.sx-on .kpi .lb .ic{width:15px;height:15px} html.sx-on .kpi .vl{font-size:var(--sx-fs-22);margin-top:2px} html.sx-on .btn{min-height:44px} html.sx-on .btn.sm{min-height:40px} } /* ---------- 6) TABLES — every Hub list (.tbl) becomes an sx table (hub-sx.js swaps the class) ---------- light grid + zebra + comfortable · sticky header · numbers tabular & end-aligned · frozen actions column · horizontal scroll with edge shadows · density toggle · phone cards with the column names */ html.sx-on .tbl-wrap:has(> .sx-tscroll){overflow:visible;border-radius:0} html.sx-on .card > .tbl-wrap .sx-tscroll-in{border-radius:0 0 var(--sx-radius) var(--sx-radius)} html.sx-on .card > .tbl-wrap:first-child .sx-tscroll-in{border-radius:var(--sx-radius)} html.sx-on .sx-table td.atom{white-space:nowrap} html.sx-on .sx-table td.txt{min-width:220px;max-width:360px;color:var(--sx-text-2)} /* G4 H-P2-6: the subject is not squeezed */ html.sx-on .sx-table td.act{white-space:nowrap;text-align:end} html.sx-on .sx-table td .lnk{text-decoration:none;font-weight:600} html.sx-on .sx-table td .lnk:hover{text-decoration:underline} html.sx-on .sx-table .btn.sm{min-height:30px;padding:2px 10px;font-size:13px} html.sx-on .sx-table .btn-row{flex-wrap:nowrap;gap:6px} html.sx-on .sx-table td.act .btn-row{justify-content:flex-end} html.sx-on .sx-table td.n,html.sx-on .sx-table th.n{font-variant-numeric:tabular-nums;white-space:nowrap} html.sx-on[dir=rtl] .sx-table :is(td,th).n{text-align:left} html.sx-on[dir=ltr] .sx-table :is(td,th).n{text-align:right} /* the actions column stays in view while a wide list scrolls */ html.sx-on .sx-table.hsx-stick-end tbody td:last-child,html.sx-on .sx-table.hsx-stick-end thead th:last-child{position:sticky;inset-inline-end:0;z-index:1} html.sx-on .sx-table.hsx-stick-end thead th:last-child{z-index:3} html.sx-on[dir=ltr] .sx-table.hsx-stick-end :is(thead th,tbody td):last-child{box-shadow:inset 1px 0 0 var(--sx-line-strong)} html.sx-on[dir=rtl] .sx-table.hsx-stick-end :is(thead th,tbody td):last-child{box-shadow:inset -1px 0 0 var(--sx-line-strong)} .hsx-dens button{height:30px;padding:0 10px} .hsx-dens-bar{display:flex;justify-content:flex-end;margin-bottom:8px} /* phones (<768px): labelled cards — label at the start, value at the end */ @media (max-width:767.98px){ html.sx-on .sx-table--cards td{align-items:center;flex-wrap:wrap} html.sx-on .sx-table--cards td.txt{max-width:none;min-width:0} html.sx-on .sx-table--cards td.act{justify-content:flex-end;border-top:1px solid var(--sx-line);margin-top:4px;padding-top:8px} html.sx-on .sx-table--cards td.act::before,html.sx-on .sx-table--cards td:has(> .btn-row)::before{content:none} html.sx-on .sx-table--cards td .btn-row{flex-wrap:wrap;justify-content:flex-end} html.sx-on .sx-table--cards .btn.sm{min-height:40px} .hsx-dens,.hsx-dens-bar{display:none} /* ticket lists (G4 H-P2-1): reference + status on the first line, the subject under them, then two short lines */ html.sx-on .hsx-tk.sx-table--cards tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px;padding:8px 0} html.sx-on .hsx-tk.sx-table--cards td{display:block;padding:1px 12px;text-align:start;min-width:0;order:4} html.sx-on .hsx-tk.sx-table--cards td::before{content:none} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-ref{order:1;flex:1 1 0;font-weight:700} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-st{order:2;flex:0 0 auto} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-sub{order:3;flex:1 1 100%;color:var(--sx-text);font-size:14px;font-weight:500} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-sub .small{display:none} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-a{flex:1 1 52%;font-size:13px} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-b{flex:0 1 auto;max-width:46%;font-size:13px;color:var(--sx-muted);text-align:end} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-l{flex:1 1 100%;color:var(--sx-muted);font-size:12px} html.sx-on .hsx-tk.sx-table--cards td:is(.hsx-c-l,.hsx-lbl)::before{content:attr(data-label) " · ";display:inline;float:none;max-width:none;color:var(--sx-muted);font-size:12px;font-weight:500} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-ref br{display:none} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-ref .pill{margin-inline-start:6px} } /* ---------- 7) the dashboard section strip (tiles = sx-shell [data-sec] buttons) ---------- */ .hsx-strip{margin:0 0 16px} .hsx-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} .hsx-strip-l>li{flex:1 0 128px;scroll-snap-align:start;min-width:0;display:flex} .hsx-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)} .hsx-st:hover{border-color:var(--sx-line-strong);background:var(--sx-zebra)} .hsx-st[aria-expanded=true]{border-color:var(--sx-accent-ink);background:var(--sx-accent-soft)} .hsx-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)} .hsx-st-ic svg.sx-i{width:18px;height:18px} .hsx-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} .hsx-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} .hsx-st-b.is-warn{background:var(--sx-warn-soft);color:var(--sx-warn);border-color:color-mix(in srgb,var(--sx-warn) 45%,transparent)} .hsx-st-b.is-bad{background:var(--sx-bad-soft);color:var(--sx-bad);border-color:color-mix(in srgb,var(--sx-bad) 45%,transparent)} .hsx-st-b.is-info{background:var(--sx-info-soft);color:var(--sx-info);border-color:color-mix(in srgb,var(--sx-info) 40%,transparent)} @media (max-width:767.98px){ .hsx-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)} .hsx-strip-l>li{flex:0 0 auto} .hsx-st{min-height:44px;width:auto;max-width:200px} } /* ---------- 8) staff sign-in (views/login.php) ---------- */ html.sx-on .auth{background:var(--sx-bg)} html.sx-on .auth .box{border-radius:var(--sx-radius);border-color:var(--sx-line);box-shadow:var(--sx-shadow-2);padding:28px 24px} html.sx-on .auth .logo{border-radius:var(--sx-radius);background:var(--sx-brand);color:#FFFFFF;width:44px;height:44px} html.sx-on .auth h1{font-size:var(--sx-fs-22)} html.sx-on .auth .btn{width:100%;min-height:44px} html.sx-on .auth .alt{border-top-color:var(--sx-line)} html.sx-on .auth .theme-tg{width:auto;min-height:32px} /* ---------- 9) customer portal (top bar) ---------- */ html.sx-on.hsx-portal .sx-page{max-width:1040px} html.sx-on .phero{padding:8px 0 4px;text-align:start} html.sx-on .phero h1{font-size:var(--sx-fs-28);margin-bottom:6px} html.sx-on .phero p{margin-inline:0;max-width:640px;color:var(--sx-muted)} html.sx-on.hsx-portal .card.pad{padding:18px} .hsx-guest .sx-tbar [data-sx="user"]{display:none} .sx-tbar .hsx-top-end{margin-inline-end:4px} .sx-app > .hsx-top-end{display:none} /* top bar pages: shown once moved into the bar (the no-JS header has its own link) */ @media (max-width:700px){html.sx-on .phero h1{font-size:var(--sx-fs-22)}} /* ---------- 10) accounts.sysenta.com ---------- */ html.sx-on.hsx-acc .sx-page{max-width:1120px} .hsx-acc-split{max-width:480px;margin:clamp(4px,4vh,40px) auto 24px} .hsx-prod{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--sx-text-2);font-size:14px} .hsx-prod b{color:var(--sx-text);font-weight:700} .hsx-prod .mk{width:32px;height:32px;font-size:15px} .hsx-acc-split .acc-panel{max-width:none;margin:0;background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-1);padding:clamp(18px,4vw,28px)} html.sx-on .acc-foot{max-width:1120px;margin:0 auto;padding:16px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;color:var(--sx-muted);font-size:12.5px} html.sx-on .acc-foot a{color:var(--sx-muted)} /* the product's own mark keeps the product colour (it is its logo) — flat, no glow, 8px, AA for its initial */ html.sx-on .mk{border-radius:var(--sx-radius);background:var(--cb,var(--c,var(--sx-brand))); /* --cb = the AA-safe shade acc_brand() computes */ color:var(--on,#FFFFFF);box-shadow:none} html.sx-on img.mk{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--sx-line)} html.sx-on .acc-eyebrow{color:var(--sx-muted);letter-spacing:0} html.sx-on .acc-h{font-size:var(--sx-fs-22);letter-spacing:0} html.sx-on .acc-h2{font-size:var(--sx-fs-18);margin:26px 0 12px} html.sx-on .acc-sub{color:var(--sx-muted)} html.sx-on .acc-ico{border-radius:var(--sx-radius);background:var(--sx-surface-2);color:var(--sx-text);box-shadow:inset 0 0 0 1px var(--sx-line)} html.sx-on .acc-url{border-radius:var(--sx-radius);background:var(--sx-surface-2);border-color:var(--sx-line-strong)} html.sx-on .acc-slug,html.sx-on .acc-slug:focus-within{border:1px solid var(--sx-field-line);border-radius:var(--sx-radius)} html.sx-on .acc-slug:focus-within{border-color:var(--sx-accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sx-accent-ink) 20%,transparent)} html.sx-on .acc-slug .inp{border:0;box-shadow:none} html.sx-on .acc-slug .suffix{background:var(--sx-surface-2);color:var(--sx-text-2)} html.sx-on .acc-check input{accent-color:var(--sx-accent)} html.sx-on .acc-eye:hover{background:var(--sx-surface-2);color:var(--sx-text)} /* one flat primary button — no gradient, no coloured glow (G4 H-P1-3) */ html.sx-on .acc-btn{min-height:44px;padding:8px 18px;border-radius:var(--sx-radius);border:1px solid var(--sx-accent);background:var(--sx-accent);color:var(--sx-on-accent); box-shadow:none!important;font-weight:600;filter:none;transition:background-color var(--sx-dur) var(--sx-ease)} html.sx-on .acc-btn:hover{transform:none;filter:none;background:var(--sx-accent-hover);border-color:var(--sx-accent-hover)} html.sx-on .acc-btn.sm{min-height:36px;padding:4px 12px;border-radius:var(--sx-radius)} html.sx-on .acc-btn.ghost{background:var(--sx-surface);color:var(--sx-text);border-color:var(--sx-line-strong)} html.sx-on .acc-btn.ghost:hover{background:var(--sx-surface-2);color:var(--sx-text);border-color:var(--sx-field-line)} html.sx-on .acc-btn.danger{background:var(--sx-surface);color:var(--sx-bad);border-color:color-mix(in srgb,var(--sx-bad) 45%,var(--sx-line))} html.sx-on .acc-btn[disabled]{opacity:1;background:var(--sx-surface-2);border-color:var(--sx-line);color:var(--sx-muted)} html.sx-on .acc-alert{border-radius:var(--sx-radius)} html.sx-on .acc-alert.info{background:var(--sx-surface);border-color:var(--sx-line-strong);color:var(--sx-text)} html.sx-on .acc-steps li{border-radius:var(--sx-radius)} html.sx-on .acc-steps li.doing{background:var(--sx-surface-2);border-color:var(--sx-line-strong)} html.sx-on .acc-steps li.doing .st{color:var(--sx-text);box-shadow:inset 0 0 0 2px var(--sx-accent-ink);animation:none} html.sx-on .acc-spinner{border-color:var(--sx-line-strong);border-top-color:var(--sx-accent-ink)} /* dashboard: the account greeting and the workspace cards are neutral (no product stripe, border, glow or button) */ html.sx-on .acc-hello{border-radius:var(--sx-radius);background:var(--sx-surface);border-color:var(--sx-line);box-shadow:var(--sx-shadow-1);padding:20px} html.sx-on .acc-free{background:var(--sx-ok-soft);color:var(--sx-ok);border-color:color-mix(in srgb,var(--sx-ok) 35%,var(--sx-surface))} html.sx-on .ws-card,html.sx-on .try-card,html.sx-on .acc-card,html.sx-on .acc-try,html.sx-on .bil-row,html.sx-on .bil-plan,html.sx-on .acc-empty{border-radius:var(--sx-radius)} html.sx-on .ws-card{border:1px solid var(--sx-line);box-shadow:var(--sx-shadow-1);transition:border-color var(--sx-dur) var(--sx-ease)} html.sx-on .ws-card::before,html.sx-on .acc-try::before{display:none} html.sx-on .ws-card:hover{transform:none;box-shadow:var(--sx-shadow-1);border-color:var(--sx-line-strong)} html.sx-on .ws-card.focus{box-shadow:0 0 0 2px var(--sx-accent-ink)} html.sx-on .ws-card .acc-btn:not(.ghost):not(.danger),html.sx-on .acc-try .acc-btn:not(.ghost):not(.danger){--p-btn:var(--sx-accent);background:var(--sx-accent);color:var(--sx-on-accent)} html.sx-on .ws-card .acc-btn[disabled]:not(.ghost):not(.danger),html.sx-on .acc-btn[disabled]:not(.ghost):not(.danger){cursor:not-allowed;background:var(--sx-surface-2);border-color:var(--sx-line);color:var(--sx-muted)} html.sx-on .ws-bar{background:var(--sx-surface-2)} html.sx-on .try-card:hover{transform:none;box-shadow:none;border-color:var(--sx-line-strong)} html.sx-on .try-card .go,:root.sx-on[data-theme] .try-card .go{color:var(--sx-accent-ink)} html.sx-on .bil-period label.on,html.sx-on .bil-period label:has(input:checked){background:var(--sx-accent);color:var(--sx-on-accent)} html.sx-on .bil-period label.on em,html.sx-on .bil-period label:has(input:checked) em{background:rgb(255 255 255 / .2);color:inherit} html.sx-on .bil-plan.on,html.sx-on .bil-plan:has(input:checked){border-color:var(--sx-accent-ink);box-shadow:0 0 0 2px var(--sx-accent-soft)} html.sx-on .bil-plan input{accent-color:var(--sx-accent)} html.sx-on .bil-badge{background:var(--sx-accent);color:var(--sx-on-accent)} html.sx-on .bil-badge.soft{background:var(--sx-surface-2);color:var(--sx-text)} html.sx-on .bil-row.due{border-inline-start:3px solid var(--sx-warn)} html.sx-on a.bil-row:hover{transform:none;border-color:var(--sx-line-strong)} html.sx-on .bil-method .acc-h3 .ic{color:var(--sx-text)} html.sx-on .acc-codes,html.sx-on .acc-secret code{font-family:var(--sx-font-mono)} @media (max-width:640px){.hsx-acc-split{margin-top:0}} /* ---------- 10) v1.15.1 — round 2 (G4 H-P2-1 · H-P2-5 · H-P2-7 · H-P3-2 · top-bar name at 375) ---------- */ /* H-P2-7: the app.css / accounts.css hex values that still reached the screen (pill ink mix, the default grey pill, the code block) now come from sx tokens; the classic UI keeps its own values untouched */ :root.sx-on.sx-on,:root.sx-on.sx-on[data-theme]{--pill-def:var(--sx-muted);--pill-mix:var(--sx-ink-black);--code-bg:var(--sx-surface-2);--code-ink:var(--sx-text)} :root.sx-on.sx-on[data-theme="dark"]{--pill-mix:var(--sx-white)} @media (prefers-color-scheme:dark){:root.sx-on.sx-on:not([data-theme="light"]){--pill-mix:var(--sx-white)}} html.sx-on .pill[style*="#5B6B82" i]{--pc:var(--pill-def)!important} /* H-P3-4: the locked «Open» button says why on hover (title on the form — a disabled button gets no hover) */ html.sx-on .ws-actions form.is-off{cursor:not-allowed} /* H-P3-2: the 3-step «vault closed» card uses its width — the steps sit side by side on wide screens */ @media (min-width:980px){ html.sx-on .lic-empty ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin-top:14px;counter-reset:lst} html.sx-on .lic-empty ol>li{counter-increment:lst;border:1px solid var(--sx-line);border-radius:var(--sx-radius);background:var(--sx-zebra);padding:12px 14px} html.sx-on .lic-empty ol>li::before{content:counter(lst);display:grid;place-items:center;width:24px;height:24px;margin-bottom:6px;border-radius:999px; background:var(--sx-surface);border:1px solid var(--sx-line-strong);color:var(--sx-text);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums} } @media (max-width:767.98px){ /* H-P2-1: ticket cards — ref + status · subject · company + system · one muted line (priority · assignee · updated) */ html.sx-on .hsx-tk.sx-table--cards tr::after{content:"";order:5;flex:1 1 100%;height:0} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-c{order:6;flex:0 1 auto;padding-inline:0;font-size:12px;color:var(--sx-muted)} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-c:not(.hsx-lbl):not(.hsx-c-t){padding-inline-start:12px} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-c.hsx-c-t{margin-inline-start:auto;padding-inline-end:12px} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-c .pill{font-size:11px;padding-block:0} html.sx-on .hsx-tk.sx-table--cards td.hsx-c-c .small{font-size:12px} /* H-P2-5: accounts.sysenta.com (and the portal) — the pages are a labelled tab row under the bar, not only behind ☰ */ html.sx-on .sx-app--top .sx-tbar{flex-wrap:wrap;height:auto;min-height:56px;padding-top:6px;row-gap:6px} html.sx-on .sx-app--top .sx-tbar-nav:not(:empty){display:flex;order:9;flex:1 1 100%;height:42px;margin:0 calc(var(--sx-sp-1) * -1);padding:0 8px; border-top:1px solid var(--sx-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin} html.sx-on .sx-app--top .sx-tbar-nav::-webkit-scrollbar{height:4px} html.sx-on .sx-app--top .sx-tbar-nav::-webkit-scrollbar-thumb{border-width:0} html.sx-on .sx-app--top .sx-tbar-nav .sx-tb-l{padding:0 12px;min-height:42px} html.sx-on .sx-app--top .sx-tbar-nav .sx-tb-l.is-active{font-weight:var(--sx-fw-bold)} html.sx-on .sx-app--top .sx-tbar-nav .sx-tb-l.is-active::after{bottom:0} html.sx-on .sx-app--top .sx-tbar:has(.sx-tbar-nav:empty){padding-top:0} /* the product name is never cut to «حساب سي…» and the theme toggle stays in the bar (owner 2026-10-15): the bar's icon buttons are 40px (shell desktop size) and the mark 32px on phones, so the name fits; a longer name wraps to a 2nd line */ html.sx-on .sx-app--top .sx-tbar .sx-rb{width:40px;height:40px} html.sx-on .sx-app--top .sx-tbar .sx-rail-logo{width:32px;height:32px} html.sx-on .sx-app--top .sx-tbar .sx-rail-logo img{width:20px;height:20px} html.sx-on .sx-app--top .sx-tbar .hsx-top-end{margin-inline-end:0} html.sx-on .sx-app--top .sx-tbar .hsx-top-end .hsx-tb{width:40px;height:40px;min-height:40px;padding:0;justify-content:center} html.sx-on .sx-app--top .sx-tbar .sx-rail-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal; overflow:hidden;text-overflow:clip;line-height:1.3;font-size:var(--sx-fs-15);margin-inline-start:6px} } /* very narrow phones (<371px): the name keeps the room and the mark steps aside (the ☰ and the name stay) */ @media (max-width:370.98px){html.sx-on .sx-app--top .sx-tbar .sx-rail-logo{display:none}} } /* ---------- 11) print — the paper is always light, the shell never prints ---------- */ @media print{ :root.sx-on[data-theme]{ color-scheme:light; --sx-bg:#FFFFFF; --sx-surface:#FFFFFF; --sx-surface-2:var(--sx-l-2); --sx-field:#FFFFFF; --sx-text:var(--sx-l-text); --sx-text-2:var(--sx-l-text-2); --sx-muted:var(--sx-l-muted); --sx-line:var(--sx-l-line); --sx-line-strong:var(--sx-l-line-strong); --sx-grid:var(--sx-l-grid); --sx-zebra:var(--sx-l-zebra); --sx-accent:var(--sx-brand); --sx-on-accent:var(--sx-on-brand); --sx-accent-ink:var(--sx-ink-l); } html.sx-on body{background:#FFFFFF;color:#000000} .hsx-top-end,.hsx-strip,.hsx-dens,.hsx-dens-bar,.hsx-foot,.hsx-fb,.page-actions{display:none!important} html.sx-on .sx-table thead th{position:static} html.sx-on table.sx-table{width:100%} }