/* ─────────────────────────────────────────────────────────────────────
   HOMEi Commissions — «العمولات» as one page (CM-SPLIT-1, 2026-09-23)

   The approved design (homei-commissions-handoff: three PNGs, three HTML
   files and tokens.css): a head (title, lead, month, basis, «العمولات |
   التحليلات», «إضافة عمولة»), six cards, then either the list on the right
   with the commission opened beside it (sticky, its own scroll, buttons at
   its foot — a drawer from 768 to 1199px, a bottom sheet under 768px) or the
   analytics (three columns, CSS bars only).

   Literal to the design: its colours (the --cm-d-* tokens in tokens.css — no
   colour literal here, the ratchet holds this sheet at zero), its type
   (Cairo, scoped to this screen), sizes, weights, radii and spacing — except
   where the design drew text under the 12px floor (11–11.5px captions,
   counts and dates): those read 12px (TypeFloorTest; the handoff's own rule
   «لا نص أصغر من 12px»). RTL-safe: logical properties only.

   Registered as a Filament asset — a change here ships NOTHING until
   `php artisan filament:assets` is run and public/css/app/ is committed in
   the same change (agent-operating-memory §8.8).
   ──────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cairo/Cairo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cairo/Cairo-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cairo/Cairo-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cairo/Cairo-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/cairo/Cairo-ExtraBold.ttf') format('truetype'); }

/* ── the page ground: the design's light blue-grey, this screen only ── */
body:has(.cms) { background: var(--cm-d-page); }
body:has(.cms) .fi-main-ctn { background: transparent; }
html.cms-locked, html.cms-locked body { overflow: hidden; }
/* the drawer and the sheet sit above the page (45); an action's modal opened from them must sit above both */
body:has(.cms) .fi-modal-close-overlay, body:has(.cms) .fi-modal-window-ctn { z-index: 60; }

.cms {
    --cms-radius: 14px;
    --cms-shadow: 0 1px 2px var(--cm-d-shadow);
    --cms-sticky-top: 73px;
    --cms-pane-h: calc(100dvh - var(--cms-sticky-top) - 24px);

    font-family: 'Cairo', var(--font-family, system-ui), sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cm-d-ink);
    -webkit-font-smoothing: antialiased;
}
.cms [x-cloak] { display: none !important; }
.cms-sr { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cms-ic { inline-size: 18px; block-size: 18px; flex: none; stroke-width: 1.8; }
.cms bdi { unicode-bidi: isolate; }
.cms .cms-num { font-feature-settings: "tnum"; }
.cms-grow { flex: 1; }
.cms :focus-visible { outline: 2px solid var(--cm-d-accent); outline-offset: 2px; }
[dir="ltr"] .cms .cms-flip { transform: scaleX(-1); }
.cms .is-quiet { color: var(--cm-d-muted); }
.cms .is-strong { font-weight: 700; }
.cms .is-green { color: var(--cm-d-ok); }
.cms-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cms-card { background: var(--cm-d-surface); border: 1px solid var(--cm-d-border); border-radius: var(--cms-radius); box-shadow: var(--cms-shadow); }

/* ── head ───────────────────────────────────────────────────────────── */
.cms-head { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.cms-head-text { min-inline-size: 0; }
.cms-title { font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--cm-d-ink); margin: 0; white-space: nowrap; }
.cms-lead { font-size: 13.5px; color: var(--cm-d-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cms-period { display: flex; gap: 12px; }
.cms-period-phone { display: none; position: relative; }
.cms-drop { position: relative; block-size: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--cm-d-border); border-radius: 10px; background: var(--cm-d-surface); color: var(--cm-d-ink); font-family: inherit; font-weight: 700; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.cms-drop:hover, .cms-drop:focus-within { border-color: var(--cm-d-control-edge); }
.cms-drop .cms-ic { inline-size: 15px; block-size: 15px; color: var(--cm-d-subtle); }
/* the native select fills the chip so the whole of it opens the list; its own arrow is the chevron */
.cms-drop select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; padding-inline-end: 22px; margin-inline-end: -22px; cursor: pointer; }
.cms-drop select:focus { outline: none; }
.cms-drop .cms-drop-chev { pointer-events: none; }
.cms-drop-btn[aria-expanded="true"] .cms-drop-chev { rotate: 180deg; }
.cms-period-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 30; display: grid; gap: 8px; padding: 12px; background: var(--cm-d-surface); border: 1px solid var(--cm-d-border); border-radius: 12px; box-shadow: 0 10px 30px var(--cm-d-sheet-shadow); }
/* owner request 25-9 — the period: every period (default) · a month · from–to */
.cms-period-pick { position: relative; }
.cms-period-menu--desk { inset-inline: auto 0; min-inline-size: 290px; }
.cms-pmenu { display: grid; gap: 10px; }
.cms-pmenu-opt { display: flex; align-items: center; gap: 8px; block-size: 38px; padding: 0 12px; border: 1px solid var(--cm-d-border); border-radius: 10px; background: var(--cm-d-surface); color: var(--cm-d-ink); font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: start; }
.cms-pmenu-opt:hover { border-color: var(--cm-d-control-edge); }
.cms-pmenu-opt.is-on { border-color: var(--cm-d-accent-line); background: var(--cm-d-accent-soft); color: var(--cm-d-accent-ink); }
.cms-pmenu-opt .cms-ic { inline-size: 16px; block-size: 16px; }
.cms-pmenu-check { margin-inline-start: auto; }
.cms-pmenu-sec { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--cm-d-divider); border-radius: 10px; }
.cms-pmenu-sec.is-on { border-color: var(--cm-d-accent-line); }
.cms-pmenu-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cms-pmenu-date { display: grid; gap: 4px; font-size: 12px; color: var(--cm-d-muted); }
.cms-pmenu-date input { block-size: 36px; border: 1px solid var(--cm-d-border); border-radius: 9px; background: var(--cm-d-surface); color: var(--cm-d-ink); font-family: inherit; font-size: 13px; padding: 0 8px; min-inline-size: 0; }
.cms-allemp-period { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--cm-d-muted); }
.cms-allemp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--cm-d-muted); line-height: 1.7; }
.cms-allemp .is-down .cms-link { color: var(--cm-d-danger); }

