/* ============================================================================ app.css — Operator Console theme for the Saudi recruitment platform Arabic-RTL first. Plain CSS, no build step. Used directly by Django templates. Fonts are fully self-hosted (no external CDN, PDPL/privacy + availability): Cairo (sans, variable) and IBM Plex Mono (mono, weights 400/500/600) via @font-face below. Aesthetic: calm, dense, trustworthy back-office. One confident accent (institutional jade/teal, grounded in the Musaned gov-rail world the operators live in), cool-paper neutrals, scannable tables and boards. Signature: the stage rail — the Request state machine made visible. ========================================================================== */ /* IBM Plex Mono — mono face for IDs / رقم السيرة / refs (--font-mono). Self-hosted (no CDN), latin subset, three weights matching the prior CDN load (OFL). */ @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/IBMPlexMono-400.79936b18df9f.woff2") format('woff2'); } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/IBMPlexMono-500.b1c8a895f5fd.woff2") format('woff2'); } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/IBMPlexMono-600.5a2ce7798732.woff2") format('woff2'); } /* Cairo — the official platform typeface (Google Fonts, OFL). Self-hosted (no CDN) as a variable font: one Arabic + one Latin subset cover every weight 100–900. */ @font-face{ font-family:'Cairo'; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/Cairo-arabic.4d90a59cb181.woff2") format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC; } @font-face{ font-family:'Cairo'; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/Cairo-latin.3c9597566d23.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; } /* ---------------------------------------------------------------------------- 1. DESIGN TOKENS ------------------------------------------------------------------------- */ /* 1a. SHARED (non-themeable) tokens — spacing, radii, type, layout, motion. Every COLOR/SHADOW token is theme-scoped below (1b dark = default, 1c light) so a single [data-theme] attribute on flips the whole app. Keep token NAMES stable across themes so all screens re-colour automatically. */ :root { /* --- Typography --- */ --font-sans: 'Cairo', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* IDs, رقم السيرة, refs */ --fs-display: 1.5rem; /* 24px — page title */ --fs-h2: 1.125rem; /* 18px — section heading */ --fs-h3: 1rem; /* 16px */ --fs-body: 0.875rem; /* 14px — default UI text */ --fs-sm: 0.8125rem; /* 13px — meta, table cells */ --fs-xs: 0.75rem; /* 12px — labels, captions, pills */ --lh-tight: 1.3; --lh-body: 1.6; /* Arabic reads better with generous leading */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Latin/mono readout tracking — safe, NEVER applied to Arabic glyphs. */ --data-track: .01em; /* --- Spacing (4px base) --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* --- Radius --- */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* --- Layout --- */ --shell-side: 248px; /* sidebar width */ --shell-top: 56px; /* topbar height */ --content-max: 1400px; --dur: 140ms; --ease: cubic-bezier(.2,.6,.2,1); /* focus ring formula (resolves the themed --accent-ring at point of use) */ --sh-focus: 0 0 0 3px var(--accent-ring); } /* 1b. DARK THEME — "لوحة القيادة" cockpit. This is the DEFAULT (bare :root), so the app renders dark even with JS disabled / no data-theme attribute. Near-black charcoal surfaces + one luminous jade signal + status glows. */ :root, :root[data-theme="dark"] { /* --- Charcoal surface stack (canvas darkest → surface raised) --- */ --canvas: #0a0d10; /* app backdrop */ --surface: #141a20; /* cards, panels, rows (raised) */ --surface-2: #1e262e; /* headers / hover / wells (a notch lighter = lift) */ --surface-3: #0d1116; /* deep inset / empty pips */ --ink: #e8edf2; /* primary text — AA on surface */ --ink-1: #e8edf2; /* high-contrast fill/text alias */ --ink-2: #9fb0bd; /* secondary text */ --ink-3: #7f909d; /* tertiary / meta / captions (AA on --surface: ~5:1) */ --ink-on-accent: #04140d; /* dark glyph on luminous jade */ --line: #232c35; /* hairline borders */ --line-strong: #2e3a45; /* emphasized borders, dividers */ /* --- The one accent: luminous jade — a precise signal, never a wash --- */ --accent: #1fd18a; /* primary action / signal */ --accent-hover: #38d99b; --accent-press: #16b57a; --accent-soft: #10251d; /* dark jade tint for active nav / soft badges */ --accent-ring: rgba(31,209,138,.40); /* --- Functional (glow on dark) --- */ --danger: #ff5a5f; --danger-hover: #ff7a7e; --danger-soft: #2a1613; --warn: #ffb020; --warn-soft: #2a2010; --ok: #35d07f; --ok-soft: #0f2a1c; --info: #4aa8ff; --info-soft: #132639; /* --- Semantic STATUS colors — dark tint bg + luminous fg + vivid dot --- */ --st-new-bg: #1a2230; --st-new-fg: #9fb6d8; --st-new-dot: #6b7c97; --st-reserved-bg: #2a2211; --st-reserved-fg: #e6a93a; --st-reserved-dot: #c98a12; --st-visa-bg: #1c1f3a; --st-visa-fg: #9296f2; --st-visa-dot: #5a5fd6; --st-active-bg: #10281d; --st-active-fg: #4fd88a; --st-active-dot: #2f9d54; --st-transfer-bg: #0e2a2c; --st-transfer-fg: #3cc9d4; --st-transfer-dot: #1d949e; --st-rental-bg: #211a33; --st-rental-fg: #bd91e2; --st-rental-dot: #8b53c4; --st-closed-bg: #1b2320; --st-closed-fg: #9fada6; --st-closed-dot: #8a948f; --st-cancelled-bg: #2a1512; --st-cancelled-fg: #ff8681; --st-cancelled-dot: #cf4239; /* Worker-lifecycle S2: ink for the "current" step node (sits on --warn). */ --step-current-ink: #3a2700; /* --- Shadows (deep black — panels lift off the charcoal backdrop) --- */ --sh-sm: 0 1px 2px rgba(0,0,0,.35); --sh-md: 0 2px 8px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.45); --sh-lg: 0 16px 48px rgba(0,0,0,.60); } /* 1c. LIGHT THEME — today's institutional cool-paper palette, unchanged. */ :root[data-theme="light"] { /* --- Brand & neutrals (cool paper, ink with a faint green-gray cast) --- */ --canvas: #eef1ef; /* app background — cool paper, not stark white */ --surface: #ffffff; /* cards, panels, rows */ --surface-2: #f6f8f7; /* table headers, subtle fills, hover */ --surface-3: #e6ebe8; /* deeper inset (rarely used) */ --ink: #16211d; /* primary text — near-black, green-gray cast */ --ink-1: #16211d; /* high-contrast fill/text alias */ --ink-2: #45524d; /* secondary text */ --ink-3: #6b7873; /* tertiary / meta / captions */ --ink-on-accent: #ffffff; --line: #dde3e0; /* hairline borders */ --line-strong: #c7d0cc; /* emphasized borders, dividers */ /* --- The one accent: institutional jade/teal (the Musaned/gov-rail world) --- */ --accent: #0f6e5a; /* primary action */ --accent-hover: #0b5a49; --accent-press: #084538; --accent-soft: #e3f0ec; /* tinted fill for selected / active nav */ --accent-ring: #88c4b5; /* focus ring */ /* --- Functional --- */ --danger: #b3261e; --danger-hover: #971c16; --danger-soft: #fbe9e7; --warn: #9a6700; --warn-soft: #fdf3df; --ok: #1e7a3e; --ok-soft: #e6f2ea; --info: #2a5d9f; --info-soft: #e8f0f9; /* --- Semantic STATUS colors, one per case stage --------------------------- Soft tinted background + saturated foreground + a solid dot, so a pill is readable, calm, and instantly distinguishable in a dense board/table. */ --st-new-bg: #eef1f4; --st-new-fg: #41526b; --st-new-dot: #6b7c97; /* جديد */ --st-reserved-bg: #fbf0d8; --st-reserved-fg: #8a5a00; --st-reserved-dot: #c98a12; /* تم الحجز */ --st-visa-bg: #e8eafc; --st-visa-fg: #3b3f9c; --st-visa-dot: #5a5fd6; /* التأشيرة */ --st-active-bg: #e2f1e7; --st-active-fg: #1e7a3e; --st-active-dot: #2f9d54; /* نشط / قيد الخدمة */ --st-transfer-bg: #def0f1; --st-transfer-fg: #0e6b73; --st-transfer-dot: #1d949e; /* نقل / تنازل */ --st-rental-bg: #efe7f7; --st-rental-fg: #6a3a98; --st-rental-dot: #8b53c4; /* تأجير */ --st-closed-bg: #eceeed; --st-closed-fg: #5a655f; --st-closed-dot: #8a948f; /* مغلق / مكتمل */ --st-cancelled-bg: #fbe7e6; --st-cancelled-fg: #a52b23; --st-cancelled-dot: #cf4239; /* ملغي */ /* Worker-lifecycle S2: ink for the "current" step node (sits on --warn). */ --step-current-ink: #ffffff; /* --- Shadows (low, layered — a calm tool, not a floaty app) --- */ --sh-sm: 0 1px 2px rgba(16,33,29,.06), 0 1px 1px rgba(16,33,29,.04); --sh-md: 0 2px 4px rgba(16,33,29,.06), 0 4px 12px rgba(16,33,29,.07); --sh-lg: 0 8px 28px rgba(16,33,29,.14); } /* ---------------------------------------------------------------------------- 2. RESET & BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* RTL default. Set dir="rtl" lang="ar" on . */ [dir="rtl"] { direction: rtl; } h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--ink); } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* IMPORTANT RTL/Arabic rule: never letter-space Arabic — it breaks the connected glyphs. Letter-spacing is opt-in via .u-label for Latin only. */ /* Numerals & codes: keep Latin/Western digits LTR-isolated, tabular for tables */ .num, .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* The comment above promised isolation for years and the rule below it never delivered any. `unicode-bidi:isolate` is content-agnostic, so it is safe on the .num spans that still wrap Arabic — `direction:ltr` is NOT (it reorders «90 يوماً» into «يوماً 90») and stays withheld until every .num wraps digits ONLY. And a digit run never breaks across lines: «450,000.00» split over two lines is a second way of reading a different number. Design plan: .orbit/reviews/s2-s4-design-320.md §2 (C2/C3). */ .num { unicode-bidi: isolate; white-space: nowrap; } bdi, .ltr { unicode-bidi: isolate; } .tnum { font-variant-numeric: tabular-nums; } ::selection { background: var(--accent-soft); } /* Visible keyboard focus everywhere */ :focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); } /* Custom scrollbars — quiet */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 2px solid var(--canvas); } /* ---------------------------------------------------------------------------- 3. APP SHELL (RTL: sidebar on the right, topbar across the top) ------------------------------------------------------------------------- */ .app { display: grid; grid-template-columns: 1fr var(--shell-side); /* content | sidebar (RTL) */ grid-template-rows: var(--shell-top) 1fr; grid-template-areas: "topbar topbar" "main sidebar"; min-height: 100vh; } .topbar { grid-area: topbar; display: flex; align-items: center; gap: var(--sp-4); padding-inline: var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .topbar__brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semi); font-size: var(--fs-h3); } .topbar__brand .mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent); color: var(--ink-on-accent); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); } .topbar__spacer { flex: 1; } .topbar__search { flex: 0 1 360px; display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding-inline: var(--sp-3); height: 36px; } .topbar__search input { border: 0; background: transparent; outline: none; width: 100%; font: inherit; color: var(--ink); } .topbar__search:focus-within { border-color: var(--accent-ring); box-shadow: var(--sh-focus); } .topbar__user { display: flex; align-items: center; gap: var(--sp-2); } .sidebar { grid-area: sidebar; background: var(--surface); border-inline-start: 1px solid var(--line); /* the edge facing the content */ padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: var(--shell-top); height: calc(100vh - var(--shell-top)); overflow-y: auto; } .nav-group__label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-semi); padding: var(--sp-3) var(--sp-3) var(--sp-2); } .nav-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--ink-2); font-weight: var(--fw-medium); font-size: var(--fs-body); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); text-decoration: none; position: relative; } .nav-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .nav-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semi); } .nav-link.is-active::before { /* active marker on the inline-start edge (RTL-aware) */ content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 3px; border-radius: var(--r-pill); background: var(--accent); } .nav-link .ico { width: 18px; height: 18px; flex: none; color: currentColor; opacity: .85; } .nav-link .count { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface-2); color: var(--ink-3); padding: 1px var(--sp-2); border-radius: var(--r-pill); } .nav-link.is-active .count { background: #ffffff; color: var(--accent); } /* ---- Sidebar sections (S1) — collapsible
tree ---------------- A parent SUMMARY looks like a nav-link but toggles its child list; children nest under a connector line (RTL-aware via logical properties). Native
gives the a11y + toggle; the inline script persists open/closed per browser and force-opens the active section. */ .nav-parent { margin: 0; } .nav-parent__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--ink-2); font-weight: var(--fw-medium); font-size: var(--fs-body); cursor: pointer; user-select: none; list-style: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-parent__row::-webkit-details-marker { display: none; } /* kill the native ▶ marker */ .nav-parent__row:hover { background: var(--surface-2); color: var(--ink); } .nav-parent__row:focus-visible { outline: none; box-shadow: var(--sh-focus); } .nav-parent__row .ico { width: 18px; height: 18px; flex: none; color: currentColor; opacity: .85; } .nav-parent__chev { width: 16px; height: 16px; flex: none; margin-inline-start: auto; opacity: .55; transition: transform var(--dur) var(--ease); } .nav-parent[open] > .nav-parent__row .nav-parent__chev { transform: rotate(180deg); } /* a section holding the active route reads as lightly active on its summary */ .nav-parent:has(.nav-link.is-active) > .nav-parent__row { color: var(--ink); } .nav-sub { list-style: none; margin: var(--sp-1) 0 var(--sp-2); padding: 0; margin-inline-start: 21px; /* aligns the rail under the summary icon centre */ border-inline-start: 1px solid var(--line); } .nav-sub li { position: relative; } .nav-sub li::before { /* the connector tick from the rail into the row */ content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: var(--sp-3); height: 1px; background: var(--line); } .nav-sub .nav-link { padding-inline-start: var(--sp-4); font-size: var(--fs-sm); } .nav-badge { /* approvals + WA unread badge in the tree */ margin-inline-start: auto; font-size: 11px; padding: 1px var(--sp-2); border-radius: var(--r-pill); } @media (prefers-reduced-motion: reduce) { .nav-parent__chev { transition: none; } } .main { grid-area: main; padding: var(--sp-6) var(--sp-6) var(--sp-12); /* clip (not hidden): same horizontal-overflow backstop, but WITHOUT registering .main as the scroll container — so position:sticky descendants (e.g. .case-aside / .cd2-aside) bind to the window and actually stick. `hidden` silently broke every in-page sticky panel. */ overflow-x: clip; } .main__inner { max-width: var(--content-max); margin-inline: auto; } /* Page header band */ .page-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; } .page-head__titles { flex: 1; min-width: 0; } .page-title { font-size: var(--fs-display); font-weight: var(--fw-semi); } .page-sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; } .page-head__actions { display: flex; gap: var(--sp-2); align-items: center; } /* Breadcrumb */ .crumbs { display: flex; gap: var(--sp-2); align-items: center; color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-3); } .crumbs a { color: var(--ink-3); } .crumbs .sep { opacity: .5; } /* directional chevron flips automatically because layout is RTL; use » as a neutral mark */ /* Linked page tabs — separate URL per tab, current one marked active server-side (NOT a client-side JS panel-switcher). Introduced for Settings › التأجير بالساعة (templates/core/_hourly_settings_tabs.html); generic enough to reuse anywhere a multi-page section wants an underline tab bar instead of the sidebar's nav-parent tree. */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; } .tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-3); font-size: var(--fs-body); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .tab:hover { color: var(--ink); text-decoration: none; } .tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-semi); } /* ---------------------------------------------------------------------------- 4. CARDS & PANELS ------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .card__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); } .card__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); } .card__head .spacer { flex: 1; } .card__body { padding: var(--sp-5); } .card__body--flush { padding: 0; } .card__foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); } /* Stat tiles — restrained: a label, a tabular number, a small delta. No gradient. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); } .stat__label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-medium); } .stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: var(--fw-semi); margin-top: 2px; letter-spacing: -.01em; } .stat__delta { font-size: var(--fs-xs); margin-top: var(--sp-1); } .stat__delta.up { color: var(--ok); } .stat__delta.down { color: var(--danger); } /* F2 (doc-expiry report) — a leading accent bar + colored value keyed to the traffic-light band. Report-local but still token-driven, so dark/light follow automatically. */ .stat--danger { border-inline-start: 3px solid var(--danger); } .stat--warn { border-inline-start: 3px solid var(--warn); } .stat--muted { border-inline-start: 3px solid var(--ink-3); } .stat--accent { border-inline-start: 3px solid var(--accent); } .stat--danger .stat__value { color: var(--danger); } .stat--warn .stat__value { color: var(--warn); } .stat--muted .stat__value { color: var(--ink-2); } /* ---------------------------------------------------------------------------- 5. STATUS PILLS — one per case stage (the semantic status system) ------------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-3) 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.7; white-space: nowrap; } .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; flex: none; } /* Mobile scroll hint (reviewer nit): a horizontally-scrollable table gets an inner edge fade on the side hiding more columns (RTL: content overflows leftward). JS toggles the classes. The fade is the SURFACE colour, not black: on the dark theme a black shadow over #141a20 is black on black, so the affordance ran correctly and was invisible exactly where the screen is narrowest. Deriving it from var(--surface) makes the content fade INTO the card in both themes and needs no second declaration (design plan §3). */ .table-wrap.has-hscroll { box-shadow: inset 24px 0 16px -16px var(--surface); } .table-wrap.has-hscroll.at-hend { box-shadow: none; } /* …and a fade is not a sentence. The line below is inserted by _base.html after any wrap that REALLY scrolls, and CSS keeps it honest: it is visible only while there is more to reach, and disappears at the end of the run — a hint that stays up after the last column is a fake affordance (§7). */ .scroll-hint { display: none; align-items: center; gap: 6px; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); } .table-wrap.has-hscroll + .scroll-hint { display: inline-flex; } .table-wrap.has-hscroll.at-hend + .scroll-hint { display: none; } .scroll-hint svg { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Active-filter chip — shows which dashboard drill-in is applied to a list, with an × to clear. */ .filter-chip-row { margin-top: var(--sp-2); } .filter-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-2) 3px var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--accent-soft, rgba(15,110,90,.08)); color: var(--ink-1); font-size: var(--fs-xs); font-weight: var(--fw-semi); } .filter-chip__clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1; } .filter-chip__clear:hover { background: var(--line); color: var(--ink-1); } .filter-chip__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* F2 (doc-expiry report) — band-filter chips reuse .filter-chip but as a navigational TOGGLE: inactive = surface, active = accent-soft. Scoped under .doc-report so the always-on accent-soft appearance of the global applied-filter chip (above) is untouched elsewhere. */ .doc-report .filter-chip { background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; transition: border-color .12s ease, color .12s ease, background .12s ease; } .doc-report .filter-chip:hover { border-color: var(--ink-3); color: var(--ink-1); text-decoration: none; } .doc-report .filter-chip.is-active { background: var(--accent-soft); border-color: transparent; color: var(--ink-1); } .filter-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .filter-chip__n { font-family: var(--font-mono); opacity: .85; } /* F2 date cell — Gregorian (mono) over the secondary Hijri line; and the remaining-days cell. */ .date-cell { display: flex; flex-direction: column; line-height: 1.35; } .date-cell .greg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink); } .date-cell .hijri { font-size: var(--fs-xs); color: var(--ink-3); } .rem { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); } .rem--over { color: var(--danger); } .rem--soon { color: var(--warn); } .rem--none { color: var(--ink-3); } .rem__unit { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--ink-3); margin-inline-start: 2px; white-space: nowrap; } /* F1 housing report — worker identity cell (round initials avatar + name) + exception strip. Token-driven; mirrors the inbox-item avatar idiom. */ .cell-worker { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; } .ava { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); font-weight: var(--fw-semi); font-size: var(--fs-xs); flex: none; } .cell-worker__name { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cell-worker__nat { color: var(--ink-3); font-size: var(--fs-xs); } .exc-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); } .exc-strip__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--sp-2); } .exc-strip__label::before { content: "\2691"; color: var(--danger); } .exc-strip .badge { font-size: var(--fs-sm); padding: 3px var(--sp-3); text-decoration: none; } .exc-strip a.badge:hover { text-decoration: none; filter: brightness(1.08); } /* Severity filter chips on the "needs action" panel — interactive (client-side row filter). */ .sev-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .sev-chip:hover { border-color: var(--ink-3, #9aa5a0); color: var(--ink-1); } .sev-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sev-chip.is-active { background: var(--ink-1); border-color: var(--ink-1); color: #fff; } .sev-chip--danger.is-active { background: var(--danger); border-color: var(--danger); } .sev-chip--warn.is-active { background: var(--warn); border-color: var(--warn); color: #3a2700; } /* S2 (F6/F7): the one-tap bucket bar — segmented, pre-canned status filters with count badges. Token-driven (dark/light follow automatically), RTL-safe (pure flex, no directional offsets), wraps on phones. */ .bucket-bar { display: flex; flex-wrap: wrap; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; margin: var(--sp-3) 0 var(--sp-1); } .bucket-bar__seg { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); min-height: 32px; text-decoration: none; white-space: nowrap; } .bucket-bar__seg:hover { color: var(--ink-1); text-decoration: none; } .bucket-bar__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .bucket-bar__seg.is-active { background: var(--surface); color: var(--ink-1); box-shadow: var(--sh-sm); font-weight: var(--fw-semi); } .bucket-bar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 var(--sp-1); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.6; background: var(--line); color: var(--ink-2); } .bucket-bar__seg.is-active .bucket-bar__count { background: var(--accent-soft); color: var(--accent); } /* S2 (F8): the one-tap nationality chips row (directly above «تصفية متقدمة»). */ .nat-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); } .nat-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease; } .nat-chip:hover { border-color: var(--ink-3); color: var(--ink-1); text-decoration: none; } .nat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .nat-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .nat-chip__count { opacity: .85; } .pill--new { background: var(--st-new-bg); color: var(--st-new-fg); } .pill--reserved { background: var(--st-reserved-bg); color: var(--st-reserved-fg); } .pill--visa { background: var(--st-visa-bg); color: var(--st-visa-fg); } .pill--active { background: var(--st-active-bg); color: var(--st-active-fg); } .pill--transfer { background: var(--st-transfer-bg); color: var(--st-transfer-fg); } .pill--rental { background: var(--st-rental-bg); color: var(--st-rental-fg); } .pill--closed { background: var(--st-closed-bg); color: var(--st-closed-fg); } .pill--cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); } /* F2 document-expiry traffic-light pills — semantic tokens only (theme-aware, no hardcoded color). Green «ساري» / yellow «قريب الانتهاء» / red «منتهي» + gray «بدون تاريخ». The 15-day critical band adds `.pill--pulse`, which pulses the pill's leading dot. */ .pill--ok { background: var(--ok-soft); color: var(--ok); } .pill--warn { background: var(--warn-soft); color: var(--warn); } .pill--danger { background: var(--danger-soft); color: var(--danger); } .pill--muted { background: var(--surface-2); color: var(--ink-3); } .pill--pulse::before { animation: pill-pulse 1.4s ease-in-out infinite; } @keyframes pill-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } } @media (prefers-reduced-motion: reduce) { .pill--pulse::before { animation: none; } } /* Tiny dot-only status indicator for dense tables */ .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; vertical-align: middle; } .dot--new{background:var(--st-new-dot)} .dot--reserved{background:var(--st-reserved-dot)} .dot--visa{background:var(--st-visa-dot)} .dot--active{background:var(--st-active-dot)} .dot--transfer{background:var(--st-transfer-dot)} .dot--rental{background:var(--st-rental-dot)} .dot--closed{background:var(--st-closed-dot)} .dot--cancelled{background:var(--st-cancelled-dot)} /* Generic badges (counts, tags, flow labels) */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .badge--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; } /* flow tags */ .badge--istiqdam { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .badge--tanazul { background: var(--st-transfer-bg); color: var(--st-transfer-fg); border-color: transparent; } .badge--tajeer { background: var(--st-rental-bg); color: var(--st-rental-fg); border-color: transparent; } /* ---------------------------------------------------------------------------- 6. SIGNATURE — THE STAGE RAIL (the Request state machine, made visible) A segmented progress rail; the current stage is filled in its own status color, done stages in muted accent, future stages hollow. ------------------------------------------------------------------------- */ .stage-rail { display: flex; align-items: stretch; gap: 3px; width: 100%; } .stage-rail__seg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .stage-rail__bar { height: 6px; border-radius: var(--r-pill); background: var(--line); /* future */ transition: background var(--dur) var(--ease); } .stage-rail__seg.is-done .stage-rail__bar { background: var(--accent); opacity: .55; } .stage-rail__seg.is-current .stage-rail__bar { background: var(--accent); } .stage-rail__label { font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stage-rail__seg.is-current .stage-rail__label { color: var(--ink); font-weight: var(--fw-semi); } /* Narrow phones: step the rail label down so a multi-word stage name still reads in full. The designer named ≤360px «منطقة الخطر الوحيدة» and prescribed exactly this — a font-size step, component untouched — rather than shortening a label (.orbit/reviews/s1-design.md §2/§3). The إيجار rail is the only one feeding four two-word Arabic names into four flex:1 segments, so at 320px «مرحلة الخدمة» ellipsised on the CURRENT, bolded segment: the owner's own word, unreadable on the narrowest common phone. Verified by rendered pixels at 320 and 375, not by a measurement — an earlier scrollWidth check watched .stage-rail__seg, whose overflow never clips, and so reported clean while the label inside it was cut. */ @media (max-width: 360px) { .stage-rail { gap: 2px; } .stage-rail__label { font-size: 0.625rem; letter-spacing: -0.01em; } } /* Compact rail variant for case cards on the board (no labels) */ .stage-rail--mini .stage-rail__bar { height: 4px; } /* ---------------------------------------------------------------------------- 7. DATA TABLES (dense, scannable, RTL text-align: start) ------------------------------------------------------------------------- */ /* The scroll boundary for wide data tables: never wider than its container, and it scrolls its overflow horizontally instead of letting the table clip under main's overflow:hidden. min-width:0 lets it shrink inside any flex/grid parent. */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } table.data thead th { text-align: start; font-weight: var(--fw-semi); color: var(--ink-3); font-size: var(--fs-xs); background: var(--surface-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; white-space: nowrap; } table.data tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; } table.data tbody tr { transition: background var(--dur) var(--ease); } table.data tbody tr:hover { background: var(--surface-2); } table.data tbody tr:last-child td { border-bottom: 0; } table.data .cell-id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); } table.data .cell-name { font-weight: var(--fw-medium); } table.data .cell-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: start; } table.data .cell-actions { text-align: end; white-space: nowrap; } table.data tr.is-selected { background: var(--accent-soft); } .t-meta { color: var(--ink-3); font-size: var(--fs-xs); } /* ---------------------------------------------------------------------------- 7b. OPERATIONS GRID — direction ج «شبكة العمليات» (owner pick 2026-08-11) A shared card layer AROUND table.data (extends it, never forks it): toolbar (server-wired search + applied-filter chips) → sticky-scroll table with column dividers + dense 40px rows → foot (honest money sums + the pager). Every color is an existing theme var — no new hex (R-9). No page-size control: zero server capability = absent from the DOM, never disabled (CLAUDE.md §7, R-3/R-7). The bulk bar + checkbox column below shipped WITH their first real action (POST /cases/bulk/assign/, 2026-08-11) and render only for users the endpoint itself would accept (admin/supervisor). ------------------------------------------------------------------------- */ .ops-grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; } .ops-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .ops-search { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 12px; font-size: var(--fs-sm); font-family: inherit; min-width: 240px; } .ops-search::placeholder { color: var(--ink-3); } .ops-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); } .ops-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-xs); font-weight: var(--fw-semi); text-decoration: none; transition: background var(--dur) var(--ease); } .ops-chip__x { opacity: .7; font-weight: var(--fw-bold); } /* «مسح الكل» — the dashed-transparent chip token from the design plan §1. */ .ops-chip--clear { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-3); } /* The vertical scroll boundary the sticky thead binds to (live-verified 2026-08-11: thead pins at wrap-top with an opaque --surface-2 bg while the wrap scrolls). Combine with .table-wrap so the existing RTL h-scroll hint keeps working. */ .ops-scroll { max-height: max(430px, calc(100dvh - var(--shell-top) - 260px)); overflow: auto; } /* table.data.ops-table (not .ops-table alone): the base `table.data thead th` block above out-specifies a lone class chain, which silently restored the roomy padding — the owner picked the dense grid, so the dense grid must actually win the cascade. */ table.data.ops-table thead th { padding: 9px 14px; z-index: 2; border-bottom-color: var(--line-strong); } table.data.ops-table tbody td { padding: 9px 14px; } /* RTL-logical column dividers; row height lands at ≈40px with the dense padding. */ .ops-table th:not(:last-child), .ops-table td:not(:last-child) { border-inline-end: 1px solid var(--line); } /* Header sort links (server-side ?sort= — GET reloads, zero JS). */ .ops-table th .th-in { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; } .ops-table th.is-sorted, .ops-table th.is-sorted .th-in { color: var(--accent); } .ops-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); } .ops-foot__sum { color: var(--ink-3); } .ops-foot__sum b { color: var(--ink); font-weight: var(--fw-semi); } .ops-foot .spacer, .ops-toolbar .spacer { flex: 1; } .ops-foot .pager { margin: 0; } /* Bulk bar (تعيين الموظف المسؤول جماعياً) — hidden until n>0 selections (.is-on via JS; a