.fi-ta-header-cell-label {
    font-size: 16px;
    color: yellow;
}

/* ════════════════════════════════════════════════════════════════════
   Commission module — Rev 11 "Command Center" skin (mockup 60cca6ac is
   the source of truth). Scoped to .commission-dash (dashboard) and
   .fi-resource-sales-commissions (List / Details / Create / Edit) only.
   ════════════════════════════════════════════════════════════════════ */

.commission-dash,
.fi-resource-sales-commissions {
    /* Shared roles read from the token layer (tokens.css, HO-3104); the
       category badge hues and their tints stay local — they are a palette
       of their own, not roles. --com-faint was painted as TEXT fifteen
       times at 2.54:1; de-emphasis is --ho-ink-muted. */
    --com-pri: var(--ho-info-line);
    --com-pri-h: var(--ho-info-ink);
    --com-pri-bg: var(--ho-info-soft);
    --com-pri-ring: rgba(37, 99, 235, 0.25);
    --com-ring: rgba(3, 7, 18, 0.08);
    --com-ring2: rgba(3, 7, 18, 0.05);
    --com-hover: var(--ho-surface-sunken);
    --com-ink: var(--ho-ink);
    --com-ink2: #374151;
    --com-muted: var(--ho-ink-muted);
    --com-faint: var(--ho-ink-muted);
    --com-card: var(--ho-surface);
    --com-ok: var(--ho-success-line);
    --com-warn: var(--ho-warning-line);
    --com-warn-bg: #fef3c7;
    --com-yel: #a16207;  --com-yelb: #fef9c3;
    --com-blu: var(--ho-info-ink);     --com-blub: #dbeafe;
    --com-orn: var(--ho-accent-ink);   --com-ornb: #ffedd5;
    --com-grn: var(--ho-success-ink);  --com-grnb: #dcfce7;
    --com-dgn: #166534;  --com-dgnb: #bbf7d0;
    --com-red: var(--ho-danger-ink);   --com-redb: #fee2e2;
    --com-info: #0891b2; --com-info-bg: #cffafe;
    --com-gray-bg: var(--ho-surface-inset);
    --com-shadow: 0 1px 2px rgba(3, 7, 18, 0.04), 0 1px 6px rgba(3, 7, 18, 0.03);
    --com-shadow-hover: 0 6px 20px rgba(37, 99, 235, 0.09), 0 2px 6px rgba(3, 7, 18, 0.04);
}

.dark .commission-dash,
.dark .fi-resource-sales-commissions {
    --com-pri-bg: rgba(59, 130, 246, 0.12);
    --com-pri-ring: rgba(96, 165, 250, 0.35);
    --com-ring: rgba(255, 255, 255, 0.1);
    --com-ring2: rgba(255, 255, 255, 0.06);
    --com-hover: var(--ho-surface-inset);
    --com-ink2: #d1d5db;
    --com-warn-bg: rgba(245, 158, 11, 0.15);
    --com-yel: #facc15;  --com-yelb: rgba(234, 179, 8, 0.16);
    --com-blub: rgba(37, 99, 235, 0.2);
    --com-ornb: rgba(234, 88, 12, 0.2);
    --com-grnb: rgba(34, 197, 94, 0.16);
    --com-dgn: #86efac;  --com-dgnb: rgba(22, 101, 52, 0.3);
    --com-redb: rgba(239, 68, 68, 0.18);
    --com-info: #22d3ee; --com-info-bg: rgba(6, 182, 212, 0.15);
    --com-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --com-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ── Dashboard layout: dense mockup rhythm (18px) ─────────────────── */

/* Enterprise width: lift Filament's default content container only on the
   pages of this module (pure presentation; :has is supported by all
   evergreen browsers). */
.fi-main:has(.commission-dash) {
    max-width: 1700px;
    padding-inline: 18px;
}

.commission-dash {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.commission-dash .fi-wi {
    gap: 18px;
}

.commission-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.commission-kicker {
    font-size: var(--ho-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--com-muted);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.commission-kicker span {
    font-size: var(--ho-text-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--com-faint);
}

/* Reconciliation note under a month-scoped card: money that is real but
   whose month is unknown (paid commissions with no recorded payment date).
   Quiet by design — it explains a gap, it is not a KPI. */
.commission-note {
    font-size: var(--ho-text-xs);
    line-height: 1.5;
    color: var(--com-muted);
    margin: 0;
}

/* Report basis for the month-scoped summaries: two questions (payment
   month vs entitlement month), one visible choice. Tokens only. */
.commission-basis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.commission-basis-k {
    font-size: var(--ho-text-xs);
    font-weight: 700;
    color: var(--com-muted);
}

.commission-basis-opt {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--com-ring2);
    border-radius: 999px;
    background: var(--com-card);
    color: var(--com-ink2);
    cursor: pointer;
}

.commission-basis-opt:hover {
    background: var(--com-hover);
}

.commission-basis-opt.is-on {
    background: var(--com-pri-bg);
    border-color: var(--com-pri);
    color: var(--com-pri);
}

.commission-basis-opt:focus-visible {
    outline: 2px solid var(--com-pri-ring);
    outline-offset: 2px;
}

.commission-basis-hint {
    font-size: var(--ho-text-xs);
    color: var(--com-muted);
}

/* One line under a summary's title saying exactly what it counts. */
.commission-card-def {
    font-size: var(--ho-text-xs);
    line-height: 1.5;
    color: var(--com-muted);
    margin: 0 0 8px;
}

/* "Could not load" must not look like "nothing there". */
.commission-empty-error {
    color: var(--com-red);
}

/* Money the rows could not claim, listed beneath them. */
.commission-exceptions {
    margin: 10px 0 0;
    padding-inline-start: 18px;
    font-size: var(--ho-text-xs);
    line-height: 1.6;
    color: var(--com-muted);
    list-style: disc;
}

/* The total, linked to the exact rows it is computed from. */
.commission-scope-total {
    display: inline-flex;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--com-pri);
}

/* The approval KPI's sample line and its "no sample" value. */
.commission-stat-sub {
    font-size: var(--ho-text-xs);
    line-height: 1.5;
    color: var(--com-muted);
}

.commission-stat-vl-na {
    font-size: 20px;
    color: var(--com-muted);
}

/* ── My Tasks hero — dominates the page ───────────────────────────── */

.commission-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .commission-hero {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
    }

    .commission-hero-card {
        flex: 1;
    }

    .commission-hero-month {
        width: 11.5rem;
        align-self: center;
    }
}

