/* ============================================================ بصماتي — UI COMPONENT LIBRARY (ui.css) World-class dark RTL component system. Builds ON TOP of theme.css. Link order in : theme.css (tokens + base + .glass/.btn primitives) ui.css (this file — the full component library) Then: theme.js, ui.js. Quality bar: Linear / Vercel / Stripe dark UI. Depth via layered gradients + luminance steps + soft shadows. RTL-correct (logical properties). Fully responsive (1440 + 390px). prefers-reduced-motion respected (theme.css carries the global guard). TABLE OF CONTENTS 0. Extended tokens (elevation ladder, semantic states, scale, motion) 1. Buttons (variants / sizes / loading / icon / group) 2. Form controls (field, input, select, textarea, slider, switch, checkbox, radio, segmented inputs) 3. Card (.u-card glass + variants) + Stat tile 4. Data table (sortable, sticky header, responsive→cards) 5. Modal + 2-step confirm 6. Tabs + Segmented control 7. Toast 8. Skeleton loaders 9. Empty state 10. Status pill 11. Notification bell 12. Command palette (⌘K) 13. File dropzone (wardiaty import) 14. Coverage heatmap strip 15. Onboarding tour 16. Misc helpers (divider, kbd, tooltip, progress ring, badge) ============================================================ */ /* ── 0. EXTENDED TOKENS ──────────────────────────────────────── */ :root { /* elevation ladder — luminance steps, NOT shadows */ --surface-0:#070A12; /* page / rail (darkest) */ --surface-1:#0C111E; /* contextual panel */ --surface-2:#11182A; /* content area */ --surface-3:#161E33; /* cards / rows */ --surface-4:#1C2740; /* hover / raised */ /* semantic state colors (used at 12-15% bg + 100% text) */ --ok:#22C55E; --warn:#F59E0B; --err:#EF4444; --info:#3B82F6; --lock:#5A8BF0; --ok-bg:rgba(34,197,94,.13); --warn-bg:rgba(245,158,11,.13); --err-bg:rgba(239,68,68,.13); --info-bg:rgba(59,130,246,.13); --lock-bg:rgba(90,139,240,.13); --gray-bg:rgba(255,255,255,.06); /* spacing scale (4px base) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; /* density */ --row-h:52px; --card-pad:24px; /* radii as tokens */ --r-btn:13px; --r-card:20px; --r-chip:999px; --r-tile:14px; --r-input:11px; /* motion durations */ --t-instant:90ms; --t-state:160ms; --t-screen:220ms; --t-layout:280ms; } .compact { --row-h:36px; --card-pad:16px; } .comfortable { --row-h:52px; --card-pad:24px; } /* a11y: consistent focus ring for keyboard users only */ .u-focusable:focus-visible, .u-btn:focus-visible, .u-tab:focus-visible, .u-seg-opt:focus-visible, .u-switch:focus-visible, .u-check:focus-visible, .u-pill:focus-visible, .u-bell-btn:focus-visible, .u-input:focus-visible, .u-row-act:focus-visible { outline: 2px solid color-mix(in oklab, var(--orange) 60%, transparent); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════ 1. BUTTONS — .u-btn (+ .u-btn--primary / --ghost / --danger / --subtle) ════════════════════════════════════════════════════════════ */ .u-btn { font: 600 14.5px/1 "IBM Plex Sans Arabic", system-ui, sans-serif; border: 1px solid transparent; cursor: pointer; border-radius: var(--r-btn); padding: 12px 22px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; color: var(--fg); background: var(--surface-3); transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease), transform var(--t-instant) var(--ease), opacity var(--t-state); } .u-btn svg { width: 18px; height: 18px; flex: none; } .u-btn:active { transform: scale(.97); } .u-btn:disabled, .u-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* primary — orange gradient + sheen */ .u-btn--primary { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); box-shadow: 0 10px 26px -14px var(--glow-o), inset 0 1px 0 rgba(255,255,255,.24); } .u-btn--primary::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.4) 50%, transparent 68%); transform: translateX(130%); transition: transform .8s var(--ease); } .u-btn--primary:hover { background: linear-gradient(135deg, #FF9148, var(--orange)); box-shadow: 0 18px 40px -14px var(--glow-o), inset 0 1px 0 rgba(255,255,255,.32); } .u-btn--primary:hover::after { transform: translateX(-130%); } /* ghost — chip bg + line */ .u-btn--ghost { color: var(--fg); background: var(--chip); border-color: var(--line); } .u-btn--ghost:hover { background: var(--surface-4); border-color: var(--fg-mute); } /* subtle — bare, text-only until hover */ .u-btn--subtle { color: var(--fg-soft); background: transparent; border-color: transparent; } .u-btn--subtle:hover { color: var(--fg); background: var(--chip); } /* danger */ .u-btn--danger { color: #fff; background: linear-gradient(135deg, var(--err), #C12B2B); box-shadow: 0 10px 26px -14px rgba(239,68,68,.5), inset 0 1px 0 rgba(255,255,255,.2); } .u-btn--danger:hover { background: linear-gradient(135deg, #F4564E, var(--err)); } /* sizes */ .u-btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; gap: 6px; } .u-btn--lg { padding: 15px 28px; font-size: 16px; border-radius: 14px; } .u-btn--icon { padding: 0; width: 42px; height: 42px; border-radius: 12px; } .u-btn--icon.u-btn--sm { width: 34px; height: 34px; } .u-btn--block { display: flex; width: 100%; } /* loading state — set aria-busy="true" */ .u-btn[aria-busy="true"] { color: transparent !important; pointer-events: none; } .u-btn[aria-busy="true"]::before { content:""; position:absolute; inset:0; margin:auto; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; } .u-btn--ghost[aria-busy="true"]::before, .u-btn--subtle[aria-busy="true"]::before { border-color: var(--line); border-top-color: var(--fg); } /* button group (segmented row of buttons) */ .u-btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════ 2. FORM CONTROLS ════════════════════════════════════════════════════════════ */ .u-field { display: grid; gap: 7px; text-align: start; } .u-label { font: 600 12.5px/1.3 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); display: flex; align-items: center; gap: 6px; } .u-label .u-req { color: var(--orange); font-weight: 700; } .u-hint { font: 400 11.5px/1.5 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); } .u-input, .u-select, .u-textarea { font: 400 14px/1.5 "IBM Plex Sans Arabic", sans-serif; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-input); padding: 11px 14px; width: 100%; outline: none; transition: border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease), background var(--t-state) var(--ease); } .u-textarea { resize: vertical; min-height: 84px; line-height: 1.7; } .u-input::placeholder, .u-textarea::placeholder { color: var(--fg-mute); } .u-input:hover, .u-select:hover, .u-textarea:hover { border-color: var(--line-2); background: var(--surface-3); } .u-input:focus, .u-select:focus, .u-textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--glow-o); background: var(--surface-3); } /* input with leading icon / affix */ .u-input-wrap { position: relative; display: flex; align-items: center; } .u-input-wrap .u-input { padding-inline-start: 40px; } .u-input-wrap .u-input-icon { position: absolute; inset-inline-start: 13px; inset-block: 0; display: grid; place-items: center; color: var(--fg-mute); pointer-events: none; } .u-input-wrap .u-input-icon svg { width: 17px; height: 17px; } /* validation states */ .u-input.is-error, .u-select.is-error, .u-textarea.is-error { border-color: var(--err); } .u-input.is-error:focus { box-shadow: 0 0 0 3px var(--err-bg); } .u-input.is-ok { border-color: color-mix(in oklab, var(--ok) 60%, var(--line)); } .u-err-msg { font: 500 11.5px/1.4 "IBM Plex Sans Arabic", sans-serif; color: var(--err); display: flex; align-items: center; gap: 5px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--t-state) var(--ease), opacity var(--t-state) var(--ease); } .u-err-msg.show { max-height: 40px; opacity: 1; } /* select with custom arrow (logical: arrow on the start/left side in RTL) */ .u-select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C7589' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 13px center; padding-inline-start: 36px; } /* slider */ .u-slider { display: grid; gap: 8px; } .u-slider-top { display: flex; justify-content: space-between; align-items: baseline; } .u-slider-val { font: 700 14px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--orange-2); } .u-range { -webkit-appearance: none; appearance: none; height: 5px; width: 100%; border-radius: 99px; background: var(--line); cursor: pointer; outline: none; } .u-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.55), 0 0 0 0 var(--glow-o); transition: box-shadow var(--t-state); } .u-range:hover::-webkit-slider-thumb, .u-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 1px 6px rgba(0,0,0,.55), 0 0 0 6px var(--glow-o); } .u-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; } /* switch */ .u-switch { --w: 44px; --h: 26px; position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 13.5px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); -webkit-tap-highlight-color: transparent; } .u-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .u-switch .u-switch-track { width: var(--w); height: var(--h); border-radius: 99px; flex: none; background: var(--surface-4); border: 1px solid var(--line); position: relative; transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease); } .u-switch .u-switch-track::after { content:""; position: absolute; top: 50%; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg-mute); transform: translateY(-50%); transition: transform var(--t-state) var(--ease-snap), background var(--t-state) var(--ease); } .u-switch input:checked + .u-switch-track { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); border-color: transparent; } .u-switch input:checked + .u-switch-track::after { background: #fff; transform: translateY(-50%) translateX(calc((var(--w) - var(--h)) * -1)); /* RTL: move toward start */ } :root[dir="ltr"] .u-switch input:checked + .u-switch-track::after, [dir="ltr"] .u-switch input:checked + .u-switch-track::after { transform: translateY(-50%) translateX(calc(var(--w) - var(--h))); } /* checkbox + radio */ .u-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: 500 13.5px/1.4 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); -webkit-tap-highlight-color: transparent; } .u-check input { position: absolute; opacity: 0; width: 0; height: 0; } .u-check .u-box { width: 19px; height: 19px; flex: none; border-radius: 6px; border: 1.6px solid var(--line); background: var(--surface-2); display: grid; place-items: center; transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease); } .u-check .u-box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.4); transition: opacity var(--t-instant), transform var(--t-state) var(--ease-snap); color: #fff; } .u-check input:checked + .u-box { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); border-color: transparent; } .u-check input:checked + .u-box svg { opacity: 1; transform: scale(1); } .u-check--radio .u-box { border-radius: 50%; } .u-check--radio .u-box::after { content:""; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.3); transition: opacity var(--t-instant), transform var(--t-state) var(--ease-snap); } .u-check--radio input:checked + .u-box::after { opacity: 1; transform: scale(1); } .u-check:hover .u-box { border-color: var(--fg-mute); } /* ════════════════════════════════════════════════════════════ 3. CARD (.u-card — the بصماتي standard glass card) + STAT TILE ════════════════════════════════════════════════════════════ */ .u-card { position: relative; border-radius: var(--r-card); padding: var(--card-pad); background: radial-gradient(130% 90% at 100% 0%, color-mix(in oklab, var(--orange) 9%, transparent), transparent 52%), radial-gradient(130% 95% at 0% 100%, color-mix(in oklab, var(--blue) 8%, transparent), transparent 56%), linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 88%, transparent), color-mix(in srgb, var(--surface-2) 92%, transparent)); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; isolation: isolate; transition: transform var(--t-layout) var(--ease), border-color var(--t-layout) var(--ease), box-shadow var(--t-layout) var(--ease); } /* grain texture */ .u-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; background-image: var(--grain); background-size: 170px 170px; opacity: .055; mix-blend-mode: overlay; transition: opacity var(--t-layout) var(--ease); } .u-card > * { position: relative; z-index: 1; } /* glowing gradient border on hover */ .u-card--hover::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 36%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--blue) 36%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--t-layout) var(--ease); pointer-events: none; z-index: 2; } .u-card--hover:hover { transform: translateY(-5px); box-shadow: 0 24px 60px -28px rgba(0,0,0,.6), var(--shadow); } .u-card--hover:hover::before { opacity: 1; } .u-card--hover:hover::after { opacity: .09; } /* flat / quiet variant (fewer-boxes: no border, pure luminance) */ .u-card--quiet { background: var(--surface-2); border-color: transparent; box-shadow: none; } .u-card--pad-lg { --card-pad: 32px; } .u-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s4); } .u-card-title { font: 700 16px/1.3 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); } .u-card-sub { font: 400 12.5px/1.5 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); margin-top: 2px; } /* STAT TILE — 3-zone: label / big number / delta */ .u-stat { position: relative; border-radius: var(--r-tile); padding: 18px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 70%, transparent), color-mix(in srgb, var(--surface-2) 80%, transparent)); border: 1px solid var(--line-2); overflow: hidden; isolation: isolate; display: grid; gap: 6px; align-content: start; transition: border-color var(--t-state) var(--ease), transform var(--t-state) var(--ease); } .u-stat::before { content:""; position:absolute; inset-block:0; inset-inline-end:0; width:46%; background: radial-gradient(120% 120% at 100% 0%, var(--glow-o), transparent 60%); opacity: .5; pointer-events:none; z-index:0; } .u-stat--blue::before { background: radial-gradient(120% 120% at 100% 0%, var(--glow-b), transparent 60%); } .u-stat > * { position: relative; z-index: 1; } .u-stat:hover { transform: translateY(-2px); border-color: var(--line); } .u-stat-label { font: 600 12px/1.2 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); letter-spacing: .01em; } .u-stat-num { font: 700 28px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); font-feature-settings: "tnum"; } .u-stat-icon { position: absolute; inset-block-start: 16px; inset-inline-start: 18px; z-index:1; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--line); color: var(--orange-2); } .u-stat-icon svg { width: 17px; height: 17px; } .u-delta { display: inline-flex; align-items: center; gap: 4px; align-self: start; font: 700 11.5px/1 "IBM Plex Sans Arabic", sans-serif; padding: 4px 9px; border-radius: 99px; } .u-delta--up { color: var(--ok); background: var(--ok-bg); } .u-delta--down { color: var(--err); background: var(--err-bg); } .u-delta--flat { color: var(--fg-mute); background: var(--gray-bg); } /* ════════════════════════════════════════════════════════════ 4. DATA TABLE — identity column RIGHTMOST (RTL), actions slide from LEFT ════════════════════════════════════════════════════════════ */ .u-table-wrap { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .u-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .u-table { width: 100%; border-collapse: collapse; text-align: start; font: 400 13.5px/1.4 "IBM Plex Sans Arabic", sans-serif; } .u-table thead th { position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--surface-1) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12px/1.2 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); text-align: start; padding: 0 16px; height: 44px; white-space: nowrap; border-bottom: 1px solid var(--line); user-select: none; } .u-table th.is-sortable { cursor: pointer; transition: color var(--t-state); } .u-table th.is-sortable:hover { color: var(--fg-soft); } .u-table th.is-sortable .u-sort-ico { display: inline-block; width: 0; height: 0; margin-inline-start: 5px; border-inline: 4px solid transparent; vertical-align: middle; opacity: .35; } .u-table th[aria-sort="ascending"] .u-sort-ico { border-bottom: 5px solid var(--orange); opacity: 1; } .u-table th[aria-sort="descending"] .u-sort-ico { border-top: 5px solid var(--orange); opacity: 1; } .u-table tbody td { padding: 0 16px; height: var(--row-h); border-bottom: 1px solid var(--line-2); color: var(--fg-soft); white-space: nowrap; } .u-table tbody tr { transition: background var(--t-state) var(--ease); } .u-table tbody tr:hover { background: var(--surface-3); } .u-table tbody tr:last-child td { border-bottom: none; } /* identity cell (rightmost in RTL) — emphasized */ .u-table .u-cell-id { color: var(--fg); font-weight: 600; } .u-cell-id-sub { display: block; font-size: 11px; color: var(--fg-mute); font-weight: 400; margin-top: 1px; } /* numeric cells */ .u-table .u-cell-num { font-feature-settings: "tnum"; color: var(--fg); } /* row actions — slide in from LEFT (RTL end) on hover */ .u-row-acts { display: flex; gap: 4px; justify-content: flex-start; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-state), transform var(--t-state) var(--ease); } @media (hover: hover) { .u-table tbody tr:hover .u-row-acts { opacity: 1; transform: none; } } @media (hover: none) { .u-row-acts { opacity: 1; } } .u-row-act { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: var(--chip); color: var(--fg-soft); cursor: pointer; display: grid; place-items: center; transition: background var(--t-state), color var(--t-state); } .u-row-act svg { width: 15px; height: 15px; } .u-row-act:hover { background: var(--surface-4); color: var(--fg); } .u-row-act--danger:hover { background: var(--err-bg); color: var(--err); } /* checkbox column far-right (RTL start) */ .u-table .u-col-check { width: 44px; } /* responsive → stacked cards on mobile */ @media (max-width: 760px) { .u-table--responsive thead { display: none; } .u-table--responsive, .u-table--responsive tbody, .u-table--responsive tr, .u-table--responsive td { display: block; width: 100%; } .u-table--responsive tr { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; padding: 6px 4px; background: var(--surface-3); } .u-table--responsive tr:hover { background: var(--surface-3); } .u-table--responsive td { height: auto; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; } .u-table--responsive td:last-child { border-bottom: none; } .u-table--responsive td::before { content: attr(data-label); font: 600 12px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); flex: none; } .u-table--responsive .u-row-acts { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════ 5. MODAL + 2-STEP CONFIRM ════════════════════════════════════════════════════════════ */ .u-modal-backdrop { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-state) var(--ease); } .u-modal-backdrop.on { display: flex; opacity: 1; } .u-modal { width: min(440px, 100%); max-height: 88vh; overflow: auto; background: linear-gradient(180deg, var(--surface-3), var(--surface-1)); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); padding: 26px 24px; direction: rtl; transform: scale(.96); opacity: 0; transition: transform var(--t-screen) var(--ease-snap), opacity var(--t-screen) var(--ease); } .u-modal--lg { width: min(640px, 100%); } .u-modal-backdrop.on .u-modal { transform: scale(1); opacity: 1; } .u-modal-backdrop.closing { opacity: 0; } .u-modal-backdrop.closing .u-modal { transform: scale(.97); opacity: 0; } .u-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .u-modal-title { font: 700 19px/1.3 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); } .u-modal-x { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--chip); color: var(--fg-mute); cursor: pointer; display: grid; place-items: center; flex: none; transition: background var(--t-state), color var(--t-state); } .u-modal-x:hover { background: var(--surface-4); color: var(--fg); } .u-modal-x svg { width: 16px; height: 16px; } .u-modal-body { font: 400 14px/1.7 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); } .u-modal-foot { display: flex; gap: 10px; justify-content: flex-start; margin-top: 22px; } .u-modal-foot .u-btn { flex: 1; } .u-modal-foot--end { justify-content: flex-end; } .u-modal-foot--end .u-btn { flex: none; } /* 2-step confirm button — flips to "يؤكد؟" red for 2s */ .u-confirm { position: relative; } .u-confirm.is-arming { background: var(--err) !important; color: #fff !important; border-color: transparent !important; animation: uConfirmPulse 1.6s ease-in-out infinite; } @keyframes uConfirmPulse { 0%,100%{box-shadow:0 0 0 0 var(--err-bg)} 50%{box-shadow:0 0 0 5px transparent} } /* ════════════════════════════════════════════════════════════ 6. TABS + SEGMENTED CONTROL ════════════════════════════════════════════════════════════ */ .u-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line-2); position: relative; } .u-tab { position: relative; z-index: 1; border: none; cursor: pointer; background: transparent; font: 600 13.5px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); padding: 9px 18px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; transition: color var(--t-state) var(--ease); white-space: nowrap; } .u-tab svg { width: 16px; height: 16px; } .u-tab[aria-selected="true"] { color: var(--fg); } .u-tab:hover { color: var(--fg-soft); } /* sliding active indicator (positioned by ui.js) */ .u-tabs-ind { position: absolute; top: 4px; bottom: 4px; z-index: 0; border-radius: 9px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform var(--t-screen) var(--ease), width var(--t-screen) var(--ease); pointer-events: none; } /* segmented control — same skeleton, full-bleed option used inline */ .u-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-input); background: var(--surface-2); border: 1px solid var(--line-2); position: relative; } .u-seg--block { display: flex; width: 100%; } .u-seg--block .u-seg-opt { flex: 1; justify-content: center; } .u-seg-opt { position: relative; z-index: 1; border: none; cursor: pointer; background: transparent; font: 600 13px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); padding: 8px 16px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-state) var(--ease); } .u-seg-opt[aria-pressed="true"], .u-seg-opt.is-active { color: var(--fg); } .u-seg-ind { position: absolute; top: 4px; bottom: 4px; z-index: 0; border-radius: 8px; background: rgba(255,255,255,.08); transition: transform var(--t-screen) var(--ease), width var(--t-screen) var(--ease); pointer-events: none; } /* tab panels */ .u-tabpanel { animation: fadeUp var(--t-screen) var(--ease) both; } .u-tabpanel[hidden] { display: none; } /* ════════════════════════════════════════════════════════════ 7. TOAST — stack top-end (RTL start = right), slide from RIGHT ════════════════════════════════════════════════════════════ */ .u-toast-stack { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 9600; display: flex; flex-direction: column; gap: 8px; max-width: 360px; width: calc(100% - 32px); pointer-events: none; direction: rtl; } .u-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 13px; background: linear-gradient(180deg, var(--surface-3), var(--surface-1)); border: 1px solid var(--line); border-inline-start: 3px solid var(--info); box-shadow: 0 16px 40px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); color: var(--fg-soft); font: 500 13px/1.5 "IBM Plex Sans Arabic", sans-serif; transform: translateX(-120%); opacity: 0; transition: transform 180ms var(--ease-snap), opacity 180ms var(--ease); } :root[dir="ltr"] .u-toast, [dir="ltr"] .u-toast { transform: translateX(120%); } .u-toast.show { transform: none; opacity: 1; } .u-toast.hide { transform: translateX(-120%); opacity: 0; transition-duration: 140ms; } :root[dir="ltr"] .u-toast.hide, [dir="ltr"] .u-toast.hide { transform: translateX(120%); } .u-toast-ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; margin-top: 1px; } .u-toast-ico svg { width: 18px; height: 18px; } .u-toast-body { flex: 1; min-width: 0; } .u-toast-title { font-weight: 700; color: var(--fg); display: block; } .u-toast-x { flex: none; background: transparent; border: none; color: var(--fg-mute); cursor: pointer; padding: 2px; border-radius: 6px; transition: color var(--t-state); } .u-toast-x:hover { color: var(--fg); } .u-toast-x svg { width: 14px; height: 14px; } .u-toast--ok { border-inline-start-color: var(--ok); } .u-toast--ok .u-toast-ico { color: var(--ok); } .u-toast--warn { border-inline-start-color: var(--warn); } .u-toast--warn .u-toast-ico { color: var(--warn); } .u-toast--err { border-inline-start-color: var(--err); } .u-toast--err .u-toast-ico { color: var(--err); } .u-toast--info .u-toast-ico { color: var(--info); } /* ════════════════════════════════════════════════════════════ 8. SKELETON — shimmer sweep RIGHT→LEFT (RTL) ════════════════════════════════════════════════════════════ */ .u-sk { position: relative; overflow: hidden; border-radius: 8px; background: var(--surface-3); } .u-sk::after { content:""; position: absolute; inset: 0; background: linear-gradient(270deg, transparent, rgba(255,255,255,.06) 45%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.06) 55%, transparent); transform: translateX(-100%); animation: uShimmer 1.4s linear infinite; } @keyframes uShimmer { to { transform: translateX(100%); } } .u-sk--text { height: 12px; border-radius: 6px; margin: 5px 0; } .u-sk--title { height: 20px; width: 50%; border-radius: 7px; } .u-sk--line-60 { width: 60%; } .u-sk--line-80 { width: 80%; } .u-sk--line-40 { width: 40%; } .u-sk--circle { border-radius: 50%; } .u-sk--btn { height: 42px; width: 120px; border-radius: 13px; } .u-sk--row { height: var(--row-h); border-radius: 10px; margin-bottom: 8px; } .u-sk--card { height: 120px; border-radius: var(--r-card); } .u-sk-stack > * + * { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .u-sk::after { animation: none; opacity: .04; transform: none; } } /* ════════════════════════════════════════════════════════════ 9. EMPTY STATE ════════════════════════════════════════════════════════════ */ .u-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 48px 24px; color: var(--fg-soft); } .u-empty-art { width: 96px; height: 96px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 24px; background: radial-gradient(120% 120% at 30% 0%, var(--glow-o), transparent 60%), var(--surface-2); border: 1px solid var(--line-2); color: var(--orange-2); position: relative; overflow: hidden; } .u-empty-art::after { content:""; position:absolute; inset:0; background-image: var(--grain); background-size: 120px; opacity:.06; mix-blend-mode: overlay; } .u-empty-art svg, .u-empty-art img { width: 46px; height: 46px; position: relative; z-index: 1; } .u-empty-title { font: 700 16px/1.3 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); } .u-empty-text { font: 400 13px/1.6 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); max-width: 32ch; } .u-empty .u-btn { margin-top: 10px; } /* ════════════════════════════════════════════════════════════ 10. STATUS PILL — 5 states, crossfade 200ms on flip ════════════════════════════════════════════════════════════ */ .u-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-radius: 999px; font: 700 11.5px/1 "IBM Plex Sans Arabic", sans-serif; transition: background var(--t-screen) var(--ease), color var(--t-screen) var(--ease); white-space: nowrap; } .u-pill::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px 0 currentColor; } .u-pill--ok { color: var(--ok); background: var(--ok-bg); } .u-pill--warn { color: var(--warn); background: var(--warn-bg); } .u-pill--err { color: var(--err); background: var(--err-bg); } .u-pill--off { color: var(--fg-mute); background: var(--gray-bg); } .u-pill--lock { color: var(--lock); background: var(--lock-bg); } .u-pill--info { color: var(--info); background: var(--info-bg); } .u-pill--lg { height: 28px; font-size: 12.5px; padding: 0 13px; } /* badge (count / tag, no dot) */ .u-badge { display: inline-flex; align-items: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font: 700 10.5px/1 "IBM Plex Sans Arabic", sans-serif; background: var(--orange); color: #fff; justify-content: center; } .u-badge--soft { background: var(--chip); color: var(--fg-soft); border: 1px solid var(--line); } /* ════════════════════════════════════════════════════════════ 11. NOTIFICATION BELL ════════════════════════════════════════════════════════════ */ .u-bell { position: relative; } .u-bell-btn { position: relative; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--chip); color: var(--fg-soft); cursor: pointer; display: grid; place-items: center; transition: background var(--t-state), color var(--t-state), border-color var(--t-state); } .u-bell-btn:hover { background: var(--surface-4); color: var(--fg); border-color: var(--line-2); } .u-bell-btn svg { width: 19px; height: 19px; } .u-bell-dot { position: absolute; inset-block-start: -3px; inset-inline-start: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font: 700 10px/18px "IBM Plex Sans Arabic", sans-serif; text-align: center; border: 2px solid var(--surface-0); box-shadow: 0 0 0 0 rgba(239,68,68,.4); } .u-bell-dot.is-pulse { animation: uBellPulse 2.4s ease-out infinite; } @keyframes uBellPulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} } .u-bell-menu { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0; width: min(340px, 90vw); max-height: 380px; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface-3), var(--surface-1)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85); overflow: hidden; z-index: 200; transform-origin: top; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); direction: rtl; } .u-bell-menu.on { opacity: 1; transform: none; pointer-events: auto; } .u-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .u-bell-head h4 { font: 700 14px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); } .u-bell-head button { background: none; border: none; color: var(--orange-2); cursor: pointer; font: 600 11.5px "IBM Plex Sans Arabic", sans-serif; } .u-bell-list { overflow-y: auto; flex: 1; } .u-noti { display: grid; gap: 3px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); transition: background var(--t-state); cursor: pointer; } .u-noti:hover { background: var(--surface-3); } .u-noti.is-unread { border-inline-start: 3px solid var(--info); background: color-mix(in srgb, var(--info-bg) 50%, transparent); } .u-noti-title { font: 600 13px/1.4 "IBM Plex Sans Arabic", sans-serif; color: var(--fg); } .u-noti-text { font: 400 12px/1.5 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); } .u-noti-time { font: 400 10.5px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); } /* ════════════════════════════════════════════════════════════ 12. COMMAND PALETTE (⌘K) ════════════════════════════════════════════════════════════ */ .u-cmdk-backdrop { position: fixed; inset: 0; z-index: 9700; display: none; align-items: flex-start; justify-content: center; padding: 20vh 16px 16px; background: rgba(2,4,8,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity var(--t-state) var(--ease); } .u-cmdk-backdrop.on { display: flex; opacity: 1; } .u-cmdk { width: min(560px, 100%); background: color-mix(in srgb, var(--surface-1) 94%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; direction: rtl; transform: scale(.96); opacity: 0; transition: transform 120ms var(--ease-snap), opacity 120ms var(--ease); } .u-cmdk-backdrop.on .u-cmdk { transform: scale(1); opacity: 1; } .u-cmdk-search { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); } .u-cmdk-search svg { width: 18px; height: 18px; color: var(--fg-mute); flex: none; } .u-cmdk-input { flex: 1; background: transparent; border: none; outline: none; padding: 0; font: 400 15.5px/1.4 "IBM Plex Sans Arabic", sans-serif; color: var(--fg); } .u-cmdk-input::placeholder { color: var(--fg-mute); } .u-cmdk-kbd { flex: none; } .u-cmdk-results { max-height: 50vh; overflow-y: auto; padding: 6px; } .u-cmdk-group-label { font: 600 11px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); padding: 12px 12px 6px; letter-spacing: .02em; } .u-cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; cursor: pointer; color: var(--fg-soft); position: relative; transition: background var(--t-instant); } .u-cmdk-item .u-cmdk-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--line-2); color: var(--fg-soft); } .u-cmdk-item .u-cmdk-ico svg { width: 16px; height: 16px; } .u-cmdk-item .u-cmdk-text { flex: 1; min-width: 0; } .u-cmdk-item .u-cmdk-text b { display: block; font: 600 14px/1.3 "IBM Plex Sans Arabic", sans-serif; color: var(--fg); } .u-cmdk-item .u-cmdk-text small { font: 400 11.5px/1.3 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); } .u-cmdk-item.is-active { background: var(--surface-3); } .u-cmdk-item.is-active::before { content:""; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 3px; border-radius: 2px; background: var(--orange); } .u-cmdk-item.is-active .u-cmdk-ico { color: var(--orange-2); border-color: color-mix(in oklab, var(--orange) 30%, var(--line)); } .u-cmdk-empty { padding: 36px 16px; text-align: center; color: var(--fg-mute); font: 400 13.5px/1.6 "IBM Plex Sans Arabic", sans-serif; } .u-cmdk-foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line-2); font: 400 11px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); } .u-cmdk-foot .u-cmdk-hint { display: inline-flex; align-items: center; gap: 5px; } /* ════════════════════════════════════════════════════════════ 13. FILE DROPZONE (wardiaty import) ════════════════════════════════════════════════════════════ */ .u-dropzone { position: relative; border: 1.5px dashed var(--line); border-radius: 16px; background: var(--surface-2); padding: 28px 24px; text-align: center; cursor: pointer; display: grid; justify-items: center; gap: 8px; color: var(--fg-soft); transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease), transform var(--t-state); } .u-dropzone:hover { border-color: var(--fg-mute); background: var(--surface-3); } .u-dropzone.is-drag { border-style: solid; border-color: var(--orange); background: color-mix(in srgb, var(--glow-o) 30%, var(--surface-2)); transform: scale(1.01); box-shadow: 0 0 0 4px var(--glow-o); } .u-dropzone-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--line); color: var(--orange-2); margin-bottom: 4px; } .u-dropzone-ico svg { width: 24px; height: 24px; } .u-dropzone-title { font: 700 14.5px/1.3 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); } .u-dropzone-sub { font: 400 12px/1.5 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); } .u-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* result row after drop */ .u-dropfile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line-2); margin-top: 10px; animation: fadeUp var(--t-screen) var(--ease) both; } .u-dropfile-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; flex: none; } .u-dropfile-ico svg { width: 18px; height: 18px; } .u-dropfile-meta { flex: 1; min-width: 0; text-align: start; } .u-dropfile-name { font: 600 13px/1.3 "IBM Plex Sans Arabic", sans-serif; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-dropfile-stats { font: 400 11.5px/1.4 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); display: flex; gap: 10px; } /* ════════════════════════════════════════════════════════════ 14. COVERAGE HEATMAP STRIP ════════════════════════════════════════════════════════════ */ .u-heat { display: grid; gap: 8px; } .u-heat-row { display: flex; gap: 4px; align-items: stretch; } .u-heat-cell { flex: 1; min-width: 0; border-radius: 7px; height: 46px; position: relative; display: grid; place-items: center; overflow: hidden; cursor: default; background: var(--surface-3); border: 1px solid var(--line-2); transition: transform var(--t-state) var(--ease), filter var(--t-state); } .u-heat-cell:hover { transform: translateY(-2px); filter: brightness(1.1); } .u-heat-cell .u-heat-day { font: 600 10px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); position: absolute; inset-block-start: 4px; } .u-heat-cell .u-heat-val { font: 700 14px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); margin-top: 8px; } .u-heat-cell--ok { background: color-mix(in srgb, var(--ok-bg) 80%, var(--surface-3)); border-color: color-mix(in oklab, var(--ok) 30%, var(--line-2)); } .u-heat-cell--ok .u-heat-val { color: var(--ok); } .u-heat-cell--warn { background: color-mix(in srgb, var(--warn-bg) 80%, var(--surface-3)); border-color: color-mix(in oklab, var(--warn) 30%, var(--line-2)); } .u-heat-cell--warn .u-heat-val { color: var(--warn); } .u-heat-cell--low { background: color-mix(in srgb, var(--err-bg) 80%, var(--surface-3)); border-color: color-mix(in oklab, var(--err) 30%, var(--line-2)); } .u-heat-cell--low .u-heat-val { color: var(--err); } .u-heat-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 500 11.5px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); } .u-heat-legend span { display: inline-flex; align-items: center; gap: 6px; } .u-heat-legend i { width: 10px; height: 10px; border-radius: 3px; } /* ════════════════════════════════════════════════════════════ 15. ONBOARDING TOUR ════════════════════════════════════════════════════════════ */ .u-tour-mask { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--t-state) var(--ease); } .u-tour-mask.on { opacity: 1; pointer-events: auto; } /* highlight cut-out — the anchored element is lifted above the mask */ .u-tour-target { position: relative; z-index: 9510 !important; box-shadow: 0 0 0 4px var(--orange), 0 0 0 9px var(--glow-o), 0 0 40px 4px rgba(245,133,58,.3); border-radius: 12px; transition: box-shadow var(--t-screen) var(--ease); } .u-tour-pop { position: fixed; z-index: 9520; width: min(300px, 88vw); direction: rtl; background: linear-gradient(180deg, var(--surface-3), var(--surface-1)); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85); animation: uPop var(--t-screen) var(--ease-snap) both; } @keyframes uPop { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } } .u-tour-art { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 12px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 0%, var(--glow-o), transparent 60%), var(--surface-2); border: 1px solid var(--line-2); color: var(--orange-2); } .u-tour-art svg, .u-tour-art img { width: 28px; height: 28px; } .u-tour-title { font: 700 16px/1.3 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); margin-bottom: 5px; } .u-tour-text { font: 400 13px/1.6 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-soft); margin-bottom: 16px; } .u-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .u-tour-dots { display: flex; gap: 6px; } .u-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background var(--t-state), width var(--t-state); } .u-tour-dots i.on { width: 16px; border-radius: 99px; background: var(--orange); } /* ════════════════════════════════════════════════════════════ 16. MISC HELPERS ════════════════════════════════════════════════════════════ */ .u-divider { height: 1px; background: var(--line-2); border: none; margin: var(--s4) 0; } .u-divider--glow { background: linear-gradient(90deg, transparent, var(--line), transparent); } .u-kbd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; min-width: 22px; justify-content: center; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); border-bottom-width: 2px; font: 600 11px/1.4 "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg-soft); } /* tooltip — data-tip="text", wrap in .u-tip */ .u-tip { position: relative; } .u-tip::after { content: attr(data-tip); position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%) translateY(4px); white-space: nowrap; pointer-events: none; background: var(--surface-4); color: var(--fg); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; font: 500 11.5px/1 "IBM Plex Sans Arabic", sans-serif; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); opacity: 0; z-index: 100; transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); } :root[dir="ltr"] .u-tip::after, [dir="ltr"] .u-tip::after { transform: translateX(-50%) translateY(4px); } .u-tip:hover::after { opacity: 1; transform: translateX(50%) translateY(0); } :root[dir="ltr"] .u-tip:hover::after, [dir="ltr"] .u-tip:hover::after { transform: translateX(-50%) translateY(0); } /* progress ring — set --pct (0..100) inline; pairs with a centered label */ .u-ring { --pct: 0; --sz: 72px; --tw: 7px; width: var(--sz); height: var(--sz); position: relative; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--orange) calc(var(--pct) * 1%), var(--line) 0); transition: --pct var(--t-layout) var(--ease); } .u-ring::before { content:""; position: absolute; inset: var(--tw); border-radius: 50%; background: var(--surface-1); } .u-ring--ok { background: conic-gradient(var(--ok) calc(var(--pct) * 1%), var(--line) 0); } .u-ring--warn { background: conic-gradient(var(--warn) calc(var(--pct) * 1%), var(--line) 0); } .u-ring-label { position: relative; z-index: 1; text-align: center; } .u-ring-label b { font: 700 18px/1 "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--fg); } .u-ring-label small { display: block; font: 500 10px/1 "IBM Plex Sans Arabic", sans-serif; color: var(--fg-mute); margin-top: 2px; } @property --pct { syntax: ''; inherits: false; initial-value: 0; } /* visually-hidden (a11y labels) */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* layout helpers used in the showcase */ .u-grid { display: grid; gap: var(--s4); } .u-grid--2 { grid-template-columns: repeat(2, 1fr); } .u-grid--3 { grid-template-columns: repeat(3, 1fr); } .u-grid--4 { grid-template-columns: repeat(4, 1fr); } .u-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; } @media (max-width: 760px) { .u-grid--2, .u-grid--3, .u-grid--4 { grid-template-columns: 1fr; } } /* === mobile polish (2026-06-30) — safe, additive === */ @media (max-width:640px){ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ overflow-x:clip; } .u-btn, button.u-btn, a.u-btn{ min-height:46px; } button, .u-btn, a, [role="button"], input, select{ touch-action:manipulation; } }