/* Sales Team Board and My sales (/sales/board, /sales/my, /sales/board/settings) */
.sb-page { --sb-ink: #1d2b40; --sb-muted: #68768a; --sb-line: #e3e8ef; --sb-good: #216a3b; --sb-bad: #a12a20; }
.sb-page .app-card { min-width: 0; }

.sb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sb-toolbar select { padding: 9px 10px; border: 1px solid #cfd7e3; border-radius: 10px; font: inherit; color: var(--app-ink); background: #fff; }
.sb-updated { color: var(--sb-muted); font-size: .8rem; }
.sb-secondary { color: var(--app-navy); background: #eef2f7; text-decoration: none; display: inline-block; }
.sb-secondary:hover { background: #e2e8f1; }
.sb-hint { color: #224f91; background: #e9f1ff; border: 1px solid #c9dbf7; margin: 0; }

.sb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.sb-kpis article { padding: 18px 20px; border-right: 1px solid var(--sb-line); }
.sb-kpis article:last-child { border-right: 0; }
.sb-kpis span, .sb-rep-card dt { display: block; color: var(--sb-muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sb-kpis strong { display: block; margin: 10px 0 6px; color: var(--sb-ink); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.sb-kpis strong em { font-style: normal; font-size: 1rem; color: var(--sb-muted); }
.sb-kpis small { color: var(--sb-muted); font-size: .76rem; }

.sb-area { display: grid; gap: 10px; }
.sb-area-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-top: 4px; }
.sb-area-head h2 { margin: 0; font-size: .95rem; color: var(--sb-ink); display: flex; align-items: center; gap: 8px; }
.sb-area-head h2::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--sb-colour); }
.sb-area-head span { color: var(--sb-muted); font-size: .8rem; }
.sb-rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sb-rep-grid.single { grid-template-columns: minmax(0, 1fr); }
.sb-rep-card { background: #fff; border: 1px solid var(--app-line); border-top: 3px solid var(--sb-colour); border-radius: 14px; box-shadow: 0 2px 8px rgba(20,43,77,.04); min-width: 0; }
.sb-rep-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--sb-line); }
.sb-rep-card h3 { margin: 0; color: var(--sb-ink); font-size: 1rem; }
.sb-rep-total { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.sb-rep-total strong { color: var(--sb-ink); font-size: 1.75rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sb-rep-card header p { margin: 0; color: var(--sb-muted); font-size: .78rem; }
.sb-rep-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.sb-rep-card dl > div { padding: 12px 18px; border-bottom: 1px solid var(--sb-line); min-width: 0; }
.sb-rep-card dl > div:nth-child(odd) { border-right: 1px solid var(--sb-line); }
.sb-rep-card dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.sb-rep-grid.single .sb-rep-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-rep-grid.single .sb-rep-card dl > div { border-right: 1px solid var(--sb-line); }
.sb-rep-grid.single .sb-rep-card dl > div:nth-child(3n) { border-right: 0; }
.sb-rep-grid.single .sb-rep-card dl > div:nth-last-child(-n+3) { border-bottom: 0; }
.sb-rep-card dd { margin: 6px 0 2px; color: var(--sb-ink); font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.sb-rep-card dl small { color: var(--sb-muted); font-size: .72rem; }

.sb-chip { flex-shrink: 0; padding: 4px 9px; border-radius: 999px; background: #eef2f7; color: #4d5b70; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sb-chip.best { background: #e7f6ec; color: var(--sb-good); }
.sb-change { padding: 2px 7px; border-radius: 6px; font-size: .74rem; font-weight: 800; background: #eef2f7; color: #4d5b70; }
.sb-change.pos { background: #e7f6ec; }
.sb-change.neg { background: #fdecea; }
.sb-page .pos { color: var(--sb-good) !important; }
.sb-page .neg { color: var(--sb-bad) !important; }

.sb-status { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 800; background: #eef2f7; color: #4d5b70; white-space: nowrap; }
.sb-status.good { background: #e7f6ec; color: var(--sb-good); }
.sb-status.warn { background: #fff3d6; color: #8a5b00; }
.sb-status.bad { background: #fdecea; color: var(--sb-bad); }
.sb-status.info { background: #e9f1ff; color: #224f91; }

.sb-section-head { margin-bottom: 14px; }
.sb-section-head h2 { margin: 0; color: var(--sb-ink); font-size: 1.05rem; }
.sb-section-head p { margin: 5px 0 0; color: var(--sb-muted); font-size: .84rem; max-width: 900px; }
.sb-note { margin: 12px 0 0; color: var(--sb-muted); font-size: .8rem; }
.sb-empty { margin: 6px 0; color: var(--sb-muted); font-size: .84rem; }
.sb-muted { color: var(--sb-muted); }
.sb-sub { margin: 2px 0 8px; color: var(--sb-muted); font-size: .76rem; }

.sb-table-wrap { width: 100%; overflow-x: auto; }
.sb-table { width: 100%; border-collapse: collapse; font-size: .82rem; color: var(--sb-ink); }
.sb-table th { padding: 8px 10px; border-bottom: 1px solid #cfd7e3; color: var(--sb-muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.sb-table td { padding: 9px 10px; border-bottom: 1px solid #edf1f5; vertical-align: top; }
.sb-table td small { display: block; margin-top: 2px; color: var(--sb-muted); font-size: .72rem; }
.sb-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-table.compact td { padding: 7px 8px; }
.sb-table input[type=number] { width: 100%; min-width: 90px; box-sizing: border-box; padding: 7px 8px; border: 1px solid #cfd7e3; border-radius: 8px; font: inherit; text-align: right; }
.sb-table .sb-order-input { width: 70px; min-width: 70px; }
.sb-table select { padding: 7px 8px; border: 1px solid #cfd7e3; border-radius: 8px; font: inherit; }
.sb-table .sb-total-input { font-weight: 800; background: #f6f8fb; }
.sb-total-row td { background: #f3f6fa; font-weight: 800; }
.sb-off-day td { color: #9aa5b5; font-style: italic; }
.sb-record td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sb-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.sb-chart-grid.single { grid-template-columns: minmax(0, 1fr); }
.sb-chart-grid figure { margin: 0; min-width: 0; }
.sb-chart-grid figcaption { display: grid; gap: 2px; margin-bottom: 6px; font-size: .86rem; color: var(--sb-ink); }
.sb-chart-grid figcaption small { color: var(--sb-muted); font-size: .74rem; }
.sb-chart { display: block; width: 100%; height: auto; }
.sb-chart-grid line.sb-chart-grid, .sb-chart .sb-chart-grid { stroke: #e7ecf2; stroke-width: 1; }
.sb-chart .sb-chart-y, .sb-chart .sb-chart-x { fill: #8592a4; font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sb-chart .sb-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sb-chart .sb-chart-compare { fill: none; stroke: #8a95a5; stroke-width: 1.6; stroke-dasharray: 5 4; }
.sb-chart .sb-chart-divider { stroke: #b6c0cd; stroke-dasharray: 3 3; }
.sb-chart .sb-chart-divider-label { fill: #4d5b70; font-size: 10px; font-weight: 700; }

.sb-rep-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.sb-rep-columns.single { grid-template-columns: minmax(0, 1fr); }
.sb-rep-columns > div { min-width: 0; }
.sb-rep-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--sb-ink); }
.sb-rep-title::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--sb-colour); }

.sb-more { margin-top: 8px; padding: 6px 12px; border: 1px solid #d6dde7; border-radius: 999px; background: #fff; color: var(--app-navy); font: inherit; font-size: .8rem; cursor: pointer; }
.sb-more:hover { background: #f3f6fa; }

.sb-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sb-tab-group { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-tab-group button { padding: 6px 12px; border: 1px solid #d6dde7; border-radius: 8px; background: #fff; color: var(--sb-ink); font: inherit; font-size: .8rem; cursor: pointer; }
.sb-tab-group button.on { background: #1d2b40; border-color: #1d2b40; color: #fff; }

.sb-nb-summary { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-bottom: 12px; }
.sb-nb-summary div { display: grid; gap: 2px; font-size: .86rem; }
.sb-nb-summary small { color: var(--sb-muted); font-size: .74rem; }
.sb-window { display: block; width: 130px; height: 6px; margin-top: 6px; border-radius: 3px; background: #e7ecf2; overflow: hidden; }
.sb-window i { display: block; height: 100%; background: #2f6fcf; }
.sb-window.warn i { background: #c4932a; }
.sb-window.bad i { background: #c0392b; }

.sb-footnote { padding: 16px 20px; border-radius: 14px; background: #f6f8fb; color: #4d5b70; font-size: .8rem; }
.sb-footnote h2 { margin: 0 0 6px; font-size: .86rem; color: var(--sb-ink); }
.sb-footnote ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

.sb-target-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 12px; }
.sb-target-tools label { display: grid; gap: 4px; font-size: .72rem; font-weight: 800; color: var(--sb-muted); text-transform: uppercase; letter-spacing: .05em; }
.sb-target-tools select { padding: 8px 10px; border: 1px solid #cfd7e3; border-radius: 8px; font: inherit; }
.sb-holidays { display: grid; gap: 6px; margin-top: 14px; }
.sb-holidays > span { color: #5f6b7d; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sb-holidays textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid #cfd7e3; border-radius: 10px; font: inherit; }
.sb-holidays small { color: var(--sb-muted); }

@media (max-width: 1000px) {
    .sb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-kpis article:nth-child(2) { border-right: 0; }
    .sb-kpis article:nth-child(-n+2) { border-bottom: 1px solid var(--sb-line); }
    .sb-rep-grid, .sb-chart-grid, .sb-rep-columns { grid-template-columns: minmax(0, 1fr); }
    .sb-rep-grid.single .sb-rep-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sb-kpis { grid-template-columns: minmax(0, 1fr); }
    .sb-kpis article { border-right: 0; border-bottom: 1px solid var(--sb-line); }
    .sb-rep-card dl, .sb-rep-grid.single .sb-rep-card dl { grid-template-columns: minmax(0, 1fr); }
    .sb-rep-card dl > div { border-right: 0 !important; border-bottom: 1px solid var(--sb-line) !important; }
    .app-page-header { flex-direction: column; }
    .sb-toolbar { justify-content: flex-start; }
}

/* Commission */
.sb-warn { color: #8a5b00; background: #fff8e6; border: 1px solid #f1d9a0; margin: 0; }
.sb-gap-top { margin-top: 16px; }
.sb-detail-row > td { background: #f8fafc; padding: 12px 14px; }
.sb-commission-detail { display: grid; gap: 10px; }
.sb-category-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-category-chips span { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--sb-line); }
.sb-category-chips small { color: var(--sb-muted); font-size: .7rem; }
.sb-tier-table { max-width: 460px; margin-bottom: 8px; }
.sb-detail-row > td { max-width: 0; }
.sb-select { padding: 7px 10px; border: 1px solid #cfd7e3; border-radius: 8px; font: inherit; background: #fff; }
.sb-tab-group button b { margin-left: 4px; color: var(--sb-muted); font-weight: 700; }
.sb-tab-group button.on b { color: #cfd7e3; }
.sb-split { margin-top: 6px; }
.sb-row-done td { background: #f4faf6; }

/* Recurring renewals grouped by customer */
.sb-group-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sb-group-bar .sb-sub { margin: 2px 0; }
.sb-group-bar .sb-more { margin-top: 0; }
.sb-grouped tbody + tbody .sb-group-head td { border-top: 10px solid #fff; }
.sb-group-head td { padding: 0; background: #f3f6fa; border-bottom: 1px solid #dfe5ee; }
.sb-group-head button { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; width: 100%; padding: 9px 10px; border: 0; background: none; color: var(--sb-ink); font: inherit; text-align: left; cursor: pointer; }
.sb-group-head button:hover { background: #e9eef5; }
.sb-group-head button:focus-visible { outline: 2px solid var(--app-navy, #1d2b40); outline-offset: -2px; }
.sb-group-head b { font-size: .86rem; }
.sb-group-head small { display: inline; margin: 0; color: var(--sb-muted); font-size: .74rem; }
.sb-caret { width: 12px; color: var(--sb-muted); }
.sb-row-stopped td { color: var(--sb-muted); }
.sb-group-head td { vertical-align: middle; }
.sb-group-head td.num { padding: 9px 10px; }
.sb-table td.sb-item { min-width: 180px; max-width: 320px; }