.commission-hero-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    background: linear-gradient(118deg, #3b82f6 0%, #2563eb 38%, #1e40af 82%, #172554 100%);
    color: #fff;
    border-radius: 16px;
    padding: 32px 34px;
    min-height: 128px;
    text-decoration: none;
    box-shadow: 0 12px 34px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.commission-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 340px at 85% -20%, rgba(255, 255, 255, 0.22), transparent 60%);
    pointer-events: none;
}

.commission-hero-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 42px rgba(37, 99, 235, 0.38);
}

.dark .commission-hero-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.commission-hero-ic {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.17);
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.commission-hero-ic svg {
    width: 30px;
    height: 30px;
    stroke: #fff;
}

.commission-hero-tx {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.commission-hero-k {
    font-size: var(--ho-text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    color: #fff;
}

.commission-hero-v {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.commission-hero-big {
    margin-inline-start: auto;
    font-size: 64px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
}

.commission-hero-go {
    margin-inline-start: 18px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 11px;
    padding: 12px 20px;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    color: #fff;
    transition: background 0.15s ease, transform 0.12s ease;
}

.commission-hero-card:hover .commission-hero-go {
    background: rgba(255, 255, 255, 0.3);
}

/* Month selector — premium filter chip (functionality = the same Livewire
   select, invisibly overlaid on top of the chip) */

.commission-hero-month {
    display: flex;
    align-items: flex-start;
}

.commission-month-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 56px;
    padding: 9px 14px;
    background: var(--com-card, #fff);
    border: 1px solid var(--com-ring, rgba(3, 7, 18, 0.08));
    border-radius: 13px;
    box-shadow: var(--com-shadow, 0 1px 2px rgba(3, 7, 18, 0.05));
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.commission-month-chip:hover {
    border-color: var(--com-pri-ring, rgba(37, 99, 235, 0.25));
    box-shadow: var(--com-shadow-hover, 0 6px 20px rgba(37, 99, 235, 0.09));
    transform: translateY(-1px);
}

.commission-month-chip:focus-within {
    border-color: var(--com-pri, #2563eb);
    box-shadow: 0 0 0 3px var(--com-pri-ring, rgba(37, 99, 235, 0.25));
}

.commission-month-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--com-pri-bg, #eff6ff);
    color: var(--com-pri, #2563eb);
    display: grid;
    place-items: center;
    flex: none;
}

.commission-month-ic svg {
    width: 18px;
    height: 18px;
}

.commission-month-tx {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.commission-month-k {
    font-size: var(--ho-text-xs);
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--com-muted, #6b7280);
}

.commission-month-v {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--com-ink, #111827);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.commission-month-car {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    color: var(--com-faint, #9ca3af);
    flex: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.commission-month-chip:hover .commission-month-car {
    color: var(--com-pri, #2563eb);
    transform: translateY(1px);
}

.commission-month-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    border: 0;
}

/* ── Premium stat cards ───────────────────────────────────────────── */

.commission-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .commission-cards-4 { grid-template-columns: repeat(2, 1fr); }
    .commission-cards-5 { grid-template-columns: repeat(2, 1fr); }
    .commission-cards-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .commission-cards-4 { grid-template-columns: repeat(4, 1fr); }
    .commission-cards-5 { grid-template-columns: repeat(5, 1fr); }
}

.commission-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--com-card);
    border: 1px solid var(--com-ring2);
    border-radius: 13px;
    padding: 14px 16px;
    box-shadow: var(--com-shadow);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.commission-stat:hover {
    border-color: var(--com-pri-ring);
    box-shadow: var(--com-shadow-hover);
    transform: translateY(-2px);
}

a.commission-stat:active {
    transform: translateY(0);
}

a.commission-stat::after {
    content: "↗";
    position: absolute;
    bottom: 12px;
    inset-inline-end: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--com-pri);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translate(-3px, 3px);
}

a.commission-stat:hover::after {
    transform: translate(0, 0);
}

a.commission-stat:hover::after {
    opacity: 1;
}

.commission-stat-ic {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.commission-stat-ic svg {
    width: 20px;
    height: 20px;
}

.commission-stat-lb {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--com-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-end: 46px;
}

.commission-stat-vl {
    font-size: 35px;
    font-weight: 800;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: var(--com-ink);
}

.commission-stat-dt {
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--com-muted);
}

/* Status tones: tinted icon chip + hint accent */
.commission-tone-blu .commission-stat-ic { background: var(--com-blub); color: var(--com-blu); }
.commission-tone-orn .commission-stat-ic { background: var(--com-ornb); color: var(--com-orn); }
.commission-tone-grn .commission-stat-ic { background: var(--com-grnb); color: var(--com-grn); }
.commission-tone-dgn .commission-stat-ic { background: var(--com-dgnb); color: var(--com-dgn); }
.commission-tone-red .commission-stat-ic { background: var(--com-redb); color: var(--com-red); }
.commission-tone-gray .commission-stat-ic { background: var(--com-gray-bg); color: var(--com-muted); }

.commission-tone-blu .commission-stat-dt { color: var(--com-blu); }
.commission-tone-orn .commission-stat-dt { color: var(--com-orn); }
.commission-tone-grn .commission-stat-dt { color: var(--com-grn); }
.commission-tone-dgn .commission-stat-dt { color: var(--com-dgn); }
.commission-tone-red .commission-stat-dt { color: var(--com-red); }
.commission-tone-gray .commission-stat-dt { color: var(--com-muted); }

.commission-kpi-tag {
    font-size: var(--ho-text-xs);
    font-weight: 800;
    color: var(--com-muted);
    border: 1px solid var(--com-ring);
    border-radius: 4px;
    padding: 0 4px;
    letter-spacing: 0.04em;
}

/* ── Generic command-center card ──────────────────────────────────── */

.commission-card {
    background: var(--com-card);
    border: 1px solid var(--com-ring2);
    border-radius: 14px;
    box-shadow: var(--com-shadow);
    overflow: hidden;
}

.commission-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 15px 18px 0;
}

.commission-card-head h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--com-ink);
    margin: 0;
}

.commission-hint {
    color: var(--com-muted);
    font-size: 12.5px;
}

.commission-card-body {
    padding: 12px 18px 16px;
}

.commission-empty {
    color: var(--com-faint);
    font-size: 13px;
    margin: 0;
}

/* ── Project Commission Performance — ranked drill-down bars ──────── */

.commission-hbar-row {
    display: grid;
    grid-template-columns: 20px 150px 1fr 84px 14px;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    padding: 7px 4px;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.12s ease;
}

a.commission-hbar-row:hover {
    background: var(--com-hover);
}

a.commission-hbar-row:hover .commission-hbar-name {
    color: var(--com-pri);
}

@media (max-width: 639px) {
    .commission-hbar-row {
        grid-template-columns: 20px 1fr 84px 14px;
    }

    .commission-hbar-row .commission-hbar-track {
        grid-column: 1 / -1;
    }
}

.commission-hbar-name {
    font-weight: 600;
    color: var(--com-ink2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.12s ease;
}

.commission-hbar-name small {
    display: block;
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--com-faint);
}

.commission-hbar-track {
    background: var(--com-gray-bg);
    border-radius: 5px;
    height: 10px;
    overflow: hidden;
}

.commission-hbar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--com-pri), #3b82f6);
    transition: width 0.5s ease;
}

