/* SayHex enterprise panel shell. * * Original SayHex design-system layer: no third-party template, no external font, * image, or script host, so it stays inside the platform CSP and carries no * third-party licence obligation. It wraps the existing surfaces in a real * enterprise chrome (login gate, sidebar navigation, top bar, one view at a * time) instead of stacking every section down the middle of the page. * * Panel identity is switched by [data-panel] on : * admin -> control-plane indigo/graphite * portal -> customer teal/emerald */ :root { --sx-radius: 12px; --sx-radius-sm: 8px; --sx-sidebar-w: 268px; --sx-topbar-h: 64px; --sx-font: "Segoe UI", "Vazirmatn", "Noto Sans Arabic", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --sx-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1); --sx-shadow-2: 0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -2px rgba(15, 23, 42, .1); --sx-shadow-3: 0 20px 25px -5px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .1); --sx-bg: #f4f6fb; --sx-surface: #ffffff; --sx-surface-2: #f8fafc; --sx-border: #e2e8f0; --sx-text: #0f172a; --sx-text-muted: #64748b; --sx-danger: #b42318; --sx-danger-bg: #fef3f2; --sx-success: #027a48; --sx-success-bg: #ecfdf3; --sx-warning: #b54708; --sx-warning-bg: #fffaeb; } /* Control plane: graphite + indigo. */ html[data-panel="admin"] { --sx-accent: #4338ca; --sx-accent-strong: #3730a3; --sx-accent-soft: #eef2ff; --sx-accent-contrast: #ffffff; --sx-rail: linear-gradient(180deg, #1e1b4b 0%, #111827 100%); --sx-rail-text: #c7d2fe; --sx-rail-text-strong: #ffffff; --sx-rail-active: rgba(99, 102, 241, .22); --sx-brand-wash: linear-gradient(135deg, #312e81 0%, #1e1b4b 45%, #0b1020 100%); } /* Workspace administration: a slate blue, between the control plane's indigo and the portal's emerald, so the three panels never read as the same surface. */ html[data-panel="customer-admin"] { --sx-accent: #0f766e; --sx-accent-strong: #115e59; --sx-accent-soft: #ecfdf5; --sx-accent-contrast: #ffffff; --sx-rail: linear-gradient(180deg, #0f2a3a 0%, #0b1f2b 100%); --sx-rail-text: #a5c9d6; --sx-rail-text-strong: #ffffff; --sx-rail-active: rgba(45, 212, 191, .20); --sx-brand-wash: linear-gradient(135deg, #0f3b45 0%, #0c2b34 45%, #061a20 100%); } /* Customer surface: teal + emerald, deliberately distinct from the control plane. */ html[data-panel="portal"] { --sx-accent: #0d9488; --sx-accent-strong: #0f766e; --sx-accent-soft: #ecfdf5; --sx-accent-contrast: #ffffff; --sx-rail: linear-gradient(180deg, #064e3b 0%, #06302a 100%); --sx-rail-text: #a7f3d0; --sx-rail-text-strong: #ffffff; --sx-rail-active: rgba(16, 185, 129, .22); --sx-brand-wash: linear-gradient(135deg, #065f46 0%, #064e3b 45%, #032220 100%); } @media (prefers-color-scheme: dark) { :root:not([data-force-light]) { --sx-bg: #0b1120; --sx-surface: #111827; --sx-surface-2: #0f172a; --sx-border: #1f2937; --sx-text: #e5e7eb; --sx-text-muted: #94a3b8; } } body.sx-on { margin: 0; background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body.sx-on *:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- login ---- */ .sx-auth { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--sx-surface); } .sx-auth[hidden] { display: none; } .sx-auth__brand { background: var(--sx-brand-wash); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .sx-auth__brand::after { content: ""; position: absolute; inset: auto -120px -160px auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .16), transparent 65%); } .sx-auth__logo { display: flex; align-items: center; gap: 12px; } .sx-auth__logo img { height: 40px; width: auto; } .sx-auth__logo span { font-size: 18px; font-weight: 650; letter-spacing: .01em; } .sx-auth__pitch h1 { font-size: clamp(26px, 3vw, 40px); line-height: 1.15; margin: 0 0 14px; font-weight: 680; max-width: 15ch; } .sx-auth__pitch p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 46ch; } .sx-auth__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; } .sx-auth__points li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .84); font-size: 14px; } .sx-auth__points li::before { content: ""; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .7); flex: none; } .sx-auth__meta { font-size: 12.5px; color: rgba(255, 255, 255, .6); } .sx-auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--sx-surface); } .sx-auth__card { width: min(420px, 100%); } .sx-auth__card h2 { margin: 0 0 6px; font-size: 24px; font-weight: 660; } .sx-auth__card > p { margin: 0 0 26px; color: var(--sx-text-muted); font-size: 14px; } .sx-field { display: grid; gap: 6px; margin-bottom: 16px; } .sx-field label { font-size: 13.5px; font-weight: 600; color: var(--sx-text); } .sx-field input { height: 44px; padding: 0 13px; font: inherit; color: var(--sx-text); background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-sm); transition: border-color .15s, box-shadow .15s; } .sx-field input:focus { border-color: var(--sx-accent); box-shadow: 0 0 0 4px var(--sx-accent-soft); outline: none; } .sx-field__hint { font-size: 12.5px; color: var(--sx-text-muted); } .sx-btn { height: 44px; padding: 0 18px; font: inherit; font-weight: 600; border-radius: var(--sx-radius-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, box-shadow .15s, transform .05s; } .sx-btn:active { transform: translateY(1px); } .sx-btn--primary { width: 100%; background: var(--sx-accent); color: var(--sx-accent-contrast); } .sx-btn--primary:hover { background: var(--sx-accent-strong); } .sx-btn--primary[disabled] { opacity: .65; cursor: progress; } .sx-btn--ghost { background: transparent; border-color: var(--sx-border); color: var(--sx-text); } .sx-btn--ghost:hover { background: var(--sx-surface-2); } .sx-alert { border-radius: var(--sx-radius-sm); padding: 11px 13px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; } .sx-alert[hidden] { display: none; } .sx-alert--error { background: var(--sx-danger-bg); color: var(--sx-danger); border-color: #fecdca; } .sx-alert--ok { background: var(--sx-success-bg); color: var(--sx-success); border-color: #a6f4c5; } .sx-alert--info { background: var(--sx-accent-soft); color: var(--sx-accent-strong); border-color: currentColor; } .sx-auth__foot { margin-top: 22px; font-size: 12.5px; color: var(--sx-text-muted); } .sx-auth__foot a { color: var(--sx-accent); } /* ----------------------------------------------------------------- shell ---- */ .sx-app[hidden] { display: none; } .sx-app { min-height: 100vh; } .sx-rail { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sx-sidebar-w); background: var(--sx-rail); color: var(--sx-rail-text); display: flex; flex-direction: column; z-index: 60; } .sx-rail__brand { height: var(--sx-topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--sx-rail-text-strong); flex: none; } .sx-rail__brand img { height: 28px; width: auto; } .sx-rail__brand b { font-size: 15px; font-weight: 650; } .sx-rail__brand small { display: block; font-size: 11px; color: var(--sx-rail-text); font-weight: 500; } .sx-rail__nav { overflow-y: auto; padding: 14px 12px 20px; display: grid; gap: 2px; align-content: start; } .sx-rail__group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .45); padding: 16px 10px 6px; font-weight: 700; } .sx-rail__link { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--sx-radius-sm); color: var(--sx-rail-text); text-decoration: none; font-size: 13.5px; font-weight: 520; border: none; background: transparent; width: 100%; text-align: start; cursor: pointer; font-family: inherit; } .sx-rail__link:hover { background: rgba(255, 255, 255, .07); color: var(--sx-rail-text-strong); } .sx-rail__link[aria-current="page"] { background: var(--sx-rail-active); color: var(--sx-rail-text-strong); font-weight: 620; } .sx-rail__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; } .sx-main { margin-inline-start: var(--sx-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .sx-topbar { height: var(--sx-topbar-h); background: var(--sx-surface); border-bottom: 1px solid var(--sx-border); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 50; } .sx-topbar__title { font-size: 15.5px; font-weight: 650; margin: 0; } .sx-topbar__crumb { font-size: 12.5px; color: var(--sx-text-muted); } .sx-topbar__spacer { flex: 1; } .sx-topbar__user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sx-text-muted); } .sx-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sx-accent-soft); color: var(--sx-accent-strong); display: grid; place-items: center; font-weight: 680; font-size: 13px; flex: none; } .sx-burger { display: none; } .sx-content { padding: 22px clamp(16px, 2.4vw, 32px) 56px; flex: 1; } .sx-content__inner { max-width: 1240px; margin: 0 auto; } /* One view at a time: the shell owns visibility of the top-level surfaces. */ body.sx-on [data-sx-view] { display: none; } body.sx-on [data-sx-view][data-sx-active] { display: block; } /* Give the legacy surfaces enterprise card chrome. */ body.sx-on [data-sx-view] > section, body.sx-on [data-sx-view] > form, body.sx-on [data-sx-view] > article { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-1); padding: 18px 20px; margin: 0 0 16px; } body.sx-on [data-sx-view] .governance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; background: transparent; border: 0; box-shadow: none; padding: 0; } body.sx-on [data-sx-view] .governance-grid > * { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); padding: 16px 18px; box-shadow: var(--sx-shadow-1); min-width: 0; } body.sx-on [data-sx-view] h2 { font-size: 17px; margin: 0 0 4px; font-weight: 660; } body.sx-on [data-sx-view] h3 { font-size: 14.5px; margin: 0 0 6px; font-weight: 620; } body.sx-on [data-sx-view] table { width: 100%; border-collapse: collapse; font-size: 13.5px; } body.sx-on [data-sx-view] th, body.sx-on [data-sx-view] td { text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--sx-border); } body.sx-on [data-sx-view] th { color: var(--sx-text-muted); font-weight: 620; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; } body.sx-on [data-sx-view] pre { background: var(--sx-surface-2); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-sm); padding: 12px; overflow-x: auto; font-size: 12.5px; } body.sx-on [data-sx-view] input:not([type=checkbox]):not([type=radio]), body.sx-on [data-sx-view] select, body.sx-on [data-sx-view] textarea { font: inherit; color: var(--sx-text); background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-sm); padding: 9px 11px; max-width: 100%; } body.sx-on [data-sx-view] button:not(.sx-btn) { font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: var(--sx-radius-sm); border: 1px solid var(--sx-border); background: var(--sx-surface-2); color: var(--sx-text); cursor: pointer; } body.sx-on [data-sx-view] button:not(.sx-btn):hover { background: var(--sx-accent-soft); border-color: var(--sx-accent); color: var(--sx-accent-strong); } /* Anything the shell could not classify stays reachable but out of the way. */ body.sx-on .sx-hidden-legacy { display: none !important; } /* The legacy surfaces ship their own dark card palette. Inside the shell the * design system owns colour, so the two do not fight and text keeps contrast. */ body.sx-on .sx-app [data-sx-view] * { background-image: none; } body.sx-on .sx-app [data-sx-view] section, body.sx-on .sx-app [data-sx-view] article, body.sx-on .sx-app [data-sx-view] aside, body.sx-on .sx-app [data-sx-view] div, body.sx-on .sx-app [data-sx-view] dl, body.sx-on .sx-app [data-sx-view] li { background-color: transparent; color: inherit; } body.sx-on .sx-app [data-sx-view] .governance-grid > *, body.sx-on .sx-app [data-sx-view] [class*="card"], body.sx-on .sx-app [data-sx-view] [class*="panel"], body.sx-on .sx-app [data-sx-view] [class*="tile"], body.sx-on .sx-app [data-sx-view] [class*="metric"], body.sx-on .sx-app [data-sx-view] dl > div { background-color: var(--sx-surface); color: var(--sx-text); border-color: var(--sx-border); } body.sx-on .sx-app [data-sx-view] dl > div { border: 1px solid var(--sx-border); border-radius: var(--sx-radius-sm); padding: 10px 12px; } body.sx-on .sx-app [data-sx-view] dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-text-muted); font-weight: 660; margin-bottom: 2px; } body.sx-on .sx-app [data-sx-view] dd { margin: 0; font-size: 14px; font-weight: 560; color: var(--sx-text); } body.sx-on .sx-app [data-sx-view] p, body.sx-on .sx-app [data-sx-view] span, body.sx-on .sx-app [data-sx-view] small, body.sx-on .sx-app [data-sx-view] label, body.sx-on .sx-app [data-sx-view] td, body.sx-on .sx-app [data-sx-view] li { color: var(--sx-text); } /* Eyebrows are short inline kickers; hints are sentences and stay sentence-case. */ body.sx-on .sx-app [data-sx-view] p.eyebrow, body.sx-on .sx-app [data-sx-view] span[class*="eyebrow"], body.sx-on .sx-app [data-sx-view] p[class*="eyebrow"] { color: var(--sx-text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 680; margin: 0 0 2px; } body.sx-on .sx-app [data-sx-view] p[class*="hint"], body.sx-on .sx-app [data-sx-view] p[class*="muted"], body.sx-on .sx-app [data-sx-view] p[class*="caption"], body.sx-on .sx-app [data-sx-view] small { color: var(--sx-text-muted); font-size: 13px; border: 0; background: transparent; padding: 0; } /* State chips keep semantic colour but on the light system. Restricted to inline * elements so descriptive paragraphs and chip containers never get pill chrome. */ body.sx-on .sx-app [data-sx-view] span[class*="badge"], body.sx-on .sx-app [data-sx-view] span[class*="chip"], body.sx-on .sx-app [data-sx-view] span[class*="pill"], body.sx-on .sx-app [data-sx-view] span[class*="state"], body.sx-on .sx-app [data-sx-view] small[class*="badge"], body.sx-on .sx-app [data-sx-view] em[class*="badge"] { background-color: var(--sx-accent-soft); color: var(--sx-accent-strong); border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 620; display: inline-block; } body.sx-on .sx-app [data-sx-view] h1, body.sx-on .sx-app [data-sx-view] h2, body.sx-on .sx-app [data-sx-view] h3, body.sx-on .sx-app [data-sx-view] h4 { color: var(--sx-text); } /* Sidebar filter keeps 100+ surfaces usable. */ .sx-rail__search { padding: 12px 12px 4px; } .sx-rail__search input { width: 100%; height: 36px; padding: 0 11px; font: inherit; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--sx-radius-sm); } .sx-rail__search input::placeholder { color: rgba(255, 255, 255, .5); } .sx-rail__search input:focus { outline: none; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); } .sx-rail__link[hidden] { display: none; } .sx-rail__link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-rail__empty { padding: 12px; font-size: 12.5px; color: rgba(255, 255, 255, .55); } .sx-rail__group { display: flex; align-items: center; gap: 8px; } .sx-rail__group[hidden] { display: none; } .sx-rail__count { margin-inline-start: auto; font-size: 11px; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ responsive ---- */ .sx-scrim { display: none; } .sx-rail__close { display: none; } @media (max-width: 1024px) { .sx-rail__close { display: inline-grid; place-items: center; margin-inline-start: auto; width: 36px; height: 36px; border-radius: var(--sx-radius-sm); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: var(--sx-rail-text-strong); font-size: 20px; line-height: 1; cursor: pointer; } .sx-rail__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .sx-rail { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sx-shadow-3); } html[dir="rtl"] .sx-rail { transform: translateX(100%); } body.sx-nav-open .sx-rail { transform: translateX(0); } .sx-main { margin-inline-start: 0; } .sx-burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sx-radius-sm); border: 1px solid var(--sx-border); background: var(--sx-surface); cursor: pointer; } .sx-burger span { display: block; width: 16px; height: 2px; background: var(--sx-text); box-shadow: 0 -5px 0 var(--sx-text), 0 5px 0 var(--sx-text); } body.sx-nav-open .sx-scrim { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 55; } .sx-auth { grid-template-columns: 1fr; } .sx-auth__brand { display: none; } } @media (max-width: 640px) { body.sx-on { font-size: 14.5px; } .sx-content { padding: 16px 14px 44px; } .sx-topbar { padding: 0 12px; gap: 8px; } .sx-topbar__crumb { display: none; } .sx-topbar__user span { display: none; } .sx-topbar__title { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; } .sx-topbar__user .sx-btn { white-space: nowrap; padding: 0 12px; height: 34px; font-size: 13px; } .sx-auth__panel { padding: 24px 16px; align-items: flex-start; } .sx-auth__card { padding-top: 24px; } body.sx-on [data-sx-view] > section, body.sx-on [data-sx-view] > form, body.sx-on [data-sx-view] > article { padding: 14px; border-radius: 10px; } body.sx-on [data-sx-view] .governance-grid { grid-template-columns: 1fr; gap: 12px; } body.sx-on [data-sx-view] table { display: block; overflow-x: auto; white-space: nowrap; } } /* Mobile login gets its own compact brand header instead of the split panel. */ @media (max-width: 1024px) { .sx-auth__mobilebrand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; background: var(--sx-brand-wash); color: #fff; position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1; } .sx-auth__mobilebrand img { height: 26px; } .sx-auth__panel { padding-top: 88px; } } @media (min-width: 1025px) { .sx-auth__mobilebrand { display: none; } } @media print { .sx-rail, .sx-topbar { display: none; } .sx-main { margin: 0; } } /* ---------------------------------------------------------------- palette ---- */ .sx-palette { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .5); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .sx-palette[hidden] { display: none; } .sx-palette__box { width: min(640px, 100%); background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-3); overflow: hidden; } .sx-palette__input { width: 100%; height: 52px; padding: 0 18px; font: inherit; font-size: 15.5px; color: var(--sx-text); background: var(--sx-surface); border: 0; border-bottom: 1px solid var(--sx-border); } .sx-palette__input:focus { outline: none; } .sx-palette__input::placeholder { color: var(--sx-text-muted); } .sx-palette__list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; } .sx-palette__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--sx-radius-sm); cursor: pointer; font-size: 14px; } .sx-palette__item:hover { background: var(--sx-surface-2); } .sx-palette__item[aria-selected="true"] { background: var(--sx-accent-soft); color: var(--sx-accent-strong); font-weight: 600; } .sx-palette__dept { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-text-muted); font-weight: 680; flex: none; } .sx-palette__empty { padding: 14px 12px; color: var(--sx-text-muted); font-size: 14px; } .sx-palette__hint { padding: 9px 14px; border-top: 1px solid var(--sx-border); font-size: 12px; color: var(--sx-text-muted); background: var(--sx-surface-2); } @media (max-width: 640px) { .sx-palette { padding: 8vh 10px 10px; } .sx-palette__dept { display: none; } } /* ------------------------------------------------------------------- home ---- */ body.sx-on .sx-app [data-sx-home] { background: transparent; border: 0; box-shadow: none; padding: 0; } .sx-home__head { margin-bottom: 18px; } .sx-home__head h2 { font-size: 22px; font-weight: 680; margin: 0 0 4px; } .sx-home__head p { margin: 0; color: var(--sx-text-muted); font-size: 14px; } .sx-home__health { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 26px; } .sx-home__stat { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); padding: 14px 16px; box-shadow: var(--sx-shadow-1); display: grid; gap: 4px; } .sx-home__statlabel { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sx-text-muted); font-weight: 680; } .sx-home__statvalue { font-size: 20px; font-weight: 660; color: var(--sx-text); } .sx-home__statvalue.is-ok { color: var(--sx-success); } .sx-home__statvalue.is-bad { color: var(--sx-danger); } .sx-home__section { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sx-text-muted); font-weight: 700; margin: 0 0 12px; } .sx-home__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .sx-home__card { text-align: start; font: inherit; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); padding: 15px 16px; cursor: pointer; box-shadow: var(--sx-shadow-1); transition: border-color .15s, box-shadow .15s, transform .05s; } .sx-home__card:hover { border-color: var(--sx-accent); box-shadow: var(--sx-shadow-2); } .sx-home__card:active { transform: translateY(1px); } .sx-home__cardtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .sx-home__cardname { font-weight: 660; font-size: 15px; color: var(--sx-text); } .sx-home__cardcount { background: var(--sx-accent-soft); color: var(--sx-accent-strong); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 680; font-variant-numeric: tabular-nums; } .sx-home__cardlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .sx-home__cardlist li { font-size: 12.5px; color: var(--sx-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-rail__link--home { margin-bottom: 6px; font-weight: 620; } @media (max-width: 640px) { .sx-home__grid { grid-template-columns: 1fr; } .sx-home__health { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sx-home__head h2 { font-size: 19px; } } /* ------------------------------------------------- sign-in, per surface ---- */ /* Control plane: a restricted operations surface. One compact card, centred, stating the security posture and nothing about what lies behind it. */ .sx-auth--control-plane { grid-template-columns: 1fr; background: var(--sx-brand-wash); } .sx-auth--control-plane .sx-auth__panel { background: transparent; } .sx-auth--control-plane .sx-auth__card { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-3); padding: 30px 28px; width: min(400px, 100%); } .sx-auth__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sx-danger); background: var(--sx-danger-bg); border: 1px solid #fecdca; border-radius: 999px; padding: 3px 11px; margin-bottom: 14px; } .sx-auth__lock { font-size: 9px; line-height: 1; } .sx-auth__notices { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sx-border); display: grid; gap: 7px; } .sx-auth__notices li { font-size: 12.5px; color: var(--sx-text-muted); display: flex; gap: 8px; align-items: flex-start; } .sx-auth__notices li::before { content: ""; margin-top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--sx-text-muted); flex: none; } /* Workspace administration: between the front door and the control plane. A single professional card, centred, that states what the panel is for and what it takes to sign in, without marketing and without the restricted tone. */ .sx-auth--workspace-admin { grid-template-columns: 1fr; background: var(--sx-brand-wash); } .sx-auth--workspace-admin .sx-auth__panel { background: transparent; } .sx-auth--workspace-admin .sx-auth__card { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow-3); padding: 30px 28px; width: min(420px, 100%); } /* Customer portal: the front door. The departments are visible before sign-in so the way in is obvious from the first screen. */ .sx-auth--customer .sx-auth__depts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; max-width: 44ch; } .sx-auth__dept { font-size: 12.5px; font-weight: 560; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 11px; } .sx-auth--customer .sx-auth__pitch h1 { max-width: 18ch; } @media (max-width: 1024px) { .sx-auth--control-plane .sx-auth__panel { padding: 24px 16px; align-items: center; } .sx-auth--customer .sx-auth__depts { display: none; } } /* Surfaces waiting for an operator input read as an explicit empty state rather than a stuck loading banner. */ body.sx-on .sx-app [data-sx-view] .sx-emptystate { background: var(--sx-surface-2); border: 1px dashed var(--sx-border); border-radius: var(--sx-radius); padding: 14px 16px; color: var(--sx-text-muted); font-size: 13.5px; } body.sx-on .sx-app [data-sx-view] .sx-emptystate strong { color: var(--sx-text); font-weight: 660; display: block; margin-bottom: 2px; } /* Mixed-direction labels: a Latin surface name inside an RTL page must keep its own direction, otherwise it reads reversed and its truncation ellipsis lands on the wrong side. Each label follows the direction of its own first strong character. */ body.sx-on .sx-rail__link span, body.sx-on .sx-rail__group span, body.sx-on .sx-topbar__title, body.sx-on .sx-topbar__crumb, body.sx-on .sx-home__cardname, body.sx-on .sx-home__cardlist li, body.sx-on .sx-home__statlabel, body.sx-on .sx-palette__item span, body.sx-on .sx-auth__dept { unicode-bidi: plaintext; } /* The sign-in heading is the document heading; keep the card's visual scale. */ .sx-auth__card .sx-auth__heading { margin: 0 0 6px; font-size: 24px; font-weight: 660; } /* ------------------------------------------------- portal owned sections ---- */ .portal-shell { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: var(--sx-radius); padding: 22px 22px 24px; margin-bottom: 18px; box-shadow: var(--sx-shadow-1); } .portal-shell__head h2 { font-size: 20px; line-height: 1.3; margin: 0 0 6px; } .portal-shell__blurb { margin: 0 0 18px; color: var(--sx-text-soft); max-width: 68ch; } .portal-shell__body { display: grid; gap: 16px; } .portal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; margin: 0; } .portal-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-text-soft); } .portal-facts dd { margin: 2px 0 10px; font-weight: 600; unicode-bidi: plaintext; overflow-wrap: anywhere; } .portal-table__wrap { overflow-x: auto; } .portal-table { width: 100%; border-collapse: collapse; font-size: 14px; } .portal-table th, .portal-table td { text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--sx-border); unicode-bidi: plaintext; } .portal-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-text-soft); font-weight: 600; } .portal-table tr:last-child td { border-bottom: 0; } .portal-form { display: flex; gap: 10px; flex-wrap: wrap; } .portal-input { flex: 1 1 240px; min-height: 40px; padding: 0 12px; border-radius: var(--sx-radius-sm); border: 1px solid var(--sx-border); background: var(--sx-surface-2); color: var(--sx-text); font: inherit; } .portal-input:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 1px; } .portal-status { margin: 0; font-size: 13px; color: var(--sx-text-soft); } .portal-status--ok { color: var(--sx-ok, #15803d); } .portal-status--bad { color: var(--sx-bad, #b91c1c); } .portal-status--wait { color: var(--sx-text-soft); } .portal-secret { margin: 0; padding: 10px 12px; border-radius: var(--sx-radius-sm); background: var(--sx-surface-2); border: 1px dashed var(--sx-border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; } .portal-departments__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .portal-dept { border: 1px solid var(--sx-border); border-radius: var(--sx-radius-sm); padding: 14px; background: var(--sx-surface-2); } .portal-dept h3 { margin: 0 0 6px; font-size: 15px; } .portal-dept p { margin: 0 0 10px; font-size: 13px; color: var(--sx-text-soft); } .portal-dept code { font-size: 12px; color: var(--sx-text-soft); overflow-wrap: anywhere; } @media (max-width: 640px) { .portal-shell { padding: 16px 14px 18px; } .portal-form { flex-direction: column; } } /* ------------------------------------------------------- public status ---- */ body.sx-status { margin: 0; background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); } .sx-status__page { max-width: 640px; margin: 0 auto; padding: 48px 20px 64px; } .sx-status__brand { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-text-soft); } .sx-status__head h1 { margin: 0 0 8px; font-size: 26px; } .sx-status__blurb { margin: 0 0 28px; color: var(--sx-text-soft); } .sx-status__overall { display: flex; align-items: center; gap: 10px; padding: 16px 18px; margin-bottom: 28px; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: var(--sx-surface); font-weight: 600; } .sx-status__section { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-text-soft); margin: 0 0 10px; } .sx-status__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: var(--sx-surface); } .sx-status__item { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--sx-border); } .sx-status__item:last-child { border-bottom: 0; } .sx-status__state { margin-inline-start: auto; font-size: 13px; color: var(--sx-text-soft); } .sx-status__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sx-text-soft); flex: none; } .sx-status__dot[data-tone="ok"] { background: #15803d; } .sx-status__dot[data-tone="warn"] { background: #b45309; } .sx-status__dot[data-tone="bad"] { background: #b91c1c; } .sx-status__foot { margin-top: 28px; display: flex; gap: 18px; font-size: 14px; } .sx-status__foot a { color: var(--sx-accent); }