/* ============================================================ OxiNotify – Customer Service Portal wwwroot/css/portal.css Extends the Oxit brand tokens from styles.css. ============================================================ */ /* Self-hosted fonts (same-origin, no third-party request). See wwwroot/css/fonts.css. */ @import url('/css/fonts.css'); :root { --brand-primary: #0d2b55; --brand-accent: #1a6fc4; --brand-accent-h:#1259a8; --brand-gold: #e8a020; --surface: #ffffff; --surface-2: #f4f7fb; --surface-3: #eef2f8; --border: #dce4ef; --text-primary: #0d2b55; --text-secondary:#5a7099; /* FE-08: was #8fa3bf = 2.57:1 on --surface, well under the 4.5:1 AA floor for normal text — and it is used as REAL text in 14 places (empty-state copy, timestamps, table meta, notification times), not just as decoration. #5f7391 measures 4.83:1. */ --text-muted: #5f7391; --success: #1a9e6e; --success-bg: #edfaf5; --warning: #e8a020; --warning-bg: #fdf6e9; --error: #c0392b; --error-bg: #fdf1f0; /* Scrollbars. Tinted from the brand's slate rather than neutral grey, so a scrolling panel reads as part of the UI instead of as an OS artefact sitting on top of it. Alpha rather than a solid colour: the thumb then works over --surface, --surface-2 and --surface-3 without a variant for each. */ --scroll-thumb: rgba(13, 43, 85, 0.22); --scroll-thumb-hover: rgba(13, 43, 85, 0.38); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --shadow-card: 0 8px 40px rgba(13,43,85,0.10), 0 2px 8px rgba(13,43,85,0.06); --shadow-soft: 0 2px 10px rgba(13,43,85,0.07); /* 'Cairo' is the Arabic fallback: DM Sans / DM Serif have no Arabic glyphs, so browsers use Cairo only for Arabic text — consistent, on-brand Arabic typography instead of an OS-default fallback. */ --font-body: 'DM Sans', 'Cairo', sans-serif; --font-display: 'DM Serif Display', 'Cairo', serif; --transition: 0.18s ease; /* Aliases for tokens referenced (without a fallback) by page-level styles/markup. Defined here so those references resolve to the design system instead of an invalid/undefined value: --muted → muted text, --gold → the brand gold, --brand-muted → the hairline border colour. */ --muted: var(--text-muted); --gold: var(--brand-gold); --brand-muted: var(--border); color-scheme: light; } /* ═══ DARK THEME ════════════════════════════════════════════════════════════════ The head script in _PortalLayout sets from the oxi_theme cookie (System resolves via prefers-color-scheme) BEFORE first paint, so there's no flash. Dark mode is just a token swap — every var()-based rule flips automatically. Below the tokens we re-tint only the components that hardcode light-only pastels. --brand-primary and --brand-gold are deliberately NOT changed: they're used as dark brand backgrounds (modal/table headers) and as text ON gold, which stay correct on dark. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --surface: #161b26; --surface-2: #0e1219; --surface-3: #212a3a; --border: #2c3648; --text-primary: #e7edf6; --text-secondary: #a9b7d0; /* FE-08: was #7d8ba3, which passes on --surface (5.00:1) but FAILS on the lighter --surface-3 #212a3a at 4.18:1 — and muted text sits on all three. #8e9cb5 is the worst-case 5.20:1 across surface / surface-2 / surface-3. */ --text-muted: #8e9cb5; --brand-accent: #4d9fe6; --brand-accent-h: #6bb0ec; --success: #34c48d; --success-bg: #12271e; --warning: #e8a020; --warning-bg: #2a2213; --error: #e5675c; --error-bg: #2b1512; --shadow-card: 0 10px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); --shadow-soft: 0 2px 12px rgba(0,0,0,.4); /* Light thumb on dark surfaces — the slate tint of the light theme would all but vanish here. */ --scroll-thumb: rgba(231, 237, 246, 0.20); --scroll-thumb-hover: rgba(231, 237, 246, 0.36); } /* --brand-primary is a TEXT colour in these spots → use the (now-light) primary text on dark. */ :root[data-theme="dark"] .pt-topbar, :root[data-theme="dark"] .pt-nav a:hover, :root[data-theme="dark"] .pt-bell:hover, :root[data-theme="dark"] .pt-login-head, :root[data-theme="dark"] .pt-login-head h1 { color: var(--text-primary); } /* Pastel status pills → dark tints. */ :root[data-theme="dark"] .pt-badge.open, :root[data-theme="dark"] .pt-badge.prio-normal { background:#17304f; color:#9cc3ef; } :root[data-theme="dark"] .pt-badge.inprogress, :root[data-theme="dark"] .pt-badge.prio-high { background:#332810; color:#e6b354; } :root[data-theme="dark"] .pt-badge.resolved { background:#123027; color:#4fd0a1; } :root[data-theme="dark"] .pt-badge.closed, :root[data-theme="dark"] .pt-badge.prio-low { background:#222b3b; color:#aab8d0; } :root[data-theme="dark"] .pt-badge.autoclosed { background:#2a2340; color:#b7a8e0; } :root[data-theme="dark"] .pt-badge.prio-urgent { background:#3a1714; color:#f0897d; } /* Alerts: bg follows the darkened tokens; re-tint the hardcoded borders/text. */ :root[data-theme="dark"] .pt-alert.error { border-color:#5a2a25; } :root[data-theme="dark"] .pt-alert.success { color:#4fd0a1; border-color:#1f4a3a; } :root[data-theme="dark"] .pt-alert.warn { color:#e6b354; border-color:#4a3a1a; } :root[data-theme="dark"] .pt-alert.info { background:#152238; border-color:#274063; } /* Chat surfaces + hover states that hardcode light values. */ :root[data-theme="dark"] .pt-conv-body { background: var(--surface-2); } :root[data-theme="dark"] .pt-chat-item.unread { background:#132318; } :root[data-theme="dark"] .pt-chat-item.active { background:#152238; } :root[data-theme="dark"] .pt-btn.ghost:hover { background:#2b3547; } * , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--surface-2); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; /* Long unbroken strings (URLs, long Arabic/English without spaces) wrap instead of forcing the page wider than the screen. */ overflow-wrap: break-word; } a { color: var(--brand-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── App shell ────────────────────────────────────────────── */ .pt-shell { display: flex; flex-direction: column; min-height: 100vh; } .pt-topbar { display: flex; align-items: center; gap: 16px; /* min-height (not a fixed height): a fully-featured admin with many nav tabs wraps the nav onto a second row at tablet/small-laptop widths; a fixed height clipped that row. */ padding: 0 22px; min-height: 62px; background: var(--surface); color: var(--brand-primary); border-bottom: 2px solid var(--brand-accent); box-shadow: 0 2px 12px rgba(13,43,85,0.10); /* Breathing room above the bar. It shows at rest and scrolls away when the bar pins itself — `top: 0` is kept deliberately rather than `top: 3px`, because a sticky offset would leave a 3px slot of page content sliding along above the header for the whole scroll. Safe from margin collapsing: .pt-shell is a flex container. */ margin-top: 3px; position: sticky; top: 0; z-index: 30; } .pt-topbar img { height: 34px; } /* Brand group — the platform wordmark, the divider and the tenant logo (or the .pt-brand text). Grouping them is what lets the mobile breakpoint keep the header on one row; see the long note in the max-width:720px block. On desktop it is a plain inline flex row with the topbar's own 16px gap, so the rendering is identical to when these were direct children of .pt-topbar. */ .pt-brandbar { display: flex; align-items: center; gap: 16px; /* Does NOT shrink on desktop. When it did, it competed with the tab strip for the squeeze and the tenant name lost — measured collapsing to a 15px box, i.e. a bare "…" with no readable text, between roughly 900 and 1100px. The strip is the right place for that pressure: it is built to scroll, so giving up width costs it nothing, while the brand has nowhere to go. (The mobile block below deliberately flips this to `flex: 1 1 0` — there the strip has its own row and the brand is the only thing that CAN yield.) */ flex: 0 0 auto; min-width: 0; /* Backstop: this group SHRINKS, so anything inside it that cannot shrink would otherwise overflow and paint on top of the next item in the header. The tenant name is handled properly with an ellipsis above; this guarantees nothing else can ever leak out either. */ overflow: hidden; } /* Dark-mode logo swap. The "Oxit" wordmark's "Ox" is near-black and would vanish on a dark surface, so a variant with a white "Ox" (logo-dark.png; the icon / "notify" / "it" are unchanged) is shown in dark mode. The head script always resolves data-theme to light|dark, so no media query. */ .pt-logo-dark { display: none; } :root[data-theme="dark"] .pt-logo-light { display: none; } :root[data-theme="dark"] .pt-logo-dark { display: inline-block; } .pt-logo-div { display: inline-block; width: 1px; height: 26px; background: var(--border); margin: 0 4px; opacity: .8; } .pt-tenant-logo { height: 30px; max-width: 150px; object-fit: contain; } .pt-topbar .pt-brand { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .3px; } .pt-topbar .pt-tenant { font-size: .82rem; color: var(--text-secondary); padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--border); /* ONE line, ellipsised. Left to wrap (the default), a long organisation name broke in two or three lines as the brand group shrank — measured 75px tall inside a 62px bar at 1024px — and once it could no longer wrap it SPILLED past its own box onto whatever sat next to it, which is what put the nav's left arrow underneath the name. min-width: 0 is what actually enables the ellipsis: a flex item's automatic minimum size is its min-content width, so without this the span refuses to shrink and simply overflows. max-width caps a very long name so it cannot starve the tab strip when there IS room; the full text stays available via the title attribute the layouts set. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 220px; } .pt-topbar .pt-spacer { flex: 1; } /* The tab strip can outgrow the topbar — a tenant-admin with every feature enabled exposes 7+ links (Chats, Tickets, Feedback, Management, Bot Flows, Schedule, Send). Without this it would either wrap raggedly under the brand or push the actions cluster off-screen. Instead, let it scroll horizontally IN PLACE so the topbar stays a clean single row and the user can swipe to reach the off-screen tabs. • flex: 0 1 auto + min-width: 0 — intrinsic width on desktop (so .pt-spacer still claims the leftover and pushes .pt-actions to the right), shrinkable below intrinsic width when the parent runs out of room. • Tabs themselves are flex:0 0 auto so each keeps its full label instead of squashing to ellipsis. • Scrollbar hidden visually (swipe / wheel still works); -webkit-overflow- scrolling for momentum-scroll on iOS. */ .pt-nav { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; /* Wrap overflowing tabs onto a second row on desktop instead of scrolling them under a hidden scrollbar (they were unreachable). The mobile block below switches this back to a scroll strip. */ flex-wrap: wrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .pt-nav::-webkit-scrollbar { display: none; } /* WebKit / Blink */ /* ── Desktop: scroll the tab strip instead of wrapping the header onto a second row ────────── The `flex-wrap: wrap` above is the NO-JAVASCRIPT fallback and stays the default on purpose. Horizontal scrolling was tried here before and reverted, for a good reason recorded in the comment above: the scrollbar is hidden, and a mouse cannot swipe — so any tab past the right edge became unreachable. Wrapping was the lesser evil. What makes scrolling viable now is that the strip gains real mouse affordances (arrow buttons + wheel-to-scroll, both wired in layout-portal.js), so nothing is ever out of reach. JS adds .pt-nav--strip only once those exist, which is what keeps the fallback honest: with scripting off the header still wraps and every tab is still clickable. */ .pt-nav--strip { flex-wrap: nowrap; } .pt-nav-arrow { flex: 0 0 auto; display: none; /* only ever shown when the strip actually overflows */ align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: var(--transition); } .pt-nav-arrow:hover { background: var(--surface-3); color: var(--brand-primary); } .pt-nav-arrow.show { display: inline-flex; } @media (max-width: 720px) { /* Phones swipe the strip directly, so arrows would buy nothing and would steal width from the one row that has none to spare. */ .pt-nav-arrow, .pt-nav-arrow.show { display: none; } } .pt-nav a { color: var(--text-secondary); font-weight: 500; font-size: .9rem; padding: 8px 15px; border-radius: var(--radius-sm); transition: var(--transition); flex: 0 0 auto; /* don't shrink — let the bar scroll instead */ } .pt-nav a:hover { background: var(--surface-3); text-decoration: none; color: var(--brand-primary); } .pt-nav a.active { background: var(--brand-accent); color: #fff; } /* The avatar acts as the dropdown trigger. The whole .pt-user element is keyboard- and mouse-clickable; cursor:pointer hints that. */ .pt-user { display: flex; align-items: center; gap: 10px; font-size: .85rem; cursor: pointer; position: relative; user-select: none; } .pt-user:hover .pt-avatar, .pt-user.open .pt-avatar { box-shadow: 0 0 0 2px var(--brand-gold); } .pt-user .pt-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gold); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; transition: box-shadow .15s ease; } /* Account dropdown menu — replaces the standalone Change Password / Sign Out buttons that used to live in a secondary header row. Anchored under the avatar, opens on click, closes on outside-click / Escape. The signed-in identity shows as a non-clickable header at the top — display name over the muted email — so the user can always confirm which account they're on without needing the hover tooltip. ARIA: trigger gets aria-expanded; menu is role="menu" with role="menuitem" children for screen-reader navigation. */ .pt-user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); min-width: 240px; max-width: 92vw; padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 50; } [dir="rtl"] .pt-user-menu { right: auto; left: 0; } .pt-user.open .pt-user-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Display-name row, rendered ABOVE the email and only when the signed-in user actually has one (a role-1 system admin has no tenant membership, so no name; a pre-claim session carries none either). When it's absent the email row below is unchanged and stands alone — which is why the top padding lives here rather than being taken off .pt-user-menu-email. word-break is `break-word`, not the email's `break-all`: a person's name should wrap between words, not mid-word. */ .pt-user-menu-name { padding: 8px 12px 0; font-size: .85rem; font-weight: 600; color: var(--text-primary); cursor: default; word-break: break-word; line-height: 1.3; } .pt-user-menu-email { padding: 8px 12px 10px; font-size: .78rem; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; cursor: default; word-break: break-all; line-height: 1.35; } /* With a name above it the email is the second line of one identity block, not a header of its own — tighten the gap so the two read as a pair. */ .pt-user-menu-name + .pt-user-menu-email { padding-top: 2px; } .pt-user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; font-family: var(--font-body); font-size: .85rem; color: var(--text-primary); text-align: left; transition: background .12s ease; } [dir="rtl"] .pt-user-menu-item { text-align: right; } .pt-user-menu-item:hover, .pt-user-menu-item:focus-visible { background: var(--surface-3); outline: none; } .pt-user-menu-item svg { flex: 0 0 auto; color: var(--text-secondary); } .pt-user-menu-item.danger { color: var(--error); } .pt-user-menu-item.danger svg { color: var(--error); } /* RTL: mirror the door-out arrow so it still reads as "leaving the page". */ [dir="rtl"] .pt-user-menu-item .pt-logout-icon { transform: scaleX(-1); } /* Right-side control cluster (bell, avatar, change-password, sign-out). Grouping these into one flex unit keeps them together so they never wrap raggedly on small screens — the whole cluster moves as a block. */ .pt-actions { display: flex; align-items: center; gap: 10px; } /* App switcher — shown only when the tenant holds >1 Oxi product. A grid-icon trigger opens a small menu that jumps between OxiNotify and OxiFlow. Same open/outside-click/Escape mechanics + visual language as the account menu. */ .pt-switcher { position: relative; user-select: none; } .pt-switcher-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; transition: background .12s ease, box-shadow .15s ease; } .pt-switcher-btn:hover, .pt-switcher.open .pt-switcher-btn { background: var(--surface-3); box-shadow: 0 0 0 2px var(--brand-gold); } .pt-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); min-width: 232px; max-width: calc(100vw - 16px); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 50; } [dir="rtl"] .pt-switcher-menu { right: auto; left: 0; } .pt-switcher.open .pt-switcher-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .pt-switcher-head { padding: 8px 12px 10px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; cursor: default; } .pt-switcher-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); font-family: var(--font-body); font-size: .88rem; transition: background .12s ease; } [dir="rtl"] .pt-switcher-item { text-align: right; } .pt-switcher-item:hover, .pt-switcher-item:focus-visible { background: var(--surface-3); outline: none; } .pt-switcher-item img { height: 30px; width: 30px; object-fit: contain; flex: 0 0 auto; } /* the swirl app icon (icon_new / icon-flow) */ .pt-switcher-name { font-size: .9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .pt-switcher-item .pt-switcher-dot { margin-left: auto; font-size: .66rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; } [dir="rtl"] .pt-switcher-item .pt-switcher-dot { margin-left: 0; margin-right: auto; } .pt-switcher-item[aria-current="true"] { background: var(--surface-3); } .pt-main { flex: 1; padding: 22px; max-width: 1600px; width: 100%; margin: 0 auto; } /* ── Page heading ─────────────────────────────────────────── */ .pt-pagehead { margin-bottom: 18px; } .pt-pagehead h1 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; } .pt-pagehead p { color: var(--text-secondary); font-size: .9rem; margin-top: 2px; } /* Shared here because more than one page uses them: the tab-row on the AI/Flows editors and the SuperAdmin section heading (were defined only inside a single page's