.commission-hbar-value {
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--com-muted);
    font-size: 12.5px;
    font-weight: 600;
}

/* ── Top Sales — ranked drill-down list ───────────────────────────── */

.commission-card-body ol {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

.commission-card-body ol li {
    border-bottom: 1px dashed var(--com-ring);
}

.commission-card-body ol li:last-child {
    border-bottom: 0;
}

a.commission-top-row {
    display: grid;
    grid-template-columns: 20px 28px 1fr auto 14px;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    padding: 7px 4px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

a.commission-top-row:hover {
    background: var(--com-hover);
}

a.commission-top-row:hover .commission-top-label {
    color: var(--com-pri);
}

.commission-top-rank {
    font-size: 12px;
    font-weight: 800;
    color: var(--com-faint);
    text-align: center;
}

.commission-top-avatar {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: var(--com-pri-bg);
    color: var(--com-pri);
    display: grid;
    place-items: center;
    font-size: var(--ho-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.commission-top-label {
    font-weight: 600;
    color: var(--com-ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s ease;
}

.commission-top-value {
    color: var(--com-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 700;
}

/* ── Employee Commission Summary — compact financial rows ─────────── */

.commission-summary-search {
    margin-inline-start: auto;
    font-size: 12.5px;
    padding: 5px 10px;
    border: 1px solid var(--com-ring2);
    border-radius: 8px;
    background: var(--com-card);
    color: var(--com-ink);
    min-width: 170px;
}

.commission-summary-search:focus {
    outline: 2px solid var(--com-pri-ring);
    outline-offset: 1px;
}

.commission-emp-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr 1fr 0.7fr;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--com-ring);
}

.commission-emp-row:last-of-type {
    border-bottom: 0;
}

@media (max-width: 639px) {
    .commission-emp-row {
        grid-template-columns: 1fr 1fr;
    }

    .commission-emp-row .commission-emp-who {
        grid-column: 1 / -1;
    }
}

.commission-emp-who {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    border-radius: 8px;
    padding: 2px 4px;
    transition: background-color 0.12s ease;
}

.commission-emp-who:hover {
    background: var(--com-hover);
}

.commission-emp-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--com-ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commission-emp-name small {
    display: block;
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--com-faint);
}

.commission-emp-cell {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 8px;
    padding: 2px 6px;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.12s ease;
}

.commission-emp-cell:hover {
    background: var(--com-hover);
}

.commission-emp-cell small {
    font-size: var(--ho-text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--com-faint);
}

.commission-emp-cell span {
    font-size: 13.5px;
    font-weight: 700;
}

.commission-emp-confirmed { color: var(--com-ink); }
.commission-emp-paid { color: var(--com-grn); }
.commission-emp-remaining { color: var(--com-orn); }
.commission-emp-zero { color: var(--com-muted); }
.commission-emp-count { color: var(--com-ink2); }

.commission-emp-more {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--com-pri);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px 4px;
}

.commission-emp-more:hover {
    text-decoration: underline;
}

/* Shared drill-down affordance: arrow fades in on row hover */
.commission-drill-arrow {
    font-size: 12px;
    font-weight: 800;
    color: var(--com-pri);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.commission-drill:hover .commission-drill-arrow {
    opacity: 1;
    transform: translateX(0);
}

.commission-feed-link {
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.12s ease;
}

.commission-feed-link:hover {
    color: var(--com-pri) !important;
    text-decoration: underline;
}

.commission-feed-link span {
    font-weight: 800;
}

/* ── Recent Activity — feed ───────────────────────────────────────── */

.commission-feed {
    display: flex;
    flex-direction: column;
    padding: 6px 18px 14px;
}

.commission-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--com-ring);
    border-radius: 6px;
    transition: background-color 0.12s ease;
}

.commission-feed-row:hover {
    background: var(--com-hover);
}

.commission-feed-row:last-child {
    border-bottom: 0;
}

.commission-feed-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--com-gray-bg);
    color: var(--com-ink2);
    display: grid;
    place-items: center;
    font-size: var(--ho-text-xs);
    font-weight: 800;
    flex: none;
    text-transform: uppercase;
}

