/* ============================================================================ app.css — Operator Console theme for the Saudi recruitment platform Arabic-RTL first. Plain CSS, no build step. Used directly by Django templates. Font (self-contained import below; the preferred prod approach is a in the page with preconnect — documented in design/DESIGN.md): https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap 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. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------------------------------------------------------------------------- 1. DESIGN TOKENS ------------------------------------------------------------------------- */ :root { /* --- 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-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; /* ملغي */ /* --- Typography --- */ --font-sans: '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; /* --- 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; /* --- 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); --sh-focus: 0 0 0 3px var(--accent-ring); /* --- Layout --- */ --shell-side: 248px; /* sidebar width */ --shell-top: 56px; /* topbar height */ --content-max: 1400px; --dur: 140ms; --ease: cubic-bezier(.2,.6,.2,1); } /* ---------------------------------------------------------------------------- 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"; } 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); } .main { grid-area: main; padding: var(--sp-6) var(--sp-6) var(--sp-12); overflow-x: hidden; } .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 */ /* ---------------------------------------------------------------------------- 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); } /* ---------------------------------------------------------------------------- 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; } .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); } /* 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); } /* 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) ------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); } 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); } /* ---------------------------------------------------------------------------- 8. KANBAN PIPELINE BOARD (columns + draggable case cards) ------------------------------------------------------------------------- */ .board { display: flex; gap: var(--sp-4); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp-4); scroll-snap-type: x proximity; } .board__col { flex: 0 0 300px; max-width: 300px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - 220px); scroll-snap-align: start; } .board__col-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; } .board__col-head .name { font-weight: var(--fw-semi); font-size: var(--fs-sm); } .board__col-head .count { margin-inline-start: auto; } /* the column gets a thin top accent in its stage color */ .board__col-head::before { content:""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-3); } .board__col[data-stage="new"] .board__col-head::before { background: var(--st-new-dot); } .board__col[data-stage="reserved"] .board__col-head::before { background: var(--st-reserved-dot); } .board__col[data-stage="visa"] .board__col-head::before { background: var(--st-visa-dot); } .board__col[data-stage="active"] .board__col-head::before { background: var(--st-active-dot); } .board__col[data-stage="transfer"] .board__col-head::before { background: var(--st-transfer-dot); } .board__col[data-stage="rental"] .board__col-head::before { background: var(--st-rental-dot); } .board__col[data-stage="closed"] .board__col-head::before { background: var(--st-closed-dot); } .board__col[data-stage="cancelled"] .board__col-head::before { background: var(--st-cancelled-dot); } .board__col-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; } .case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3) var(--sp-3); box-shadow: var(--sh-sm); cursor: grab; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); display: flex; flex-direction: column; gap: var(--sp-2); } .case-card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); } .case-card:active { cursor: grabbing; } .case-card.is-dragging { transform: rotate(-1deg); box-shadow: var(--sh-lg); } .case-card__top { display: flex; align-items: center; gap: var(--sp-2); } .case-card__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); } .case-card__top .spacer { flex: 1; } .case-card__customer { display: flex; align-items: center; gap: var(--sp-2); } .case-card__name { font-weight: var(--fw-semi); font-size: var(--fs-body); } .case-card__line { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-xs); } .case-card__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; } .case-card__foot .spacer { flex: 1; } /* SLA / age chip — turns warm then hot */ .age { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); } .age.warm { color: var(--warn); } .age.hot { color: var(--danger); font-weight: var(--fw-semi); } /* ---------------------------------------------------------------------------- 9. WORKER CARD (catalog tile) ------------------------------------------------------------------------- */ .worker-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .worker-card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); } .worker-card__head { display: flex; gap: var(--sp-3); padding: var(--sp-4); } .worker-card__photo { width: 56px; height: 56px; border-radius: var(--r-md); flex: none; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); font-weight: var(--fw-semi); } .worker-card__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); } .worker-card__name { font-weight: var(--fw-semi); font-size: var(--fs-h3); } .worker-card__meta { color: var(--ink-3); font-size: var(--fs-sm); } .worker-card__body { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .worker-card__attrs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } .worker-card__attr { display: flex; gap: var(--sp-1); color: var(--ink-2); } .worker-card__attr b { font-weight: var(--fw-semi); color: var(--ink); } .worker-card__foot { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); } /* skill rating meter (8-axis ضعيف→ممتاز) — quiet bars */ .rating { display: flex; align-items: center; gap: var(--sp-2); } .rating__track { display: flex; gap: 2px; } .rating__pip { width: 14px; height: 5px; border-radius: var(--r-pill); background: var(--line); } .rating__pip.on { background: var(--accent); } /* ---------------------------------------------------------------------------- 10. BUTTONS ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font: inherit; font-weight: var(--fw-semi); font-size: var(--fs-body); padding: var(--sp-2) var(--sp-4); height: 36px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; user-select: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn .ico { width: 16px; height: 16px; } .btn--primary { background: var(--accent); color: var(--ink-on-accent); } .btn--primary:hover { background: var(--accent-hover); } .btn--primary:active { background: var(--accent-press); } .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn--secondary:hover { background: var(--surface-2); border-color: var(--ink-3); } .btn--ghost { background: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--ink); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { background: var(--danger-hover); } .btn--danger-soft { background: var(--danger-soft); color: var(--danger); } .btn--danger-soft:hover { background: #f6dad7; } .btn--sm { height: 30px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); } .btn--icon { width: 36px; padding: 0; } .btn--icon.btn--sm { width: 30px; } .btn--block { width: 100%; } /* gated / approval-required action — visually marks §8 human-gate buttons */ .btn--gated { position: relative; } .btn--gated::after { content: "بانتظار اعتماد"; position: absolute; inset-block-start: -8px; inset-inline-start: 50%; transform: translateX(50%); font-size: 0.625rem; font-weight: var(--fw-semi); background: var(--warn); color: #fff; padding: 0 var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; opacity: 0; pointer-events: none; } /* ---------------------------------------------------------------------------- 11. FORMS — inputs, selects, labels, fields ------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } .field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); } .field__label .req { color: var(--danger); margin-inline-start: 2px; } .field__hint { font-size: var(--fs-xs); color: var(--ink-3); } .field__error { font-size: var(--fs-xs); color: var(--danger); } .input, .select, .textarea { font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); height: 38px; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .textarea { height: auto; min-height: 88px; padding: var(--sp-3); resize: vertical; line-height: var(--lh-body); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); } .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); } .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); } .input:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; } /* RTL select arrow on the inline-start (left in RTL) side */ .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left var(--sp-3) center; padding-inline-start: var(--sp-8); } /* input with a leading control / unit (e.g. SAR) — RTL aware */ .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: 0; } .input-group > :first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); } .input-group > :last-child { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); } .input-group .addon { display: inline-flex; align-items: center; padding-inline: var(--sp-3); background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; } .input-group .addon + .input { border-inline-start: 0; } .input-group .input + .addon { border-inline-start: 0; } /* checkbox / switch */ .switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; } .switch input { position: absolute; opacity: 0; } .switch .track { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--dur) var(--ease); flex: none; } .switch .track::after { content:""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: inset-inline-start var(--dur) var(--ease); } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::after { inset-inline-start: 19px; } .switch input:focus-visible + .track { box-shadow: var(--sh-focus); } /* segmented filter control (flow / view toggles) */ .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; gap: 2px; } .segmented button { font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); border: 0; background: transparent; color: var(--ink-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; height: 30px; } .segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); font-weight: var(--fw-semi); } /* toolbar / filter row */ .toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); } .toolbar .spacer { flex: 1; } /* ---------------------------------------------------------------------------- 12. DEFINITION LISTS (case / worker detail key-value rows) ------------------------------------------------------------------------- */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); align-items: baseline; } .kv dt { color: var(--ink-3); font-size: var(--fs-sm); } .kv dd { margin: 0; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); } .kv dd .num { font-weight: var(--fw-semi); } /* timeline (StateTransition audit trail) */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding-bottom: var(--sp-4); position: relative; } .timeline__rail { display: flex; flex-direction: column; align-items: center; } .timeline__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); margin-top: 3px; } .timeline__line { flex: 1; width: 2px; background: var(--line); margin-top: 2px; } .timeline__item:last-child .timeline__line { display: none; } .timeline__body { padding-bottom: var(--sp-2); } .timeline__title { font-weight: var(--fw-medium); font-size: var(--fs-sm); } .timeline__time { color: var(--ink-3); font-size: var(--fs-xs); font-family: var(--font-mono); } /* ---------------------------------------------------------------------------- 13. EMPTY STATES ------------------------------------------------------------------------- */ .empty { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--ink-3); } .empty__art { width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); display: grid; place-items: center; color: var(--ink-3); border: 1px solid var(--line); } .empty__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--ink-2); } .empty__text { font-size: var(--fs-sm); margin-top: var(--sp-2); max-width: 42ch; margin-inline: auto; } .empty__actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); justify-content: center; } /* ---------------------------------------------------------------------------- 14. INBOX LIST (WhatsApp leads) ------------------------------------------------------------------------- */ .inbox-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--dur) var(--ease); } .inbox-item:hover { background: var(--surface-2); } .inbox-item.is-unread { background: var(--accent-soft); } .inbox-item.is-unread .inbox-item__name { font-weight: var(--fw-bold); } .inbox-item__avatar { width: 38px; height: 38px; 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); flex: none; } .inbox-item__main { flex: 1; min-width: 0; } .inbox-item__row { display: flex; align-items: center; gap: var(--sp-2); } .inbox-item__name { font-weight: var(--fw-medium); font-size: var(--fs-body); } .inbox-item__time { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); } .inbox-item__preview { color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------------------------- 15. UTILITIES ------------------------------------------------------------------------- */ .u-label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3); } .u-label--latin { letter-spacing: .04em; text-transform: uppercase; } /* Latin-only — never on Arabic */ .u-muted { color: var(--ink-3); } .u-ink2 { color: var(--ink-2); } .u-right { text-align: end; } .u-center { text-align: center; } .u-nowrap { white-space: nowrap; } .u-flex { display: flex; align-items: center; gap: var(--sp-2); } .u-flex-col { display: flex; flex-direction: column; gap: var(--sp-2); } .u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .u-wrap { flex-wrap: wrap; } .u-grow { flex: 1; min-width: 0; } .u-divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-4) 0; } .u-vdivider { width: 1px; align-self: stretch; background: var(--line); } .u-hidden { display: none !important; } .u-mt-2{margin-top:var(--sp-2)} .u-mt-4{margin-top:var(--sp-4)} .u-mt-6{margin-top:var(--sp-6)} .u-mb-2{margin-bottom:var(--sp-2)} .u-mb-4{margin-bottom:var(--sp-4)} .u-mb-6{margin-bottom:var(--sp-6)} .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); } /* ---------------------------------------------------------------------------- 16. RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width: 960px) { .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .sidebar { display: none; } /* swap for an off-canvas drawer in the template */ .grid-2, .grid-3 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .main { padding: var(--sp-4); } .topbar__search { display: none; } .stats { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------------------------- 17. MOTION — one calm system; respect reduced-motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }