/* ═══════════════════════════════════════════════════════════════════════════════════════════════ * OWNER PORTAL — presentation only. * * Every colour, space, radius and type size is an existing --qtr-* token. Nothing here invents a * palette: the portal has to look like Quatron, not like a second product that happens to share a * login. What IS different is density — an owner reads a handful of figures and leaves, so the * cards are larger and the chrome is quieter than the internal console. * * RTL IS THE DEFAULT, not an override. The shell is Arabic-first, so the layout uses logical * properties (inline-start/end, margin-inline) and never left/right. Switching to English changes * `dir` on and nothing in this file has to know. * ═══════════════════════════════════════════════════════════════════════════════════════════════ */ .po-shell { display: grid; grid-template-columns: 264px 1fr; gap: var(--qtr-space-5); align-items: start; min-height: 60vh; } .po-nav { position: sticky; top: var(--qtr-space-4); display: flex; flex-direction: column; gap: 2px; padding: var(--qtr-space-3); background: var(--qtr-surface); border: 1px solid var(--qtr-border); border-radius: 14px; } .po-nav__title { font-size: var(--qtr-font-size-xs); color: var(--qtr-muted-text); font-weight: var(--qtr-weight-semibold); padding: var(--qtr-space-2) var(--qtr-space-3); letter-spacing: .02em; } .po-nav__item { display: flex; align-items: center; gap: var(--qtr-space-3); padding: 10px var(--qtr-space-3); border-radius: 10px; cursor: pointer; color: var(--qtr-text); font-size: var(--qtr-font-size-sm); border: 1px solid transparent; background: none; width: 100%; text-align: inherit; font-family: inherit; transition: background var(--qtr-motion-fast) var(--qtr-motion-curve); } .po-nav__item:hover { background: var(--qtr-surface-soft); } .po-nav__item:focus-visible { outline: 2px solid var(--qtr-accent); outline-offset: 2px; } .po-nav__item[aria-current="page"] { background: var(--qtr-accent-soft); color: var(--qtr-ink-strong); font-weight: var(--qtr-weight-semibold); } .po-nav__item i, .po-nav__item svg { width: 18px; height: 18px; flex: none; } .po-nav__badge { margin-inline-start: auto; font-size: var(--qtr-font-size-xs); background: var(--qtr-accent); color: var(--qtr-on-accent); border-radius: 999px; padding: 1px 8px; } .po-main { min-width: 0; } .po-head { display: flex; flex-wrap: wrap; gap: var(--qtr-space-3); align-items: center; justify-content: space-between; margin-bottom: var(--qtr-space-4); } .po-head__title { font-size: var(--qtr-font-size-xl); font-weight: var(--qtr-weight-semibold); color: var(--qtr-ink-strong); margin: 0; } .po-head__sub { font-size: var(--qtr-font-size-sm); color: var(--qtr-text-secondary); margin: 2px 0 0; } /* THE `max-width:100%` BELOW COULD NEVER FIRE, AND THE SCOPE PICKER TOOK THE PAGE WITH IT. MEASURED at 375px in ENGLISH, signed in as a Platform Owner: the document is 387px against a 375px viewport on every administration route, and the page really scrolls those 12px. Arabic is clean at exactly 375. The whole 12px is one control. A Platform Owner owns every company, so the scope picker offers the aggregate option, and in English that option reads "All permitted companies — currencies kept separate" — 327px of text, against 163px for the widest company row and far less for the Arabic "كل الشركات المصرّح بها — العملات منفصلة". A