/* My Commission page. Values copied from the decoded export (~L2469-2665). */

.cm-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 1440px; }
.cm-admin-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cm-select { width: 210px; height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--ink); outline: none; cursor: pointer; }

.cm-rollup-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.cm-rollup-grid { display: grid; grid-template-columns: minmax(0,1fr) 90px 78px 108px 128px; gap: 10px; align-items: center; }
.cm-rollup-row { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.cm-rollup-total-row { padding: 12px 16px; background: var(--surface-2); }
.cm-met-badge { justify-self: center; display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.cm-single-layout { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; }
.cm-main-col { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cm-side-col { flex: 1 1 380px; min-width: 0; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }

.cm-points-card { padding: 16px 18px 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cm-points-value { font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cm-progress-track { height: 8px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.cm-progress-fill { height: 100%; border-radius: 999px; transition: width var(--dur-base) var(--ease-out); }
.cm-segmented { flex: none; display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); gap: 3px; }
.cm-segmented-btn { height: 28px; padding: 0 16px; border: none; border-radius: 999px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; background: transparent; color: var(--ink-2); }
.cm-segmented-btn.is-on { background: var(--blue-500); color: #fff; }

.cm-paycheck-card { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.cm-pay-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cm-pay-select { height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--ink); outline: none; cursor: pointer; }
.cm-week-grid { display: grid; grid-template-columns: minmax(0,1fr) 62px 84px 56px 68px 68px 70px 92px; gap: 10px; align-items: center; }
.cm-week-row { padding: 9px 0; border-top: 1px solid var(--line-soft); }
.cm-result-badge { justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: 999px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.cm-hire-grid { display: grid; grid-template-columns: 78px minmax(0,1fr) 96px 88px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }

.cm-history-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.cm-history-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 104px 104px; gap: 10px; align-items: center; }
.cm-history-row { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }

.cm-ref-head { display: flex; align-items: baseline; gap: 10px; padding: 0 2px; }
.cm-ref-card { overflow: hidden; }
.cm-ref-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: none; cursor: pointer; text-align: left; background: transparent; }
.cm-ref-toggle svg { flex: none; transition: transform 140ms var(--ease-out); }
.cm-ref-toggle.is-open svg { transform: rotate(90deg); }
.cm-ref-pos-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 34px; border-bottom: 1px solid var(--line-soft); }