.commission-feed-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.commission-feed-who {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--com-ink);
}

.commission-feed-action {
    font-size: var(--ho-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 2px 8px;
    background: var(--com-gray-bg);
    color: var(--com-muted);
}

.commission-feed-action-created { background: var(--com-grnb); color: var(--com-grn); }
.commission-feed-action-updated { background: var(--com-blub); color: var(--com-blu); }
.commission-feed-action-deleted { background: var(--com-redb); color: var(--com-red); }

.commission-feed-ref {
    font-size: 13px;
    font-weight: 600;
    color: var(--com-pri);
    font-variant-numeric: tabular-nums;
}

.commission-feed-when {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--com-faint);
    white-space: nowrap;
}


/* ── Badges (mockup .b: pill + status dot) ────────────────────────── */

.commission-dash .fi-badge,
.fi-resource-sales-commissions .fi-badge {
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 650;
    gap: 6px;
}

.commission-dash .fi-badge::before,
.fi-resource-sales-commissions .fi-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    flex: none;
}

.commission-dash .fi-badge.fi-color-info,
.fi-resource-sales-commissions .fi-badge.fi-color-info {
    background: var(--com-blub);
    color: var(--com-blu);
}

.commission-dash .fi-badge.fi-color-warning,
.fi-resource-sales-commissions .fi-badge.fi-color-warning {
    background: var(--com-ornb);
    color: var(--com-orn);
}

.commission-dash .fi-badge.fi-color-success,
.fi-resource-sales-commissions .fi-badge.fi-color-success {
    background: var(--com-grnb);
    color: var(--com-grn);
}

.commission-dash .fi-badge.fi-color-paid,
.fi-resource-sales-commissions .fi-badge.fi-color-paid {
    background: var(--com-dgnb);
    color: var(--com-dgn);
}

.commission-dash .fi-badge.fi-color-danger,
.fi-resource-sales-commissions .fi-badge.fi-color-danger {
    background: var(--com-redb);
    color: var(--com-red);
}

.commission-dash .fi-badge.fi-color-gray,
.fi-resource-sales-commissions .fi-badge.fi-color-gray {
    background: var(--com-gray-bg);
    color: var(--com-muted);
}

.commission-dash .fi-badge.fi-color-primary,
.fi-resource-sales-commissions .fi-badge.fi-color-primary {
    background: var(--com-pri-bg);
    color: var(--com-pri);
}

/* ── Tables: airy rows + clear hover feedback ─────────────────────── */