.cms-seg { display: inline-flex; background: var(--cm-d-surface); border: 1px solid var(--cm-d-border); border-radius: 12px; padding: 3px; gap: 2px; }
.cms-seg button { display: flex; align-items: center; gap: 8px; block-size: 32px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--cm-d-muted); cursor: pointer; white-space: nowrap; }
.cms-seg button .cms-ic { inline-size: 15px; block-size: 15px; }
.cms-seg button.is-on { background: var(--cm-d-accent-soft); color: var(--cm-d-accent-ink); }

/* ── buttons ────────────────────────────────────────────────────────── */
.cms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; block-size: 38px; padding: 0 18px; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.cms-btn:disabled { opacity: .6; cursor: default; }
.cms-btn-p { background: var(--cm-d-accent); color: var(--cm-d-on-accent); }
.cms-btn-p:hover { filter: brightness(0.96); }
.cms-btn-s { background: var(--cm-d-surface); color: var(--cm-d-ink); border-color: var(--cm-d-control-edge); }
.cms-btn-s:hover { background: var(--cm-d-head-bg); }
.cms-btn-s.is-danger { color: var(--cm-d-danger); border-color: var(--cm-d-danger-line); }
.cms-btn-g { background: transparent; color: var(--cm-d-ink); }
.cms-btn-i { inline-size: 38px; padding: 0; background: var(--cm-d-surface); color: var(--cm-d-ink); border-color: var(--cm-d-control-edge); }
.cms-btn-i:hover { background: var(--cm-d-head-bg); }
.cms-btn-sm { block-size: 36px; padding: 0 14px; font-size: 13.5px; }
.cms-btn-xs { block-size: 30px; padding: 0 14px; font-size: 13.5px; }
.cms-icon-btn { position: relative; inline-size: 32px; block-size: 32px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid var(--cm-d-control-edge); background: var(--cm-d-surface); color: var(--cm-d-ink); cursor: pointer; }
.cms-icon-btn:hover, .cms-icon-btn[aria-expanded="true"] { background: var(--cm-d-head-bg); }
.cms-icon-btn.is-active { border-color: var(--cm-d-accent-line); color: var(--cm-d-accent-ink); }
.cms-icon-btn .cms-ic { inline-size: 16px; block-size: 16px; }
.cms-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--cm-d-info); text-decoration: none; cursor: pointer; white-space: nowrap; }
.cms-link:hover { text-decoration: underline; }
.cms-link .cms-ic { inline-size: 14px; block-size: 14px; }
.cms-x { inline-size: 32px; block-size: 32px; border-radius: 9px; border: 1px solid var(--cm-d-border); display: grid; place-items: center; color: var(--cm-d-muted); background: var(--cm-d-surface); margin-inline-start: auto; flex: none; cursor: pointer; }
.cms-x .cms-ic { inline-size: 16px; block-size: 16px; }

/* ── badges ─────────────────────────────────────────────────────────── */
.cms-badge { display: inline-flex; align-items: center; gap: 5px; block-size: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cms-badge .cms-ic { inline-size: 13px; block-size: 13px; }
.cms-badge-sm { block-size: 20px; padding: 0 8px; }
.cms-badge.is-amber { background: var(--cm-d-warn-soft); color: var(--cm-d-warn); }
.cms-badge.is-blue { background: var(--cm-d-info-soft); color: var(--cm-d-info); }
.cms-badge.is-green { background: var(--cm-d-ok-soft); color: var(--cm-d-ok); }
.cms-badge.is-red { background: var(--cm-d-danger-soft); color: var(--cm-d-danger); }
.cms-badge.is-purple { background: var(--cm-d-purple-soft); color: var(--cm-d-purple); }
.cms-badge.is-grey { background: var(--cm-d-quiet-bg); color: var(--cm-d-muted); }

/* ── the six cards ──────────────────────────────────────────────────── */
.cms-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-block-end: 14px; }
.cms-k { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cm-d-surface); border: 1px solid var(--cm-d-border); border-radius: 12px; font-family: inherit; color: inherit; text-align: start; cursor: pointer; min-inline-size: 0; }
.cms-k:hover { border-color: var(--cm-d-control-edge); }
.cms-k.is-on { border-color: var(--cm-d-accent-line); box-shadow: inset -3px 0 0 var(--cm-d-accent); }
[dir="ltr"] .cms-k.is-on { box-shadow: inset 3px 0 0 var(--cm-d-accent); }
.cms-k-ico { inline-size: 34px; block-size: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.cms-k-ico .cms-ic { inline-size: 16px; block-size: 16px; }
.cms-k-ico.is-orange { background: var(--cm-d-accent-soft); color: var(--cm-d-accent-ink); }
.cms-k-ico.is-amber { background: var(--cm-d-warn-soft); color: var(--cm-d-warn); }
.cms-k-ico.is-green { background: var(--cm-d-ok-soft); color: var(--cm-d-ok); }
.cms-k-ico.is-red { background: var(--cm-d-danger-soft); color: var(--cm-d-danger); }
.cms-k-ico.is-grey { background: var(--cm-d-quiet-bg); color: var(--cm-d-muted); }
.cms-k-ico.is-blue { background: var(--cm-d-info-soft); color: var(--cm-d-info); }
.cms-k-ico.is-purple { background: var(--cm-d-purple-soft); color: var(--cm-d-purple); }
.cms-k-text { display: flex; flex-direction: column; min-inline-size: 0; }
.cms-k-l { font-size: 12px; color: var(--cm-d-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-k-v { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--cm-d-ink); }
.cms-k-v.is-red { color: var(--cm-d-danger); }
.cms-k-unit { font-size: 12px; font-weight: 600; color: var(--cm-d-muted); margin-inline-start: 4px; }
.cms-k-s { font-size: 12px; color: var(--cm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-cards-error { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-block-end: 14px; color: var(--cm-d-muted); font-size: 13.5px; }

/* ── the split ──────────────────────────────────────────────────────── */
.cms-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 14px; align-items: start; }

/* ── the list ───────────────────────────────────────────────────────── */
.cms-list { overflow-x: clip; }
.cms-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-tabs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px 2px; min-inline-size: 0; }
/* the tabs take the room that is there and wrap to a second line — they never slide under the filter / search buttons */
.cms-toolbar > .cms-filter, .cms-toolbar > .cms-icon-btn { flex: none; }
.cms-tab { block-size: 32px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 9px; border: 0; background: transparent; font-family: inherit; font-weight: 700; font-size: 12.5px; color: var(--cm-d-muted); cursor: pointer; white-space: nowrap; }
.cms-tab:hover { color: var(--cm-d-ink); }
.cms-tab-c { font-size: 12px; background: var(--cm-d-page); border-radius: 6px; padding: 0 6px; color: var(--cm-d-muted); line-height: 1.5; }
.cms-tab.is-on { background: var(--cm-d-tab-on-bg); color: var(--cm-d-tab-on-ink); }
.cms-filter { position: relative; }
.cms-filter-n { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--cm-d-tab-on-bg); color: var(--cm-d-tab-on-ink); font-size: 12px; font-weight: 700; line-height: 1; }
.cms-filter-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 30; inline-size: min(280px, calc(100vw - 56px)); display: grid; gap: 12px; padding: 12px; background: var(--cm-d-surface); border: 1px solid var(--cm-d-border); border-radius: 12px; box-shadow: 0 10px 30px var(--cm-d-sheet-shadow); }
.cms-filter-field { display: grid; gap: 6px; }
.cms-field-l { font-size: 12.5px; font-weight: 700; color: var(--cm-d-muted); }
.cms-select { position: relative; display: flex; align-items: center; }
.cms-select select { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 36px; border: 1px solid var(--cm-d-border); border-radius: 9px; background: var(--cm-d-surface); color: var(--cm-d-ink); font-family: inherit; font-weight: 600; font-size: 13.5px; padding-block: 0; padding-inline: 12px 32px; cursor: pointer; }
.cms-select .cms-ic { position: absolute; inset-inline-end: 10px; inline-size: 15px; block-size: 15px; color: var(--cm-d-subtle); pointer-events: none; }
.cms-search { padding: 8px 12px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-search input { inline-size: 100%; block-size: 36px; border: 1px solid var(--cm-d-border); border-radius: 9px; padding-inline: 12px; font-family: inherit; font-size: 13.5px; color: var(--cm-d-ink); background: var(--cm-d-surface); }
.cms-search input::placeholder { color: var(--cm-d-muted); }
.cms-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-chip { display: inline-flex; align-items: center; gap: 4px; block-size: 26px; padding-inline: 10px 4px; border-radius: 8px; background: var(--cm-d-chip-bg); color: var(--cm-d-ink); font-size: 12.5px; font-weight: 600; }
.cms-chip button { inline-size: 20px; block-size: 20px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: var(--cm-d-muted); cursor: pointer; border-radius: 6px; }
.cms-chip .cms-ic { inline-size: 13px; block-size: 13px; }
.cms-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--cm-d-chip-bg); border-block-end: 1px solid var(--cm-d-divider); font-size: 13px; font-weight: 700; }

