/* ========================================================================== Saudi ERP — foundation stylesheet (R0a) -------------------------------------------------------------------------- No build step. No Node, no npm, no Vite. Served directly from public/css. R0b decision: the tenant shell is server-rendered Blade on this plain stylesheet; no front-end toolchain was needed, so none was added. TWO RULES, both enforced by a test: 1. LOGICAL PROPERTIES ONLY. Never margin-left / padding-right / text-align: left / border-left / left: / right:. Use the inline-start and inline-end forms. R0b's Arabic RTL then needs dir="rtl" and a font, not a re-layout. 2. Every colour, space and size is a custom property on :root, so the Tailwind theme inherits these values instead of discarding them. ========================================================================== */ /* --- typefaces (R0b.1) ---------------------------------------------------- IBM Plex Sans Arabic with its Latin companion IBM Plex Sans, SELF-HOSTED from public/fonts/ibm-plex (see PROVENANCE.md there: official IBM Plex packages, SIL OFL 1.1). No third-party font request at runtime (the CSP allows fonts from 'self' only) and no reliance on a font installed on the user's machine. The Arabic faces carry an Arabic-only unicode-range, so Latin letters and digits always come from IBM Plex Sans in BOTH languages -- one consistent Latin -- and an English page downloads the Arabic file only when Arabic text is actually on it. Weights: 400, 600, 700 (bold, headings and table headers). */ @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexSansArabic-Regular.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexSansArabic-Bold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexSans-Regular.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexSans-SemiBold.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexSans-Bold.woff2") format("woff2"); } :root { --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", sans-serif; /* 2026-10-26 palette: light grey-green page, white surfaces, deep teal header, teal actions and selected states, pale mint hover. */ --color-bg: #eef3f1; --color-surface: #ffffff; --color-sidebar-bg: #eef3f1; --color-border: #d3dfdb; --color-border-strong: #a9c0ba; --color-native-control-border: #767676; --color-text: #172327; --color-muted: #536664; --color-accent: #0f6d63; --color-accent-strong: #0b564f; --color-accent-text: #ffffff; --color-hover: #e0f0ea; --color-header-bg: #0c3a35; --color-header-text: #eef7f4; --color-header-muted: #a3cbc1; --color-header-border: rgb(255 255 255 / 0.24); --color-header-hover: rgb(255 255 255 / 0.12); --color-header-pill: #d6eee7; --color-header-pill-text: #0c3a35; --color-header-focus: #8fe0cf; --color-scroll-thumb: #9fc2b9; --color-scroll-thumb-hover: #5d8c81; --shadow-overlay: 0 0.5rem 2rem rgb(9 40 36 / 0.18); /* 2026-10-26 refinement: the current sidebar item, the page surface, secondary buttons and the styled list options. */ --color-nav-current-bg: #ffffff; --shadow-nav-current: 0 1px 2px rgb(12 58 53 / 0.12), 0 0 0 1px rgb(12 58 53 / 0.05); --shadow-surface: 0 1px 2px rgb(12 58 53 / 0.05); --color-secondary-bg: #dbe8e4; --color-secondary-text: #0b4f48; --color-secondary-hover-bg: #0c4a43; --color-secondary-hover-text: #ffffff; --color-option-hover: #e4f1ed; --color-option-selected: #d5eae4; --color-option-text: #0b4f48; --color-danger: #a4282b; --color-warning-bg: #fff6e5; --color-warning-border: #e0b15c; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --radius: 6px; --radius-nav: 8px; --radius-surface: 12px; --measure: 34rem; /* Comfortable widths inside the full-width page surface. */ --measure-text: 46rem; /* Pass 3: one slightly slower, smooth ease-out for the sidebar width only. */ --ease-shell: cubic-bezier(0.22, 0.61, 0.36, 1); --shell-motion: 300ms; /* Control heights (R0b.1): buttons, pills and text inputs share them. */ --control-height-sm: 2rem; --control-height-md: 2.5rem; --control-height-lg: 2.875rem; } /* Larger touch targets where the pointer is a finger. */ @media (pointer: coarse) { :root { --control-height-sm: 2.25rem; --control-height-md: 2.75rem; --control-height-lg: 3rem; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0e1715; --color-surface: #15211e; --color-sidebar-bg: #0e1715; --color-border: #2a3b37; --color-border-strong: #4a625c; --color-native-control-border: #858585; --color-text: #e3eeeb; --color-muted: #9cb3ad; --color-accent: #4db3a2; --color-accent-strong: #6cc6b6; --color-accent-text: #08201c; --color-hover: #1c302c; --color-header-bg: #0a2420; --color-header-text: #e3eeeb; --color-header-muted: #8fb8ae; --color-header-border: rgb(255 255 255 / 0.18); --color-header-hover: rgb(255 255 255 / 0.08); --color-header-pill: #bfe3d9; --color-header-pill-text: #0a2420; --color-header-focus: #8fe0cf; --color-scroll-thumb: #3f5c56; --color-scroll-thumb-hover: #6f978d; --shadow-overlay: 0 0.5rem 2rem rgb(0 0 0 / 0.5); --color-nav-current-bg: #1b2a27; --shadow-nav-current: 0 0 0 1px #2f4540; --shadow-surface: 0 0 0 1px #1d2b28; --color-secondary-bg: #1f3531; --color-secondary-text: #a8e3d6; --color-secondary-hover-bg: #4db3a2; --color-secondary-hover-text: #08201c; --color-option-hover: #1c302c; --color-option-selected: #22403a; --color-option-text: #b4ece0; --color-danger: #e2797b; --color-warning-bg: #2a2317; --color-warning-border: #6d5628; } } /* I14 browser walk: a link left at the browser's default colours (blue, and purple once visited) is below 2:1 on the dark surfaces, so in the dark scheme every plain link takes the accent colour, visited or not. Zero specificity: every component rule still wins, and the light scheme keeps the browser defaults (above 8:1). */ @media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"]) a:not(.button)) { color: var(--color-accent); } } *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; } body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.55; -webkit-text-size-adjust: 100%; } /* Arabic pages: same families, Arabic first; a modestly taller line height keeps the script clear without making otherwise viewport-sized screens overflow only because their interface language changed. */ [lang="ar"] body, body[lang="ar"] { font-family: var(--font-arabic); line-height: 1.6; } /* Form controls do not inherit the page font by default in every browser. */ button, input, select, textarea { font-family: inherit; } .page { min-block-size: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: var(--space-4); padding-block: var(--space-8); } .card { inline-size: 100%; max-inline-size: var(--measure); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-8); text-align: start; } .eyebrow { margin: 0 0 var(--space-2); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } h1 { margin: 0 0 var(--space-3); font-size: 1.5rem; line-height: 1.25; } p { margin: 0 0 var(--space-4); color: var(--color-muted); } p:last-child { margin-block-end: 0; } .host-badge { display: inline-block; padding-inline: var(--space-3); padding-block: var(--space-1); border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: 0.8125rem; font-weight: 600; } .meta { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); font-size: 0.875rem; color: var(--color-muted); } .meta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); } .meta dt { font-weight: 600; color: var(--color-text); } .meta dd { margin: 0; } .notice { margin-block-start: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius); font-size: 0.875rem; color: var(--color-text); } code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; } @media (max-width: 30rem) { .card { padding: var(--space-6) var(--space-4); } .meta dl { grid-template-columns: 1fr; gap: var(--space-1); } } /* ========================================================================== Authentication screens (increment 2) Logical properties only, same rule as the rest of this file: R0b's Arabic RTL must be a dir switch, not a re-layout. ========================================================================== */ .field { margin-block-end: var(--space-4); } .field label { display: block; margin-block-end: var(--space-1); font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .field input[type="text"], .field input[type="search"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="number"], .field input[type="date"], .field input[type="month"], .field textarea, .table-input { inline-size: 100%; min-block-size: var(--control-height-md); line-height: 1.3; padding-block: var(--space-1); padding-inline: var(--space-3); font: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); } .field textarea { min-block-size: 5rem; resize: vertical; } /* Monetary entry (unit prices). The input keeps dir="ltr" for digits, the decimal point and the caret; within that direction its end is the right edge, so amounts line up on the right in English and Arabic alike. Nothing reformats the value while it is typed. */ .money-input, .num-input { text-align: end; font-variant-numeric: tabular-nums; } /* Quantitative table columns (amounts, quantities, rates, counts): the cell and its column heading sit on the RIGHT edge in English and Arabic alike, so decimals line up. Values keep their own , so digits, decimal points and signs stay in left-to-right order. Expressed logically: the right edge is the end of an LTR line and the start of an RTL one. :dir() follows each cell's own direction, because print documents set their own dir (the tenant invoice print is always RTL, the platform print always LTR) whatever the page language is. Text, dates, identifiers, badges and actions keep the default alignment. */ :is(.list-table, .print-table) :is(th, td).num { text-align: end; } :is(.list-table, .print-table) :is(th, td).num:dir(rtl) { text-align: start; } /* Tabular figures on screen only: on an A4 print they widen every amount column and push a long line table past the sheet. */ .list-table :is(th, td).num { font-variant-numeric: tabular-nums; } /* A native date field keeps dir="ltr", so its digits, its segment order and its calendar button stay exactly as the browser lays them out. In an Arabic page only, the date text sits at the end (right) beside the calendar button and under its right-aligned label, instead of floating at the far left. The characters are never reversed; picker, keyboard entry and value unchanged. */ html[dir="rtl"] .workspace-shell .field input[type="date"][dir="ltr"] { text-align: end; } html[dir="rtl"] .workspace-shell .field input[type="date"][dir="ltr"]::-webkit-calendar-picker-indicator { margin-inline-start: var(--space-2); } .field input:focus-visible, .field textarea:focus-visible, .table-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .allocation-amount { inline-size: 100%; } .allocation-release-cell { min-inline-size: 20rem; } .allocation-release-form { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .allocation-release-form .table-input { flex: 1 1 12rem; inline-size: auto; min-inline-size: 12rem; } /* One-time codes read left-to-right even in an RTL page: they are digits, not language. `dir="ltr"` on the input is deliberate, not an oversight. */ .field input.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.25em; text-align: center; } .field .hint { margin-block-start: var(--space-1); margin-block-end: 0; font-size: 0.8125rem; color: var(--color-muted); } /* --- buttons (R0b.1) -------------------------------------------------------- ONE height scale for every button, button-styled link and pill control, so a header, a page's actions and a form's submit line up whatever element or language they use. Default is medium; .button-sm is for dense places (the header's Sign out, beside the language pills); .button-lg is available for a lone primary action. Heights are MINIMUMS: a long Arabic label on a narrow screen wraps and grows instead of overflowing. Touch screens get the larger targets automatically. */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); inline-size: 100%; min-block-size: var(--control-height-md); padding-block: var(--space-1); padding-inline: var(--space-4); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; color: var(--color-accent-text); background: var(--color-accent); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; vertical-align: middle; } a.button, a.button:visited { color: var(--color-accent-text); text-decoration: none; } .button:hover { filter: brightness(0.94); } .button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .button:disabled, .button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; filter: none; } .button-sm { min-block-size: var(--control-height-sm); padding-inline: var(--space-3); font-size: 0.875rem; } .button-lg { min-block-size: var(--control-height-lg); padding-inline: var(--space-6); font-size: 1rem; } .button.secondary, a.button.secondary, a.button.secondary:visited { color: var(--color-secondary-text); background: var(--color-secondary-bg); border-color: transparent; } /* Secondary actions (2026-10-26 refinement): pale green-grey with dark teal text; dark teal with white text under the pointer. A disabled one keeps its resting colours. */ .button.secondary:hover, a.button.secondary:hover { filter: none; color: var(--color-secondary-hover-text); background: var(--color-secondary-hover-bg); } .button.secondary:disabled:hover, .button.secondary[aria-disabled="true"]:hover { color: var(--color-secondary-text); background: var(--color-secondary-bg); } .button.auto { inline-size: auto; } .errors { margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-danger); border-inline-start-width: 4px; border-radius: var(--radius); color: var(--color-danger); font-size: 0.875rem; } .errors ul { margin: 0; padding-inline-start: var(--space-4); } .qr { display: flex; justify-content: center; padding: var(--space-4); margin-block-end: var(--space-4); background: #ffffff; /* QR contrast must not follow the theme */ border: 1px solid var(--color-border); border-radius: var(--radius); } .qr svg { inline-size: 240px; block-size: auto; } .qr-phase1 { justify-content: flex-start; inline-size: max-content; } .qr-phase1 svg { inline-size: 180px; } .secret { display: block; padding: var(--space-3); margin-block-end: var(--space-4); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9375rem; word-break: break-all; text-align: center; background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius); } .code-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-block-end: var(--space-4); padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9375rem; text-align: center; } .alt-action { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); font-size: 0.875rem; } .auth-alternatives { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); } .alt-action.auth-alternatives { margin-block-start: var(--space-3); padding-block-start: var(--space-2); } .auth-alternatives-plain { margin-block-start: var(--space-2); } .auth-alternatives form { margin: 0; } .auth-alternatives :is(a, a:visited, button) { display: inline-flex; align-items: center; min-block-size: 2rem; padding: 0; border: 0; background: transparent; color: var(--color-accent); font: inherit; font-size: 0.8125rem; font-weight: 400; text-align: start; text-decoration: underline; cursor: pointer; } @media (max-width: 30rem) { .auth-alternatives { align-items: flex-start; flex-direction: column; } } .checkbox { display: flex; gap: var(--space-2); align-items: flex-start; margin-block-end: var(--space-4); font-size: 0.875rem; } @media (max-width: 30rem) { .code-list { grid-template-columns: 1fr; } } /* ========================================================================== Tenant onboarding (increment 5) Same rule as the rest of this file: logical properties only. ========================================================================== */ .page.wide { justify-content: flex-start; } .card.wide { max-inline-size: 56rem; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); } .toolbar h1 { margin: 0; } .list-table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; } .list-table th, .list-table td { padding-block: var(--space-3); padding-inline: var(--space-2); text-align: start; border-block-end: 1px solid var(--color-border); vertical-align: middle; } .list-table th { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); } .list-table tbody tr:hover { background: var(--color-bg); } .empty-state { padding: var(--space-6); text-align: center; color: var(--color-muted); } .badge { display: inline-block; padding-inline: var(--space-2); padding-block: 0.125rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; } .badge.status-completed, .badge.status-trial_full, .badge.status-accepted, .badge.status-active { background: #e5f3ef; border-color: #bfe0d4; color: #1f6f5c; } .badge.status-running, .badge.status-pending { background: #eaf1fb; border-color: #c4d8f2; color: #1f4f9c; } .badge.status-failed, .badge.status-suspended, .badge.status-expired, .badge.status-cancelled { background: #fbeaea; border-color: #f0c2c3; color: var(--color-danger); } .badge.status-awaiting_operator, .badge.status-grace, .badge.status-read_only, .badge.status-over-limit, .badge.status-trial_read_only { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: #7a5a12; } @media (prefers-color-scheme: dark) { .badge.status-completed, .badge.status-trial_full, .badge.status-accepted, .badge.status-active { background: #163127; border-color: #234a3b; color: #7fd2b6; } .badge.status-running, .badge.status-pending { background: #16233a; border-color: #24365a; color: #9db8ee; } .badge.status-failed, .badge.status-suspended, .badge.status-expired, .badge.status-cancelled { background: #3a1f20; border-color: #5a2e2f; color: #f0a8a9; } .badge.status-awaiting_operator, .badge.status-grace, .badge.status-read_only, .badge.status-over-limit, .badge.status-trial_read_only { background: #33291a; border-color: #5a4826; color: #e0b15c; } } .field select { inline-size: 100%; min-block-size: var(--control-height-md); line-height: 1.3; padding-block: var(--space-1); padding-inline: var(--space-3); font: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); } /* Before the dropdown script runs, or without it, a select shows the same chevron as the styled list instead of the browser's own arrow, in the same place: 12px from the end edge, with room for it in the padding. */ :is(.field select, .filters > select, select.table-input):not([multiple], [size]) { appearance: none; padding-inline-end: 2.5rem; background-image: var(--select-chevron-fallback); background-repeat: no-repeat; background-size: 1rem 1rem; background-position: right var(--space-3) center; } :is(.field select, .filters > select, select.table-input):not([multiple], [size]):dir(rtl) { background-position: left var(--space-3) center; } .button.link, a.button.link:visited { display: inline; inline-size: auto; min-block-size: 0; padding: 0; font-weight: 600; color: var(--color-accent); background: transparent; border: none; text-decoration: none; } .steps { list-style: none; margin: 0; padding: 0; } .steps li { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); font-size: 0.9375rem; } .steps li:last-child { border-block-end: none; } .steps .mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-muted); } .steps li.done .mark { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); } .steps li.current .mark { border-color: var(--color-accent); color: var(--color-accent); } .steps li.current { font-weight: 600; } .trial-window { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-block-start: var(--space-4); } .trial-window .stat { padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); text-align: center; } .trial-window .stat dt { font-size: 0.75rem; color: var(--color-muted); margin-block-end: var(--space-1); } .trial-window .stat dd { margin: 0; font-weight: 600; } @media (max-width: 40rem) { .trial-window { grid-template-columns: 1fr; } .list-table { display: block; overflow-x: auto; white-space: nowrap; } } /* ========================================================================== R0b — tenant workspace shell, forms, tables and print base. Same two rules: logical properties only; values from :root tokens. ========================================================================== */ :root { --shell-nav-width: 15.875rem; --shell-rail-width: 4rem; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E"); --icon-chevron-tight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.5 8.5 13 7.5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E"); /* Every dropdown arrow (styled lists, the checkbox filter, and a select shown before or without the script) uses this one chevron. */ --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E"); --select-chevron-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172327' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.8'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --color-info-bg: #eaf1fb; --color-info-border: #c4d8f2; --color-success-bg: #e5f3ef; --color-success-border: #bfe0d4; --color-danger-bg: #fbeaea; --color-danger-border: #f0c2c3; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --select-chevron-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3eeeb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.8'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E"); --color-info-bg: #16233a; --color-info-border: #2c4670; --color-success-bg: #13291f; --color-success-border: #24513d; --color-danger-bg: #331718; --color-danger-border: #6b2c2e; } } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; } .skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -3rem; padding: var(--space-2) var(--space-3); background: var(--color-accent); color: var(--color-accent-text); border-radius: var(--radius); z-index: 10; } .skip-link:focus { inset-block-start: var(--space-2); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .language-switch { display: inline-flex; gap: var(--space-1); margin: 0; } .language-option { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm); font: inherit; font-size: 0.8125rem; line-height: 1.2; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); cursor: pointer; } .language-option[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); } /* --- shell layout (2026-10-26 navigation pass, refined the same day) --- One shell for both portals (body class workspace-shell): a deep teal header, a sidebar that is pinned (icons and labels) or an icon rail that expands over the page on hover or keyboard focus, and independent scroll panes for the sidebar and the page. The sidebar and the area around the page share the light grey-green background; the page itself sits on one white rounded surface (.shell-surface). The pinned/rail choice lives on , set before first paint by js/shell-sidebar-state.js from the viewer's saved preference. Icons are local SVG masks keyed by data-icon, drawn in a fixed 20px slot; they take the text colour in every state and theme. Sidebar geometry: the pinned navigation track is 254px and the collapsed rail is 64px. The expanded rail covers the pinned track plus the 12px page gutter, matching the visible pinned sidebar edge. Top-level items keep one inline offset in every state so pinning never shifts the icons. Pinning animates width; opening a menu animates its height. */ .shell-body { min-block-size: 100vh; display: flex; flex-direction: column; } .shell-header { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) var(--space-6); min-block-size: 3.75rem; background: var(--color-header-bg); color: var(--color-header-text); border-block-end: 1px solid var(--color-header-bg); } .shell-header :focus-visible { outline-color: var(--color-header-focus); } .shell-brand { display: flex; flex-direction: column; min-inline-size: 0; } .shell-product { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-header-muted); } .shell-tenant { font-weight: 600; font-size: 1.0625rem; color: var(--color-header-text); } .shell-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-inline-start: auto; } .shell-tools form { margin: 0; } /* Plain links in both workspaces take the teal accent, visited or not (the platform rule below predates this; the tenant shell now matches it). */ :where(.tenant-shell-body .shell-main a:not(.button)) { color: var(--color-accent); } .shell-user, a.shell-user, a.shell-user:visited { font-size: 0.875rem; color: var(--color-header-text); } .shell-header .language-option { background: transparent; border-color: var(--color-header-border); color: var(--color-header-text); } .shell-header .language-option:hover { background: var(--color-header-hover); } .shell-header .language-option[aria-pressed="true"] { background: var(--color-header-pill); border-color: var(--color-header-pill); color: var(--color-header-pill-text); } .shell-header .button.secondary { background: transparent; border-color: var(--color-header-border); color: var(--color-header-text); } .shell-header .button.secondary:hover { background: var(--color-header-hover); color: var(--color-header-text); } /* Square icon controls in the header (pin the sidebar; open the phone menu). */ .shell-icon-control, [data-shell-menu-toggle] { display: none; align-items: center; justify-content: center; flex: none; min-inline-size: 2.5rem; min-block-size: 2.5rem; padding: 0; border: 1px solid var(--color-header-border); border-radius: var(--radius); background: transparent; color: var(--color-header-text); cursor: pointer; } .shell-icon-control:hover, [data-shell-menu-toggle]:hover { background: var(--color-header-hover); } .shell-icon, .shell-nav li[data-icon] > a::before, .shell-nav li[data-icon] > details > summary::before, .shell-nav .nav-section > summary::after { content: ''; display: inline-block; flex: none; inline-size: 1.25rem; block-size: 1.25rem; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* Sidebar icons sit in a fixed 24px slot (glyphs about 18-20px). */ .shell-nav li[data-icon] > a::before, .shell-nav li[data-icon] > details > summary::before { inline-size: 1.5rem; block-size: 1.5rem; } /* The sidebar glyph shows the panel on the page's start side. */ .shell-icon[data-icon="sidebar"]:dir(rtl) { transform: scaleX(-1); } [data-shell-backdrop], [data-shell-nav-heading] { display: none; } .shell { display: grid; grid-template-columns: var(--shell-nav-current) minmax(0, 1fr); flex: 1; min-inline-size: 0; min-block-size: 0; --shell-nav-current: var(--shell-nav-width); } .shell-nav { background: var(--color-sidebar-bg); padding: var(--space-4) var(--space-3); } .shell-nav ul { list-style: none; margin: 0; padding: 0; } .shell-nav li + li { margin-block-start: var(--space-1); } .shell-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-nav); color: var(--color-text); text-decoration: none; } /* Hover: the label and icon turn teal; no fill. */ .shell-nav a:hover { color: var(--color-accent); } /* The current page: a white (dark theme: lifted) surface, teal text and a subtle edge, at every level. */ .shell-nav a[aria-current="page"] { background: var(--color-nav-current-bg); color: var(--color-accent); box-shadow: var(--shadow-nav-current); font-weight: 600; } .shell-nav :is(a, summary):focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* Top-level entries: icon, label, and for sections a chevron. */ .shell-nav > ul > li > a, .shell-nav .nav-section > summary { display: flex; align-items: center; gap: 0.8125rem; min-block-size: 2.5rem; padding-block: var(--space-2); padding-inline: 0.5625rem 0; font-size: 0.9375rem; border-radius: var(--radius-nav); font-weight: 600; white-space: nowrap; overflow: hidden; } .shell-nav .nav-section > summary { color: var(--color-text); cursor: pointer; list-style: none; } .shell-nav .nav-section > summary::-webkit-details-marker { display: none; } .shell-nav .nav-section > summary::after { --icon: var(--icon-chevron-tight); inline-size: 0.5rem; block-size: 0.3125rem; margin-inline-start: auto; opacity: 0.7; transition: transform 240ms var(--ease-shell); } .shell-nav .nav-section[open]:not(.nav-section-closing) > summary::after { transform: rotate(180deg); } .shell-nav .nav-section > summary:hover { color: var(--color-accent); } .shell-nav .nav-section > summary.nav-section-current { color: var(--color-accent); } /* Section links: indented 12px, so the current link's surface starts under the icon and ends exactly at the chevron's edge (the row's end); a small bullet just after the icon's centre and the label in line with the section label. One line each, so a link never re-wraps while the sidebar's width is moving. */ .shell-nav .nav-children { margin-block: 0.125rem var(--space-2); padding: 0; padding-inline-start: var(--space-3); } .shell-nav .nav-children li + li { margin-block-start: 0.125rem; } .shell-nav .nav-children a { display: flex; align-items: center; gap: 0.71875rem; min-block-size: 2.375rem; padding-block: 0.375rem; padding-inline: 1.09375rem var(--space-3); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shell-nav .nav-children a::before { content: ''; flex: none; inline-size: 0.3125rem; block-size: 0.3125rem; border-radius: 50%; background: currentColor; opacity: 0.45; } .shell-nav .nav-children a:hover::before, .shell-nav .nav-children a[aria-current="page"]::before { opacity: 1; } /* Count badges sit at the end of their row (before a group's chevron). A closed group repeats its children's total; an open one shows the badge beside the child itself. */ .shell-nav .nav-badge { margin-inline-start: auto; min-inline-size: 1.25rem; padding-inline: 0.375rem; text-align: center; } .shell-nav .nav-section > summary:has(.nav-section-badge)::after { margin-inline-start: 0; } .shell-nav .nav-section[open] > summary .nav-section-badge { display: none; } .shell-nav .nav-section[open] > summary:has(.nav-section-badge)::after { margin-inline-start: auto; } /* The navigation script animates each group's height while keeping native details semantics. The sidebar's pin/rail transition remains independent. */ /* The page area: the same grey-green as the sidebar around one white rounded surface that holds the page. A long menu scrolls inside the sidebar and a long page inside the main pane; the header stays in place. The main pane fills its whole grid track, so its scrollbar sits at the viewport edge (right in English, left in Arabic). */ .workspace-shell { block-size: 100dvh; min-block-size: 0; overflow: hidden; } .workspace-shell .shell { overflow: hidden; } .workspace-shell .shell-nav, .workspace-shell .shell-main { min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .workspace-shell .shell-nav { overflow-x: hidden; } .workspace-shell .shell-main { max-inline-size: none; padding-block: var(--space-4); padding-inline: var(--space-3) var(--space-4); } .shell-surface { min-block-size: 100%; padding: var(--space-6) var(--space-8) var(--space-8); background: var(--color-surface); border-radius: var(--radius-surface); box-shadow: var(--shadow-surface); } /* Scrollbars: nothing at rest, a soft secondary thumb while the pane is hovered or holds keyboard focus, darker while the pointer is on the scrollbar itself (the script sets shell-scrollbar-hover). The gutter is reserved, so nothing moves when the thumb appears. The standard properties come first: Chromium 121+ repaints them when the pane's state changes but never re-styles its ::-webkit-scrollbar parts on pane hover (measured), so those parts are only the fallback for engines without scrollbar-color. */ @supports (scrollbar-color: auto) { .workspace-shell :is(.shell-nav, .shell-main) { scrollbar-width: thin; scrollbar-color: transparent transparent; } .workspace-shell :is(.shell-nav, .shell-main):is(:hover, :focus-within) { scrollbar-color: var(--color-scroll-thumb) transparent; } .workspace-shell :is(.shell-nav, .shell-main).shell-scrollbar-hover { scrollbar-color: var(--color-scroll-thumb-hover) transparent; } } @supports not (scrollbar-color: auto) { .workspace-shell :is(.shell-nav, .shell-main)::-webkit-scrollbar { inline-size: 10px; block-size: 10px; } .workspace-shell :is(.shell-nav, .shell-main)::-webkit-scrollbar-track { background: transparent; } .workspace-shell :is(.shell-nav, .shell-main)::-webkit-scrollbar-thumb { background-color: transparent; background-clip: content-box; border: 2px solid transparent; border-radius: 999px; } .workspace-shell :is(.shell-nav, .shell-main):is(:hover, :focus-within)::-webkit-scrollbar-thumb { background-color: var(--color-scroll-thumb); } .workspace-shell :is(.shell-nav, .shell-main)::-webkit-scrollbar-thumb:hover { background-color: var(--color-scroll-thumb-hover); } } /* The company name keeps dir="auto" for its own word order, but a name in the other script lines up with the product name on the page's start edge instead of sitting against its own start (the Arabic header showed an English name short of the Arabic product name's right edge). */ .workspace-shell .shell-brand:dir(rtl) [dir="auto"]:dir(ltr), .workspace-shell .shell-brand:dir(ltr) [dir="auto"]:dir(rtl) { text-align: end; } /* Desktop with a fine pointer: the pin control and the icon rail. Touch screens keep the pinned sidebar (no hover-only interaction). */ @media (min-width: 48.0625rem) and (hover: hover) and (pointer: fine) { .workspace-shell [data-shell-pin] { display: inline-flex; } /* The sidebar's own width follows the grid track, so pinning and unpinning animate together. Items fill the sidebar's width, so their surfaces follow it during a transition with their rounded ends. */ .workspace-shell .shell-nav { justify-self: start; inline-size: var(--shell-nav-current); } /* Position the complete row (icon and focus surface) identically when pinned, collapsed, or temporarily expanded. */ .workspace-shell .shell-nav > ul > li { margin-inline-start: 0.1875rem; } .workspace-shell .shell-nav > ul > li > a, .workspace-shell .shell-nav .nav-section > summary { inline-size: 100%; } html[data-sidebar="rail"] .workspace-shell .shell { --shell-nav-current: var(--shell-rail-width); } html[data-sidebar="rail"] .workspace-shell .shell-nav { position: relative; z-index: 30; } /* The pinned sidebar visually includes the page's 12px start gutter. Cover that gutter on hover too, while adding the same space to the overlay's end padding so menu rows retain their pinned width. */ html[data-sidebar="rail"] .workspace-shell.shell-rail-open .shell-nav { inline-size: calc(var(--shell-nav-width) + var(--space-3)); padding-inline-end: calc(var(--space-3) * 2); box-shadow: var(--shadow-overlay); } /* The collapsed rail reserves no scrollbar gutter. A row (3px start margin and a 42px slot) is 3px wider than the rail's content area beside a reserved 10px gutter; in Arabic, Chromium then keeps the rail scrolled 3px sideways and every icon moves when the sidebar is unpinned. The gutter is on the end side, so the start offset of the icons is unchanged in both languages; the pinned sidebar and the expanded overlay keep their stable gutter. */ html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav { scrollbar-gutter: auto; } /* Collapsed rail: icon only, each in a 42px slot. Labels stay in the accessibility tree; the slot simply clips them, so every icon keeps its name. */ html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav > ul > li > a, html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav .nav-section > summary { position: relative; inline-size: 2.625rem; gap: 1.5rem; } html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav .nav-section > summary::after { opacity: 0; } /* On the rail the current page shows through its teal icon alone; the light surface returns when the sidebar expands. */ html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav > ul > li > a[aria-current="page"] { background: transparent; box-shadow: none; } html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav .nav-badge { position: absolute; inset-block-start: 0.125rem; inset-inline-end: 0.125rem; margin: 0; padding-inline: 0.3125rem; font-size: 0.625rem; line-height: 1.4; } html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav .nav-section[open] > summary .nav-section-badge { display: inline-block; } /* The open group's links are not shown on the rail. They appear at once, at their final place, when the sidebar expands; nothing moves up or down while the width changes. */ html[data-sidebar="rail"] .workspace-shell:not(.shell-rail-open) .shell-nav .nav-children { display: none; } /* Only the width moves: pinning, unpinning and the temporary expansion over the page. */ .workspace-shell.shell-rail-motion .shell { transition: grid-template-columns var(--shell-motion) var(--ease-shell); } .workspace-shell.shell-rail-motion .shell-nav { transition: inline-size var(--shell-motion) var(--ease-shell), box-shadow var(--shell-motion) var(--ease-shell); } } @media (prefers-reduced-motion: reduce) { .shell-nav .nav-section > summary::after { transition: none; } .workspace-shell.shell-rail-motion .shell, .workspace-shell.shell-rail-motion .shell-nav { transition: none; } } /* Navigation and header icons (local SVG masks; see the shell block). */ [data-icon="dashboard"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M3.75 11.25 12 4.5l8.25 6.75'/%3E%3Cpath d='M6 9.75v9.75h4.5v-5h3v5H18V9.75'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="organization"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M4.5 20V5.25L12 3.5V20'/%3E%3Cpath d='M12 9l7.5 2.25V20'/%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M7.75 8h1.5M7.75 11.5h1.5M7.75 15h1.5M15 14h1.5M15 17h1.5'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="sales"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M5.5 3.5h13v17l-2.6-1.6-2.6 1.6-2.6-1.6-2.6 1.6-2.6-1.6z'/%3E%3Cpath d='M9 8h6M9 11.5h6M9 15h3.5'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="finance"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M4 8h15.5a1 1 0 0 1 1 1v9.5a1 1 0 0 1-1 1h-15A1.5 1.5 0 0 1 3 18V6.5A1.5 1.5 0 0 1 4.5 5H17v3'/%3E%3Ccircle cx='16.5' cy='14' r='1.25'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="reports"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M3.5 20h17'/%3E%3Cpath d='M7 16.5V12'/%3E%3Cpath d='M12 16.5V6'/%3E%3Cpath d='M17 16.5V9'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="administration"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M4 7h9.5M18.5 7H20M4 17h2M10.5 17H20'/%3E%3Ccircle cx='16' cy='7' r='2.25'/%3E%3Ccircle cx='8.25' cy='17' r='2.25'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="billing"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M5.5 3.5h9l4 4v13h-13z'/%3E%3Cpath d='M14.5 3.5v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="operations"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Crect x='4' y='4.5' width='16' height='6' rx='1.5'/%3E%3Crect x='4' y='13.5' width='16' height='6' rx='1.5'/%3E%3Cpath d='M7.5 7.5h.01M7.5 16.5h.01M11 7.5h5.5M11 16.5h5.5'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="menu"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="sidebar"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='1.5'/%3E%3Cpath d='M9.5 5v14'/%3E%3C/g%3E%3C/svg%3E"); } [data-icon="close"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.1) translate(-12 -12)'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/g%3E%3C/svg%3E"); } /* R0c.2 I11: the Attention item's count badge (the number is also spoken through aria-label). */ .nav-badge { display: inline-block; margin-inline-start: var(--space-2); padding-inline: var(--space-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; background: #fbeaea; color: var(--color-danger); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-badge { background: var(--color-danger-bg); } } /* R0c.2 I11: the FP-B12 scheduler warning on the dashboard and Attention page. */ .scheduler-warning { border-inline-start: 4px solid var(--color-danger); } .shell-main { padding: var(--space-6); max-inline-size: 72rem; inline-size: 100%; min-inline-size: 0; } .shell-main:focus { outline: none; } .page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-4); } .page-head h1 { margin: 0; } .page-title { min-inline-size: 0; } .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .page-actions form { margin: 0; } /* Workspace page title (2026-10-26 refinement): a quieter heading with the breadcrumbs from the navigation context below it. */ .workspace-shell .page-head { align-items: flex-start; margin-block-end: var(--space-6); } .workspace-shell .page-head h1 { font-size: 1.125rem; line-height: 1.35; } /* Screen form text in the workspaces (pass 4, measured against the reference): 15px controls under the 14px labels. Print is unchanged. */ @media screen { .workspace-shell :is(.field input, .field select, .field textarea, .table-input, .select-menu-trigger, .multi-select-trigger) { font-size: 0.9375rem; } } .breadcrumbs { margin-block-start: var(--space-1); font-size: 0.8125rem; line-height: 1.4; color: var(--color-muted); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; } .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; overflow-wrap: anywhere; } .breadcrumbs li + li::before { content: '/'; color: var(--color-border-strong); } .breadcrumbs a { color: var(--color-accent); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } /* Inside the full-width surface, tables, reports, dashboards, panels and screen forms use the whole width: grids fill it in responsive columns (.form-grid), and a field that stands on its own takes one column of a two-column row, so it lines up with the grids around it instead of stretching across a wide screen. Running text and hints keep a comfortable line length. Print styles are separate and unchanged. */ @media screen and (min-width: 48.0625rem) { .shell-surface :is(.form, .panel, .fieldset) > .field { max-inline-size: calc(50% - var(--space-2)); } } .shell-surface :is(.panel, .shell-surface) > p:not(.banner), .shell-surface > p:not(.banner):not(.shell-zone), .shell-surface .hint, .shell-surface .empty-state p { max-inline-size: var(--measure-text); } .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); margin-block-end: var(--space-4); } .panel h2 { margin: 0 0 var(--space-3); font-size: 1.0625rem; } .panel h3 { margin: var(--space-3) 0 var(--space-2); font-size: 0.9375rem; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); } .grid-2 > .panel { margin-block-end: 0; } .grid-2 + .panel { margin-block-start: var(--space-4); } .facts { margin: 0; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--space-2) var(--space-4); } .facts dt { font-weight: 600; } .facts dd { margin: 0; } .profile-fact-note { display: block; margin-block-start: var(--space-1); } .facts + .hint { margin-block-start: var(--space-3); } /* A value's reading direction must not move it away from its label. */ .facts dd[dir] { justify-self: start; max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; } /* Wrapped lines of a value follow the PAGE's direction, not the value's own `dir`, so an English address on an Arabic page (or Arabic text on an English page) stays against its label: a value whose direction differs from the page aligns to its own end. Explicit `dir` values first (no :dir() needed), then `dir="auto"` by its resolved direction. */ html[dir="rtl"] .facts dd[dir="ltr"], html[dir="ltr"] .facts dd[dir="rtl"] { text-align: end; } .facts:dir(rtl) dd[dir="auto"]:dir(ltr), .facts:dir(ltr) dd[dir="auto"]:dir(rtl) { text-align: end; } .facts-followup { margin-block-start: var(--space-4); } .chip { display: inline-block; padding: 0 var(--space-2); margin-inline-end: var(--space-1); border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8125rem; background: var(--color-bg); } .muted { color: var(--color-muted); } .small { font-size: 0.8125rem; } .stat-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); } .stat-row a { display: inline-flex; align-items: center; min-block-size: var(--control-height-md); padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); } .stat-row strong { font-size: 1.25rem; line-height: 1; margin-inline-end: var(--space-2); } /* --- banners ------------------------------------------------------------ */ .banner { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); margin: 0 0 var(--space-4); } .banner.facts-followup { margin-block-start: var(--space-4); } .banner-success { background: var(--color-success-bg); border-color: var(--color-success-border); } .banner-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); } .banner-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); } .banner-info { background: var(--color-info-bg); border-color: var(--color-info-border); } /* --- forms -------------------------------------------------------------- */ .form .field input[type="text"], .form .field input[type="search"], .form .field input[type="email"], .form .field input[type="tel"], .form .field input[type="date"], .form .field input[type="month"], .filters .field input[type="date"], .filters .field select { inline-size: 100%; } /* Filter bar: the fields and the submit button on one wrapping row. A bare label/select/button row (lists) stays compact; a bar of .field blocks (reports) sits in a light panel with the button aligned to the inputs. */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-end: var(--space-4); } .filters > label { font-size: 0.875rem; font-weight: 600; } .filters > select, .filters > input { min-block-size: var(--control-height-sm); padding-inline: var(--space-3); font: inherit; font-size: 0.9375rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); } .filters:has(> .field) { align-items: flex-end; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .filters .field { flex: 0 1 13rem; min-inline-size: 10rem; margin-block-end: 0; } .filters .field.wide { flex-basis: 22rem; } .filters > .button { flex: none; inline-size: auto; } .filters + .hint { margin-block-start: 0; } /* Billing and other multi-field searches put a grid and actions inside the filter panel. They need the panel's full width, not two flex items beside each other. The grid then wraps naturally as the viewport narrows. */ .filters:has(> .form-grid) { display: block; } .filters > .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3) var(--space-4); } .filters > .form-grid > .choice { align-self: end; } @media (max-width: 40rem) { .filters:has(> .field) { padding: var(--space-4); } .filters .field, .filters .field.wide { flex: 1 1 100%; } } /* Report tables: dates, numbers and amounts never break inside a cell. */ .report-table td { white-space: nowrap; } .report-table td.wrap { white-space: normal; min-inline-size: 10rem; } .report-table td.wrap .badge { white-space: normal; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--space-4); } .request-card .form-grid { margin-block-start: var(--space-4); row-gap: var(--space-4); } .choice-field { min-inline-size: 0; margin-inline: 0; padding: 0; border: 0; } .choice-field legend { margin-block-end: var(--space-1); padding: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .change-plan-selection { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } .cancellation-details { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } .fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-4); } .fieldset legend { font-weight: 600; padding-inline: var(--space-2); } /* A fieldset's default min-inline-size is min-content, so a wide table inside it (the invoice Lines grid) stretched the fieldset past the form panel and the page instead of letting its .table-wrap scroll. In the tenant workspace the fieldset fits its container; only the table area scrolls horizontally. */ .workspace-shell .fieldset { min-inline-size: 0; } .choice { display: flex; align-items: baseline; gap: var(--space-2); padding-block: var(--space-1); } .mail-configuration-choice { padding-block: var(--space-2); } .mail-configuration-choice > input { flex: 0 0 auto; } .mail-configuration-choice > span { min-inline-size: 0; } .mail-configuration-choice .choice-description { margin-inline-start: var(--space-1); } /* PB-2: the billing profile's buyer type (two choices and their explanation); VAT timing facts on the platform issue form and the tenant issue confirmation (2026-11-05). */ .buyer-type-field .hint, .timing-field .hint, .timing-statements > .hint { margin-block: var(--space-2) var(--space-2); font-size: 0.8125rem; color: var(--color-muted); } .timing-field > .field { margin-block-start: var(--space-3); } .field-label { display: block; margin-block-end: var(--space-1); font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .multi-select { position: relative; } .multi-select-trigger { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); inline-size: 100%; min-block-size: var(--control-height-md); padding-block: var(--space-1); padding-inline: var(--space-3); font: inherit; font-size: 1rem; line-height: 1.3; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; list-style: none; } .multi-select-trigger:hover { border-color: var(--color-border-strong); } .multi-select-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .multi-select-trigger[aria-expanded="true"] { border-color: var(--color-accent); } .multi-select-value { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multi-select-menu { position: absolute; z-index: 50; inset-block-start: calc(100% + var(--space-1)); inset-inline: 0; max-block-size: 18rem; overflow-y: auto; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-nav); box-shadow: var(--shadow-overlay); } .multi-select-actions { display: flex; gap: var(--space-3); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) var(--space-1); padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border); } .multi-select-action { appearance: none; padding: 0; color: var(--color-accent); background: transparent; border: 0; font: inherit; font-size: 0.8125rem; line-height: 1.5; text-decoration: underline; cursor: pointer; } .multi-select-action:hover { text-decoration-thickness: 2px; } .multi-select-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .multi-select-menu .choice { display: flex; align-items: baseline; margin: 0; font-weight: 400; } /* Styled single-choice lists (2026-10-26 refinement; js/select-menu.js on