.fi-resource-sales-commissions .fi-ta-header-cell-label,
.commission-dash .fi-ta-header-cell-label {
    font-size: var(--ho-text-xs);
    font-weight: 650;
    color: var(--com-muted);
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.fi-resource-sales-commissions .fi-ta-cell {
    padding-top: 13px;
    padding-bottom: 13px;
}

.fi-resource-sales-commissions .fi-ta-row,
.commission-dash .fi-ta-row {
    transition: background-color 0.13s ease, box-shadow 0.13s ease;
}

.fi-resource-sales-commissions .fi-ta-row.fi-clickable:hover,
.commission-dash .fi-ta-row.fi-clickable:hover {
    background: var(--com-hover);
    box-shadow: inset 3px 0 0 var(--com-pri);
    cursor: pointer;
}

/* ── Queue tabs (mockup .tabs / .tab) ─────────────────────────────── */

.fi-resource-sales-commissions .fi-tabs {
    border-radius: 12px;
    padding: 5px;
    gap: 4px;
    border: 1px solid var(--com-ring2);
    background: var(--com-card);
    box-shadow: var(--com-shadow);
}

.fi-resource-sales-commissions .fi-tabs-item {
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--com-muted);
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.fi-resource-sales-commissions .fi-tabs-item:hover {
    background: var(--com-hover);
    color: var(--com-ink2);
}

.fi-resource-sales-commissions .fi-tabs-item.fi-active {
    background: var(--com-pri-bg);
    color: var(--com-pri);
    box-shadow: inset 0 0 0 1px var(--com-pri-ring);
}

.fi-resource-sales-commissions .fi-tabs-item .fi-badge {
    border-radius: 9999px;
    padding: 0 7px;
    font-size: var(--ho-text-xs);
    font-weight: 800;
}

.fi-resource-sales-commissions .fi-tabs-item .fi-badge::before {
    display: none;
}

.fi-resource-sales-commissions .fi-tabs-item.fi-active .fi-badge {
    background: var(--com-pri);
    color: #fff;
}

/* ── Sections: premium cards + breathing room ─────────────────────── */

.commission-dash .fi-section,
.fi-resource-sales-commissions .fi-section {
    border-radius: 14px;
    border: 1px solid var(--com-ring2);
    box-shadow: var(--com-shadow);
}

.fi-resource-sales-commissions .fi-page-content > .fi-sc > .fi-sc-component-ctn,
.fi-resource-sales-commissions .fi-sc {
    gap: 16px;
}

.fi-resource-sales-commissions .fi-section-header-heading {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.015em;
}

/* Lighter labels, stronger values (Details sections) */
.fi-resource-sales-commissions .fi-in-entry-label {
    font-size: var(--ho-text-xs);
    font-weight: 500;
    color: var(--com-faint);
}

.fi-resource-sales-commissions .fi-in-entry .fi-text-item {
    font-weight: 700;
    color: var(--com-ink);
}

/* Participants & adjustments: slightly taller rows */
.fi-resource-sales-commissions .fi-in-repeatable-item {
    padding: 18px 20px;
}

/* ════════════════════════════════════════════════════════════════════
   Details (View Commission) — responsive rework, design handoff
   2026-08-21 ("تظبيط التصميم للأجهزة").

   Root cause of the old screen: Filament's ViewRecord infolist is a
   2-column grid at ≥lg, so every section without columnSpanFull() got
   HALF the content width. The summary card — the widest content on the
   page — was living in ~520px, which wrapped the money figure mid-number
   and broke the stage pill over four lines, while the other half of the
   row sat empty. Mobile had no treatment at all: the 8-column table just
   scrolled inside its wrapper.

   Everything below is presentation. Scope is the view page only
   (.fi-resource-view-record-page.fi-resource-sales-commissions) except
   the two block classes the Blade owns, which exist nowhere else.
   Logical properties only (border-inline-start / text-align:start|end)
   so a single dir flip is all RTL↔LTR needs — no row-reverse anywhere.
   Colours come from the module's --com-* tokens, so dark mode follows.
   ════════════════════════════════════════════════════════════════════ */

/* ── Summary band ─────────────────────────────────────────────────── */

.fi-resource-sales-commissions .commission-summary {
    border-top: 3px solid var(--com-pri);
    box-shadow: none;
}

/* The band paints its own header and cell dividers edge-to-edge, so the
   section wrapper must not add padding of its own. */
.fi-resource-sales-commissions .commission-summary .fi-section-content-ctn,
.fi-resource-sales-commissions .commission-summary .fi-section-content {
    padding: 0;
}

.csum-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--com-ring2);
}

.csum-id {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-width: 0;
}

.csum-code {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--com-ink);
    font-variant-numeric: tabular-nums;
}

.csum-order {
    font-size: 13.5px;
    color: var(--com-muted);
}

.csum-order-link,
.csum-order-code {
    font-weight: 600;
    color: var(--com-pri);
    text-decoration: none;
}

.csum-order-code {
    color: var(--com-faint);
}

.csum-order-link:hover {
    color: var(--com-pri-h);
    text-decoration: underline;
}

.csum-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.csum-stage-label {
    font-size: 12.5px;
    color: var(--com-muted);
}

.csum-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 20px;
    line-height: 1.35;
    text-align: start;
}

.csum-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Stage tone still comes from CommissionStatusEnum::getColor() — the
   Blade only turns that value into a class name. */
.csum-tone-success, .csum-tone-paid { background: var(--com-dgnb); color: var(--com-dgn); }
.csum-tone-info    { background: var(--com-blub); color: var(--com-blu); }
.csum-tone-warning { background: var(--com-ornb); color: var(--com-orn); }
.csum-tone-danger  { background: var(--com-redb); color: var(--com-red); }
.csum-tone-gray    { background: var(--com-gray-bg); color: var(--com-muted); }

.csum-metrics {
    display: grid;
    /* The hero and date cells carry the longest strings ("14,200.00 جنيه
       مصري", "16 أغسطس 2026"); the four counters in between need far less.
       Weighting the track list keeps every value on one line inside the
       app shell, which is ~320px narrower than the handoff's bare canvas. */
    /* The hero and date cells carry the only strings that must never break
       ("14,200.00 جنيه مصري", "16 أغسطس 2026"); minmax() gives them their
       content as a floor while the four counters share what is left, so the
       band re-proportions itself instead of wrapping a number. */
    grid-template-columns:
        minmax(max-content, 1.6fr) repeat(4, minmax(0, 1fr)) minmax(max-content, 1.2fr);
    align-items: stretch;
}

.csum-metrics-5 {
    grid-template-columns:
        minmax(max-content, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(max-content, 1.2fr);
}

.csum-cell {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px 18px;
    border-inline-start: 1px solid var(--com-ring2);
    min-width: 0;
}

.csum-cell:first-child {
    border-inline-start: none;
    padding-inline-start: 26px;
}

.csum-cell:last-child {
    padding-inline-end: 26px;
}

.csum-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--com-muted);
}