.cms-row { position: relative; display: flex; align-items: center; gap: 10px; padding-inline: 14px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-row:last-child { border-block-end: 0; }
.cms-row:hover { background: var(--cm-d-head-bg); }
.cms-row.is-open { background: var(--cm-d-accent-soft); }
.cms-row.is-open::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--cm-d-accent); }
.cms-ck { display: grid; place-items: center; flex: none; cursor: pointer; }
.cms-ck input { appearance: none; -webkit-appearance: none; inline-size: 18px; block-size: 18px; margin: 0; border: 1.5px solid var(--cm-d-check-edge); border-radius: 5px; background: var(--cm-d-surface); cursor: pointer; display: grid; place-items: center; }
.cms-ck input:checked { background: var(--cm-d-tab-on-bg); border-color: var(--cm-d-tab-on-bg); }
.cms-ck input:checked::after { content: ''; inline-size: 5px; block-size: 9px; border: solid var(--cm-d-tab-on-ink); border-width: 0 2px 2px 0; rotate: 45deg; margin-block-start: -2px; }
.cms-row-link { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 10px; padding-block: 10px; color: inherit; text-decoration: none; }
.cms-row-main { flex: 1; min-inline-size: 0; }
.cms-row-title { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-row-meta { display: block; font-size: 12px; color: var(--cm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-row-status { flex: none; }
.cms-row-amt { font-weight: 800; font-size: 14px; white-space: nowrap; text-align: end; min-inline-size: 82px; }
.cms-row-amt small { display: block; font-weight: 500; font-size: 12px; color: var(--cm-d-muted); }
.cms-go { color: var(--cm-d-subtle); display: grid; }
.cms-go .cms-ic { inline-size: 16px; block-size: 16px; }
.cms-pager { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-block-start: 1px solid var(--cm-d-divider); font-size: 12px; color: var(--cm-d-muted); }

/* states: loading · empty · error */
.cms-empty { text-align: center; padding: 36px 20px 40px; }
.cms-empty-ic { inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--cm-d-page); color: var(--cm-d-subtle); display: grid; place-items: center; margin: 0 auto 10px; }
.cms-empty-ic .cms-ic { inline-size: 22px; block-size: 22px; }
.cms-empty-t { font-size: 15px; font-weight: 700; color: var(--cm-d-ink); margin: 0; }
.cms-empty-b { font-size: 13px; color: var(--cm-d-muted); margin: 4px auto 0; max-inline-size: 36ch; }
.cms-empty .cms-btn, .cms-pane-state .cms-btn { margin-block-start: 14px; }
@keyframes cms-pulse { 50% { opacity: .55; } }
.cms-skel { display: block; border-radius: 8px; background: var(--cm-d-divider); animation: cms-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cms-skel { animation: none; } }
.cms-skel-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-skel-ck { inline-size: 18px; block-size: 18px; border-radius: 5px; flex: none; }
.cms-skel-lines { flex: 1; display: grid; gap: 7px; }
.cms-skel-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* ── the panel ──────────────────────────────────────────────────────── */
.cms-pane { position: sticky; inset-block-start: var(--cms-sticky-top); max-block-size: var(--cms-pane-h); display: flex; flex-direction: column; }
.cms-handle { display: none; }
.cms-pane-live { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.cms-pane-head { padding: 14px 18px 12px; border-block-end: 1px solid var(--cm-d-border); display: flex; align-items: flex-start; gap: 10px; flex: none; }
.cms-pane-ico { inline-size: 38px; block-size: 38px; border-radius: 10px; background: var(--cm-d-info-soft); color: var(--cm-d-info); display: grid; place-items: center; flex: none; }
.cms-pane-titles { flex: 1; min-inline-size: 0; }
.cms-pane-titleline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cms-pane-title { font-size: 18px; font-weight: 800; line-height: 1.45; color: var(--cm-d-ink); margin: 0; }
.cms-pane-chips { display: flex; gap: 6px; margin-block-start: 6px; overflow: hidden; }
.cms-pchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cm-d-muted); background: var(--cm-d-chip-bg); border-radius: 8px; padding: 3px 9px; white-space: nowrap; text-decoration: none; }
a.cms-pchip:hover { color: var(--cm-d-ink); }
.cms-pchip .cms-ic { inline-size: 13px; block-size: 13px; }
.cms-pane-body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.cms-pane-foot { flex: none; padding: 10px 18px 14px; border-block-start: 1px solid var(--cm-d-border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--cm-d-surface); border-end-start-radius: calc(var(--cms-radius) - 1px); border-end-end-radius: calc(var(--cms-radius) - 1px); }
.cms-pane-foot .cms-primary { flex: 1 1 100%; order: 9; block-size: 40px; }
.cms-foot-note { flex: 1; margin: 0; font-size: 13px; color: var(--cm-d-muted); }
.cms-pane-state { padding: 48px 24px; text-align: center; }
.cms-pane-skel { padding: 16px 18px; display: grid; gap: 14px; }
.cms-overlay { display: none; }

.cms-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.cms-note .cms-ic { margin-block-start: 2px; }
.cms-note b { display: block; font-weight: 700; }
.cms-note p { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.cms-note.is-amber { background: var(--cm-d-warn-soft); color: var(--cm-d-warn-ink); border: 1px solid var(--cm-d-warn-line); }

.cms-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cms-tile { border: 1px solid var(--cm-d-border); border-radius: 10px; padding: 9px 12px; min-inline-size: 0; }
.cms-tile-l { font-size: 12px; color: var(--cm-d-muted); font-weight: 600; }
.cms-tile-v { font-size: 19px; font-weight: 800; line-height: 1.3; }
.cms-tile-s { font-size: 12px; color: var(--cm-d-muted); }

.cms-sec { display: flex; flex-direction: column; gap: 8px; }
.cms-sec-head { display: flex; align-items: center; gap: 8px; }
.cms-sec-t { font-size: 13.5px; font-weight: 700; color: var(--cm-d-ink); margin: 0; flex: 1; }
.cms-sec-aside { font-size: 12.5px; color: var(--cm-d-muted); }
.cms-plain { margin: 0; font-size: 13px; }
.cms-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.cms-kv dt { font-size: 12px; color: var(--cm-d-muted); }
.cms-kv dd { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cms-pt-wrap { overflow-x: auto; }
.cms-pt { inline-size: 100%; border-collapse: collapse; font-size: 12.5px; }
.cms-pt th { font-size: 12px; color: var(--cm-d-muted); text-align: start; padding: 6px 8px; border-block-end: 1px solid var(--cm-d-border); background: var(--cm-d-head-bg); font-weight: 700; white-space: nowrap; }
.cms-pt td { padding: 7px 8px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-pt tfoot td { border-block-end: 0; font-weight: 800; background: var(--cm-d-head-bg); }
.cms-pt td.cms-num { white-space: nowrap; }
.cms-pt .is-up { color: var(--cm-d-ok); font-weight: 700; }
.cms-pt .is-down { color: var(--cm-d-danger); font-weight: 700; }
.cms-reasons { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--cm-d-muted); display: grid; gap: 2px; }
.cms-reasons b { color: var(--cm-d-ink); }

/* the six steps — the design's horizontal line: done green, current orange, pending grey */
.cms-steps { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.cms-steps li { flex: 1; min-inline-size: 0; text-align: center; position: relative; font-size: 12px; color: var(--cm-d-muted); padding-block-start: 24px; }
.cms-steps li::before { content: ''; position: absolute; inset-block-start: 8px; inset-inline-end: 50%; inline-size: 100%; block-size: 2px; background: var(--cm-d-divider); }
.cms-steps li:first-child::before { display: none; }
.cms-steps li::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: calc(50% - 7px); inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--cm-d-surface); border: 2px solid var(--cm-d-step-edge); box-sizing: border-box; }
.cms-steps li.is-done::after { background: var(--cm-d-ok); border-color: var(--cm-d-ok); }
.cms-steps li.is-done::before, .cms-steps li.is-now::before, .cms-steps li.is-danger::before { background: var(--cm-d-ok); }
.cms-steps li.is-now::after { background: var(--cm-d-accent); border-color: var(--cm-d-accent); box-shadow: 0 0 0 3px var(--cm-d-accent-soft); }
.cms-steps li.is-danger::after { background: var(--cm-d-danger); border-color: var(--cm-d-danger); }
.cms-steps li.is-done, .cms-steps li.is-now { color: var(--cm-d-ink); font-weight: 700; }
.cms-steps li.is-danger { color: var(--cm-d-danger); font-weight: 700; }
.cms-step-l { display: block; line-height: 1.35; }
.cms-step-n { display: block; font-size: 12px; font-weight: 500; color: var(--cm-d-muted); }

/* CM-RETURN-1: back in sales review because Finance returned it — the current step, amber */
.cms-steps li.is-returned::after { background: var(--cm-d-warn); border-color: var(--cm-d-warn); }
.cms-steps li.is-returned::before { background: var(--cm-d-ok); }
.cms-steps li.is-returned { color: var(--cm-d-warn); font-weight: 700; }

/* «المزيد» */
.cms-menu { position: relative; }
.cms-menu-list { position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 0; z-index: 30; min-inline-size: 230px; max-block-size: 60vh; overflow-y: auto; background: var(--cm-d-surface); border: 1px solid var(--cm-d-border); border-radius: 12px; box-shadow: 0 10px 30px var(--cm-d-sheet-shadow); padding: 6px; }
.cms-menu-list.is-down { inset-block-end: auto; inset-block-start: calc(100% + 6px); }
.cms-menu-sec + .cms-menu-sec { border-block-start: 1px solid var(--cm-d-divider); margin-block-start: 6px; padding-block-start: 6px; }
.cms-menu-item { display: flex; inline-size: 100%; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--cm-d-ink); text-align: start; cursor: pointer; text-decoration: none; }
.cms-menu-item:hover, .cms-menu-item:focus-visible { background: var(--cm-d-head-bg); }

/* ── analytics ──────────────────────────────────────────────────────── */
.cms-an { display: grid; grid-template-columns: 1.25fr 1fr 0.95fr; gap: 14px; align-items: start; }
.cms-an.is-loading { opacity: .6; }
.cms-an-col { display: flex; flex-direction: column; gap: 14px; }
/* as drawn: the activity rows keep their words whole, so their column takes the width they need (the design's
   left column is its widest) and the employee names wrap to a second line instead */
.cms-an-hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.cms-an-hd h3 { font-size: 15px; font-weight: 700; color: var(--cm-d-ink); margin: 0; white-space: nowrap; }
.cms-an-aside { font-size: 12.5px; color: var(--cm-d-muted); white-space: nowrap; }
.cms-an-bd { padding: 8px 16px 12px; }
.cms-an-empty { margin: 8px 0; font-size: 13px; color: var(--cm-d-muted); }
.cms-an-note { margin: 8px 0 0; font-size: 12px; color: var(--cm-d-muted); }
.cms-an-sub { margin: 0; font-size: 12.5px; color: var(--cm-d-muted); }

.cms-eh, .cms-er { display: grid; grid-template-columns: 30px minmax(0, 1fr) 56px 36px 80px; gap: 10px; align-items: center; }
.cms-eh { font-size: 12px; color: var(--cm-d-muted); font-weight: 700; padding: 4px 0 6px; border-block-end: 1px solid var(--cm-d-divider); }
.cms-er-list, .cms-br-list { margin: 0; padding: 0; list-style: none; }
.cms-er { padding: 7px 0; border-block-end: 1px solid var(--cm-d-divider); }
.cms-er:last-child { border-block-end: 0; }
.cms-ava { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.cms-ava.is-blue { background: var(--cm-d-info-soft); color: var(--cm-d-info); }
.cms-ava.is-quiet { inline-size: 26px; block-size: 26px; background: var(--cm-d-quiet-bg); color: var(--cm-d-muted); }
.cms-bl { min-inline-size: 0; color: inherit; text-decoration: none; }
.cms-bl b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cms-bl span { display: block; font-size: 12px; color: var(--cm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.cms-bl:hover b { text-decoration: underline; }
.cms-bt { block-size: 8px; background: var(--cm-d-divider); border-radius: 6px; position: relative; }
.cms-bt > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; background: var(--cm-d-info); display: block; }
.cms-ec { font-size: 12.5px; font-weight: 700; text-align: center; }
.cms-ba { font-size: 12.5px; font-weight: 800; text-align: end; white-space: nowrap; }
.cms-tot { margin: 8px 0 0; padding-block-start: 8px; border-block-start: 1px solid var(--cm-d-border); font-size: 12.5px; color: var(--cm-d-muted); }
.cms-tot b { color: var(--cm-d-ink); }

.cms-br { display: grid; grid-template-columns: 22px 70px minmax(0, 1fr) 78px; gap: 10px; align-items: center; padding: 4px 0; }
.cms-rk { inline-size: 22px; block-size: 22px; border-radius: 6px; background: var(--cm-d-quiet-bg); color: var(--cm-d-muted); font-size: 12px; font-weight: 700; display: grid; place-items: center; }

.cms-mbs { display: flex; gap: 8px; align-items: flex-end; block-size: 124px; margin: 0; padding: 0; list-style: none; }
.cms-mb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; block-size: 100%; gap: 2px; min-inline-size: 0; }
.cms-mb > i { display: block; inline-size: 100%; background: var(--cm-d-info-soft); border-radius: 6px 6px 0 0; border-block-start: 3px solid var(--cm-d-info); }
.cms-mb.is-current > i { background: var(--cm-d-accent); border-block-start-color: var(--cm-d-accent); }
.cms-mb span { font-size: 12px; color: var(--cm-d-muted); white-space: nowrap; }
.cms-mb b { font-size: 12px; font-weight: 700; }

.cms-kpi { display: flex; align-items: baseline; gap: 8px; }
.cms-kpi-v { font-size: 34px; font-weight: 800; line-height: 1.2; }
.cms-kpi-u { color: var(--cm-d-muted); }
.cms-kpi .cms-badge { margin-inline-start: auto; }
.cms-stg { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cms-stg li { display: grid; grid-template-columns: 100px minmax(0, 1fr) 42px; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--cm-d-muted); }
.cms-stg-l small { display: block; font-size: 12px; font-weight: 700; color: var(--cm-d-ok); }
.cms-stg b { text-align: end; color: var(--cm-d-ink); white-space: nowrap; }
.cms-bar { block-size: 6px; background: var(--cm-d-divider); border-radius: 6px; position: relative; }
.cms-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; display: block; }
.cms-stg li.is-sales .cms-bar > i { background: var(--cm-d-info); }
.cms-stg li.is-exec .cms-bar > i { background: var(--cm-d-warn); }
/* owner ruling 23-9: the finance → payment stage is AFTER approval — a different colour, marked «خارج المتوسط» */
.cms-stg li.is-outside .cms-bar { background: repeating-linear-gradient(-45deg, var(--cm-d-divider) 0 4px, var(--cm-d-surface) 4px 8px); }
.cms-stg li.is-outside .cms-bar > i { background: var(--cm-d-ok); }

.cms-ar { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-block-end: 1px solid var(--cm-d-divider); font-size: 12.5px; }
.cms-ar:last-child { border-block-end: 0; }
.cms-ar b { font-weight: 700; white-space: nowrap; }
.cms-ar .cms-link { font-size: 12px; }
.cms-ar-when { margin-inline-start: auto; font-size: 12px; color: var(--cm-d-muted); white-space: nowrap; }

.cms-wallet { display: grid; gap: 16px; }
.cms-allemp .cms-pt td { vertical-align: top; }

/* ── CM-RETURN-1: the yellow bar (panel + Details page) and the return modal ──
   Global class names: the modal renders outside .cms and the Details page is
   not the workspace; the bar is the design's amber note (.n-amber). */
.cm-return-bar { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; background: var(--cm-d-warn-soft); color: var(--cm-d-warn-ink); border: 1px solid var(--cm-d-warn-line); font-size: 13.5px; line-height: 1.6; }
.cm-return-ic { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 2px; }
.cm-return-body { min-inline-size: 0; display: grid; gap: 2px; }

/* «عرض عمولة» (owner request 25-9) — the panel full width: head with the buttons, tiles, two columns of cards */
.cms-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cm-d-muted); margin-block-end: 10px; }
.cms-crumbs a { color: var(--cm-d-muted); text-decoration: none; font-weight: 600; }
.cms-crumbs a:hover { color: var(--cm-d-ink); }
.cms-crumbs .cms-ic { inline-size: 14px; block-size: 14px; }
.cms-crumbs [aria-current] { color: var(--cm-d-ink); font-weight: 700; }
.cms-dhead { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; margin-block-end: 14px; }
.cms-dtitle { font-size: 22px; }
.cms-dhead .cms-pane-chips { flex-wrap: wrap; overflow: visible; }
.cms-dactions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-inline-size: 60%; }
.cms-dactions .cms-foot-note { flex: 1 1 100%; text-align: end; }
.cms-dbody { display: flex; flex-direction: column; gap: 14px; }
.cms-dbody > .cms-tiles { gap: 12px; }
.cms-dbody > .cms-tiles .cms-tile { background: var(--cm-d-surface); box-shadow: var(--cms-shadow); padding: 12px 16px; }
.cms-dgrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cms-dcol { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.cms-dcard { padding: 16px 18px; }
.cms-dside .cms-kv { grid-template-columns: minmax(0, 1fr); }
.cms-dside .cms-kv dd { white-space: normal; }
@media (max-width: 1199.98px) {
    .cms-dgrid { grid-template-columns: minmax(0, 1fr); }
    .cms-dside .cms-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .cms-dhead { flex-wrap: wrap; }
    .cms-dactions { max-inline-size: none; flex: 1 1 100%; justify-content: flex-start; }
    .cms-dactions .cms-foot-note { text-align: start; }
    .cms-dside .cms-kv { grid-template-columns: minmax(0, 1fr); }
}

/* «إضافة عمولة» / «تعديل عمولة» (owner request 25-9): the design's head (page-head.blade.php) and its cards
   around the unchanged Filament form */
body:has(.cms-formpage) { background: var(--cm-d-page); }
.cms-formpage { --cms-radius: 14px; --cms-shadow: 0 1px 2px var(--cm-d-shadow); font-family: 'Cairo', var(--font-family, system-ui), sans-serif; }
.cms-pagehead .cms-head { margin-block-end: 4px; }
.cms-pagehead .fi-ac { flex: none; }
.cms-formpage .fi-section { border-radius: var(--cms-radius); box-shadow: var(--cms-shadow); --tw-ring-color: var(--cm-d-border); background: var(--cm-d-surface); }
.cms-formpage .fi-section-header-heading { color: var(--cm-d-ink); font-weight: 800; font-size: 15px; }

/* CM-RETURN-1 — the approval history under the Timeline (panel + Details page) */
.cm-history { margin-block-start: 14px; border-block-start: 1px solid var(--cm-d-divider); padding-block-start: 12px; }
.cm-history-t { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--cm-d-ink); }
.cm-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-history-i { display: flex; gap: 10px; align-items: flex-start; }
.cm-history-dot { inline-size: 10px; block-size: 10px; flex: none; margin-block-start: 5px; border-radius: 50%; background: var(--cm-d-muted); }
.cm-history-i.is-green .cm-history-dot { background: var(--cm-d-ok); }
.cm-history-i.is-amber .cm-history-dot { background: var(--cm-d-warn); }
.cm-history-i.is-blue .cm-history-dot { background: var(--cm-d-info); }
.cm-history-body { min-inline-size: 0; display: grid; gap: 1px; font-size: 13px; line-height: 1.6; color: var(--cm-d-ink); }
.cm-history-title { font-weight: 700; }
.cm-history-who, .cm-history-line { color: var(--cm-d-muted); overflow-wrap: anywhere; }
.cm-return-title { font-weight: 800; }
.cm-return-reason { margin: 0; overflow-wrap: anywhere; }
.cm-return-text { white-space: pre-line; }
.cm-return-label, .cm-return-code { font-weight: 700; }
.cm-return-meta { margin: 0; font-size: 12.5px; }
.cm-return-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 0 0 10px; }
.cm-return-facts dt { font-size: 12px; color: var(--cm-d-muted); }
.cm-return-facts dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--cm-d-ink); overflow-wrap: anywhere; }
.cm-return-warning { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--cm-d-warn-soft); color: var(--cm-d-warn-ink); border: 1px solid var(--cm-d-warn-line); font-size: 13.5px; font-weight: 600; }
.cms-foot-note .cms-ic { inline-size: 15px; block-size: 15px; vertical-align: -3px; color: var(--cm-d-muted); }
@media (max-width: 767.98px) { .cm-return-facts { grid-template-columns: minmax(0, 1fr); } }