.csum-hero {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.csum-hero-num {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--com-dgn);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.csum-hero-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--com-dgn);
    white-space: nowrap;
}

.csum-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--com-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow-wrap: break-word;
}

.csum-value.is-up { color: var(--com-dgn); }
.csum-value.is-down { color: var(--com-red); }
.csum-value-date { font-size: 16px; }
.csum-empty { color: var(--com-faint); }

.csum-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 26px 18px;
}

.csum-flag {
    font-size: var(--ho-text-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

/* ── ① Client & Order: label/value rhythm from the handoff ─────────── */

.fi-resource-view-record-page.fi-resource-sales-commissions .fi-in-entry-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--com-muted);
}

.fi-resource-view-record-page.fi-resource-sales-commissions .fi-in-entry .fi-in-text-item,
.fi-resource-view-record-page.fi-resource-sales-commissions .fi-in-entry .fi-in-placeholder {
    font-size: 15px;
    font-weight: 600;
    color: var(--com-ink);
}

.fi-resource-view-record-page.fi-resource-sales-commissions .fi-in-entry .fi-in-placeholder {
    color: var(--com-faint);
    font-weight: 600;
}

/* A Latin date/ID inside an RTL paragraph gets its runs reordered by the
   bidi algorithm ("16 Aug 2026" → "Aug 2026 16"). Isolating the value keeps
   its own order while the inline-block still sits at the line's start edge,
   so the cell does not move. Harmless in LTR. */
.fi-resource-view-record-page.fi-resource-sales-commissions .com-ltr-value {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── ② Participants: table ≥768, one card each below ──────────────── */

.commission-participants-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.commission-participants {
    width: 100%;
    min-width: 720px; /* readable floor — below this the WRAPPER scrolls */
    border-collapse: collapse;
    font-size: 13.5px;
}

.commission-participants th {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--com-muted);
    text-align: start;
    padding: 12px 16px;
    background: var(--com-hover);
    border-bottom: 1px solid var(--com-ring2);
}

.commission-participants td {
    padding: 16px;
    border-bottom: 1px solid var(--com-ring2);
    text-align: start;
    vertical-align: middle;
}

.commission-participants tbody tr:last-child td {
    border-bottom: none;
}

/* Numeric columns end-aligned (handoff); text columns stay at start. The
   headers are matched positionally so the Blade keeps its plain <th>s. */
.commission-participants th:nth-child(n + 4):nth-child(-n + 7),
.commission-participants .cp-num {
    text-align: end;
}

/* Names/roles wrap at word boundaries only — never letter-by-letter. */
.commission-participants .cp-user,
.commission-participants .cp-role {
    min-width: 140px;
    overflow-wrap: normal;
    word-break: keep-all;
}

.commission-participants .cp-user {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--com-ink);
    white-space: nowrap;
}

.commission-participants .cp-role,
.commission-participants .cp-type {
    color: var(--com-ink2);
    white-space: nowrap;
}

/* Numbers stay on ONE line, tabular, LTR-isolated even in RTL. */
.commission-participants .cp-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--com-muted);
}

.commission-participants .cp-actual {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--com-ink);
}

.commission-participants .cp-variance-up { color: var(--com-dgn); font-weight: 700; }
.commission-participants .cp-variance-down { color: var(--com-red); font-weight: 700; }
.commission-participants .cp-muted { color: var(--com-faint); }

.commission-participants .cp-reason {
    min-width: 160px;
    max-width: 220px;
    color: var(--com-muted);
}

/* English headers ("System Calculated", "Commission Value") are ~40% wider
   than the Arabic ones, and the shell keeps a 320px sidebar at 1366, so the
   eight columns no longer fit without help. Letting a HEADER wrap onto two
   lines costs nothing — it is not truncation, and the module's standing rule
   (never clip a label) is what the nowrap was protecting. Values stay
   nowrap. */
.commission-participants th {
    white-space: normal;
    hyphens: none;
}

.commission-participants tfoot td {
    background: var(--com-hover);
    border-top: 1px solid var(--com-ring);
    border-bottom: none;
    padding: 14px 16px;
}

.commission-participants .cp-total-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--com-ink);
}

.commission-participants .cp-total-actual {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--com-dgn);
}

/* Cards are the mobile presentation; the table owns ≥768. */
.commission-participants-cards {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.cpc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--com-ring2);
    border-radius: 12px;
    padding: 14px;
    background: var(--com-hover);
}

.cpc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cpc-who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cpc-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--com-ink);
    overflow-wrap: anywhere;
}

.cpc-role {
    font-size: var(--ho-text-xs);
    color: var(--com-muted);
}

.cpc-chip {
    background: var(--com-gray-bg);
    color: var(--com-ink2);
    font-size: var(--ho-text-xs);
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 16px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cpc-chip.is-empty { color: var(--com-faint); }

.cpc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--com-ring2);
}

/* English labels ("Commission Value", "System Calculated") take two lines
   where the Arabic take one; the grid rows keep the three VALUES on a shared
   baseline instead of stepping down with their labels. */
.cpc-field {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3px;
    min-width: 0;
}

.cpc-label {
    font-size: var(--ho-text-xs);
    color: var(--com-muted);
    overflow-wrap: anywhere;
}

.cpc-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--com-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpc-value-muted { color: var(--com-muted); }
.cpc-value-strong { font-size: 14.5px; font-weight: 800; }

.cpc-diff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--com-grnb);
    border: 1px solid var(--com-dgnb);
    border-radius: 9px;
    padding: 9px 11px;
}