/* ── 1200–1439px: the head folds before it crowds ───────────────────── */
@media (max-width: 1439.98px) {
    .cms-head { flex-wrap: wrap; }
    .cms-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cms-an { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cms-an > .cms-an-card { grid-column: 1 / -1; }
}

/* ── 768–1199px: the panel is a drawer from the inline end ─────────── */
@media (max-width: 1199.98px) {
    .cms-split { grid-template-columns: minmax(0, 1fr); }
    .cms-pane { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; inline-size: min(640px, 94vw); max-block-size: none; border-radius: 0; z-index: 45; translate: -105% 0; transition: translate .22s ease; box-shadow: 0 0 34px var(--cm-d-sheet-shadow); }
    [dir="ltr"] .cms-pane { translate: 105% 0; }
    .cms-pane.is-open, .cms-pane.is-pending { translate: 0 0; }
    .cms-overlay { display: block; position: fixed; inset: 0; z-index: 44; background: var(--cm-d-overlay); }
    .cms-pane-state.is-idle { display: none; }
    .cms-pane-foot { border-radius: 0; }
    .cms-an { grid-template-columns: minmax(0, 1fr); }
}

/* ── under 768px: the list is the page, the commission opens in a bottom sheet ── */
@media (max-width: 767.98px) {
    .cms-head { display: block; }
    .cms-title { font-size: 24px; }
    .cms-lead { white-space: normal; margin-block-end: 12px; }
    .cms-period { display: none; }
    .cms-period-phone { display: block; margin-block-start: 12px; }
    .cms-period-phone .cms-drop-btn { inline-size: 100%; justify-content: space-between; }
    .cms-seg { display: flex; inline-size: 100%; margin-block-start: 12px; }
    .cms-seg button { flex: 1; justify-content: center; padding: 0 8px; }
    .cms-add { display: none; }

    .cms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cms-k-ico { display: none; }

    .cms-toolbar { flex-wrap: wrap; }
    .cms-tabs { flex-wrap: wrap; gap: 4px; }
    .cms-tab { padding: 0 8px; font-size: 12px; }
    .cms-filter-menu { inset-inline-end: auto; inset-inline-start: 0; }
    .cms-row-title, .cms-row-meta { white-space: normal; }
    .cms-row-amt { min-inline-size: 70px; }
    .cms-row-status { display: none; }

    .cms-pane { inset-block: auto 0; inset-inline: 0; inline-size: auto; max-block-size: 92dvh; border-radius: 20px 20px 0 0; translate: 0 105%; box-shadow: 0 -10px 30px var(--cm-d-sheet-shadow); }
    [dir="ltr"] .cms-pane { translate: 0 105%; }
    .cms-pane.is-open, .cms-pane.is-pending { translate: 0 0; }
    .cms-pane-head { flex-wrap: wrap; padding: 0 16px 10px; touch-action: none; }
    .cms-handle { display: block; flex: 1 1 100%; padding: 10px 0 4px; cursor: grab; }
    .cms-handle::before { content: ''; display: block; inline-size: 44px; block-size: 5px; border-radius: 3px; background: var(--cm-d-handle); margin: 0 auto; }
    .cms-pane-title { font-size: 16px; }
    .cms-pane-chips { flex-wrap: wrap; }
    .cms-pane-body { padding: 12px 16px; gap: 10px; }
    .cms-tiles, .cms-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cms-kv dd { white-space: normal; }
    .cms-pt { font-size: 12px; }
    .cms-pt th, .cms-pt td { padding: 6px 5px; }
    .cms-steps li { padding-block-start: 22px; }
    .cms-step-n { display: none; }
    .cms-pane-foot { padding: 10px 16px 18px; border-radius: 0; }

    .cms-eh, .cms-er { grid-template-columns: 30px minmax(0, 1fr) 36px 80px; }
    .cms-eh > span:nth-child(3), .cms-er .cms-bt { display: none; }
}