.cpc-diff.is-down {
    background: var(--com-redb);
    border-color: var(--com-redb);
}

.cpc-diff-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--com-dgn);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cpc-diff.is-down .cpc-diff-num { color: var(--com-red); }

.cpc-diff-reason {
    font-size: 12px;
    color: var(--com-muted);
    text-align: end;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cpc-empty {
    color: var(--com-faint);
    text-align: start;
}

.cpc-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 4px 2px;
    border-top: 1px solid var(--com-ring2);
}

.cpc-total-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--com-ink);
}

.cpc-total-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--com-dgn);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Laptop 1366: the shell's 320px sidebar leaves 1046px of content, so
   the eight columns need ~16px back to stay unscrolled. Trimming the cell
   gutters is the cheapest place to find it — no value narrows. ───────── */

@media (max-width: 1399px) {
    .commission-participants th,
    .commission-participants td,
    .commission-participants tfoot td {
        padding-inline: 13px;
    }
}

/* ── Tablet / small laptop ────────────────────────────────────────── */

@media (max-width: 1279px) {
    .csum-metrics,
    .csum-metrics-5 {
        /* Same content floor on the hero, three-up. */
        grid-template-columns: minmax(max-content, 1fr) repeat(2, minmax(0, 1fr));
    }

    /* With three per row, only the row-leading cell drops its divider. */
    .csum-cell:nth-child(3n + 1) {
        border-inline-start: none;
        padding-inline-start: 26px;
    }

    .csum-cell:nth-child(n + 4) {
        border-top: 1px solid var(--com-ring2);
    }

    .csum-code { font-size: 27px; }

    /* Below 1280 the shell still shows its 320px sidebar, so the card is
       ~590px wide while eight legible columns need ~920. The handoff's rule
       applies: the WRAPPER scrolls, never the page. Tightening the cells
       trims what has to be scrolled without shrinking any value. */
    .commission-participants th,
    .commission-participants td,
    .commission-participants tfoot td {
        padding-inline: 12px;
    }

    .commission-participants .cp-reason {
        min-width: 140px;
        max-width: 200px;
    }

    .commission-participants {
        min-width: 640px;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .csum-head {
        padding: 16px;
        gap: 10px;
    }

    .csum-id { gap: 2px 10px; }
    .csum-code { font-size: 21px; }

    .csum-stage {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .csum-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
        padding: 16px;
    }

    /* On mobile the cells become a plain 2-up list: no rules, no
       per-cell padding — the grid gap does the spacing. */
    .csum-cell,
    .csum-cell:first-child,
    .csum-cell:nth-child(3n + 1),
    .csum-cell:nth-child(n + 4) {
        padding: 0;
        gap: 3px;
        border: none;
    }

    .csum-cell-hero {
        grid-column: 1 / -1;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--com-ring2);
    }

    .csum-hero-num { font-size: 30px; }
    .csum-label { font-size: var(--ho-text-xs); }
    .csum-value { font-size: 16px; }
    .csum-value-date { font-size: 15px; }

    .csum-flags { padding: 0 16px 16px; }

    /* Cards replace the table — neither is a shrunken copy of the other. */
    .commission-participants-wrap { display: none; }
    .commission-participants-cards { display: flex; }

    /* Actions (③) and the page header action become full-width targets. */
    .fi-resource-view-record-page.fi-resource-sales-commissions .fi-ac {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .fi-resource-view-record-page.fi-resource-sales-commissions .fi-ac .fi-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        border-radius: 11px;
    }

    /* The collapse chevron ships at 36px, under the 44px touch floor. Grown
       on this page only — the icon itself is untouched, so the accordion
       looks the same and simply becomes thumb-sized. */
    .fi-resource-view-record-page.fi-resource-sales-commissions .fi-section-header .fi-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 400px) {
    .cpc-grid { gap: 8px; }
    .cpc-label { font-size: var(--ho-text-xs); }
    .cpc-value { font-size: 13px; }
    .cpc-value-strong { font-size: 14px; }
    .csum-hero-num { font-size: 26px; }
}


/* ── Details: vertical stepper timeline (mockup .vstep) ───────────── */

.commission-vstep {
    display: flex;
    flex-direction: column;
    padding: 4px 2px;
}

.commission-vstep-st {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 14px;
    padding-bottom: 15px;
    position: relative;
}

.commission-vstep-st::before {
    content: "";
    position: absolute;
    inset-inline-start: 13px;
    top: 28px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: var(--com-ring);
}

.commission-vstep-st:last-child {
    padding-bottom: 0;
}

.commission-vstep-st:last-child::before {
    display: none;
}

.commission-vstep-st.is-done::before {
    background: var(--com-ok);
}

.commission-vstep-dot {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: 2px solid var(--com-ring);
    display: grid;
    place-items: center;
    background: var(--com-card);
    font-size: 12px;
    font-weight: 800;
    color: var(--com-faint);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.commission-vstep-st.is-done .commission-vstep-dot {
    background: var(--com-ok);
    border-color: var(--com-ok);
    color: #fff;
}

.commission-vstep-st.is-cur .commission-vstep-dot {
    border-color: var(--com-pri);
    color: var(--com-pri);
    box-shadow: 0 0 0 5px var(--com-pri-ring);
}

.commission-vstep-st.is-danger .commission-vstep-dot {
    background: var(--com-redb);
    border-color: var(--com-red);
    color: var(--com-red);
}

.commission-vstep-lbl {
    font-weight: 700;
    font-size: 14px;
    color: var(--com-ink);
}

.commission-vstep-st.is-danger .commission-vstep-lbl {
    color: var(--com-red);
}

.commission-vstep-meta {
    font-size: 12.5px;
    color: var(--com-muted);
    margin-top: 1px;
}

.commission-vstep-note {
    font-size: 12.5px;
    color: var(--com-red);
    font-weight: 650;
    margin-top: 2px;
}

/* ── Buttons within the module — premium press feel ───────────────── */

.commission-dash .fi-btn,
.fi-resource-sales-commissions .fi-btn {
    border-radius: 9px;
    font-weight: 650;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.commission-dash .fi-btn:hover,
.fi-resource-sales-commissions .fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(3, 7, 18, 0.12);
}

.commission-dash .fi-btn:active,
.fi-resource-sales-commissions .fi-btn:active {
    transform: translateY(0);
}

/* Contextual stage actions (Details §③) sized up */
.fi-resource-sales-commissions .fi-sc-actions .fi-btn {
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 10px;
}

/* ── Motion safety ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .commission-dash *,
    .fi-resource-sales-commissions *,
    .commission-hero-card,
    .commission-vstep-dot,
    .commission-hbar-fill {
        transition: none !important;
        animation: none !important;
    }
}

/* ── RTL (Arabic) — scoped to document direction ──────────────────────
   Layout mirroring comes free from the logical properties above; the rules
   here cover the two things logic can't infer: glyph mirroring for
   directional arrows, and LTR isolation for financial numbers (digits and
   separators must never reorder inside RTL text). */

[dir="rtl"] a.commission-stat::after {
    content: "↖";
}

[dir="rtl"] .commission-drill-arrow,
[dir="rtl"] .commission-hero-go span,
[dir="rtl"] .commission-feed-link span {
    display: inline-block;
    transform: scaleX(-1);
}

[dir="rtl"] .commission-drill:hover .commission-drill-arrow {
    transform: scaleX(-1) translateX(0);
}

/* Financial numbers stay LTR ("40,797.80 جنيه مصري"), pinned to the card's
   visual start (right edge in RTL). */
[dir="rtl"] .commission-stat-vl,
[dir="rtl"] .commission-hero-big,
[dir="rtl"] .commission-top-value,
[dir="rtl"] .commission-hbar-value,
[dir="rtl"] .commission-emp-cell span,
[dir="rtl"] .commission-feed-when {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

[dir="rtl"] .commission-month-select {
    direction: rtl;
}

/* ── UAT-C: full stage labels — never truncate to "Waiting" ─────────────
   Filament badges are nowrap by default; inside the six-column Details
   summary grid the long stages ("Waiting Executive Approval", Arabic
   equivalents) clipped to their first word. Scoped to commission surfaces:
   the badge may WRAP CLEANLY instead of truncating, on laptop, mobile,
   light/dark, LTR and RTL alike. */
.commission-dash .fi-badge,
.fi-resource-sales-commissions .fi-badge,
.commission-summary .fi-badge {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    height: auto;
    line-height: 1.3;
    text-align: start;
}

.fi-resource-sales-commissions .commission-summary .fi-in-entry,
.fi-resource-sales-commissions .commission-summary .fi-in-text {
    overflow: visible;
}

/* ── Sidebar: compact section rhythm (PO 2026-08-25) ────────────────────
   Filament spaces sidebar groups with gap-y-7 (1.75rem); with sections
   defaulting to collapsed that reads as huge dead space between labels.
   The extra .fi-sidebar-nav ancestor wins on specificity, not load order,
   so this holds no matter where the stylesheet lands in <head>. Scoped to
   the sidebar only — page sub-navigation keeps the vendor rhythm. */
.fi-sidebar-nav .fi-sidebar-nav-groups {
    row-gap: 0.25rem;
}

/* ── Sidebar: no item icons while expanded (PO 2026-08-25) ──────────────
   Text-only navigation in the open sidebar — every item icon and any
   group icon goes. Scoped to .fi-sidebar-open on purpose: when the
   sidebar collapses to the desktop icon rail those icons are the ONLY
   navigation surface, so the rail keeps them (sub-items already render
   their icons exclusively in rail mode via Filament's own x-show). */
.fi-sidebar.fi-sidebar-open .fi-sidebar-item-icon {
    display: none;
}

.fi-sidebar.fi-sidebar-open .fi-sidebar-group-btn > .fi-icon {
    display: none;
}

/* ── Sidebar: section header vs item hierarchy (PO 2026-08-25) ──────────
   With the icons gone, headers and items were the same 14px/medium and
   the eye had nothing to separate them. Headers become a muted
   small-caps eyebrow; items keep the vendor 14px but indent one step,
   and nested sub-items a step further. Logical properties keep the
   indent correct in RTL. letter-spacing is reset under :lang(ar): it
   visually breaks connected Arabic script, and uppercase is a no-op
   there anyway (headers get a slightly larger size instead, since
   Arabic glyphs read smaller at equal px). */
.fi-sidebar-nav .fi-sidebar-group-label {
    font-size: var(--ho-text-xs);
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9ca3af;
}

.dark .fi-sidebar-nav .fi-sidebar-group-label {
    color: #6b7280;
}

:lang(ar) .fi-sidebar-nav .fi-sidebar-group-label {
    letter-spacing: 0;
    font-size: 0.75rem;
}

.fi-sidebar-nav .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-inline-start: 1rem;
}

.fi-sidebar-nav .fi-sidebar-sub-group-items .fi-sidebar-item-btn {
    padding-inline-start: 1.75rem;
}