/* Management reports (Matt / Morgan, Sep 2026). Uses base.html tokens so
   light + dark themes both work. */
.mr { max-width: 1360px; margin: 0 auto; padding-bottom: 40px; --mr-blue: #2563eb; --mr-green: #16a34a; --mr-red: #dc2626;
      /* pill / chip ink: the 700 shades clear 4.5:1 on the pale tints (the 500s sat at 2.9–4.1:1) */
      --mr-green-ink: #166534; --mr-red-ink: #b91c1c; }
.mr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.mr-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.mr-head h1 i { color: var(--mr-blue); font-size: 20px; }
.mr-head p { margin: 6px 0 0; color: var(--text-secondary); font-size: 13.5px; max-width: 760px; }
.mr-crumb { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.mr-crumb:hover { color: var(--mr-blue); }
.mr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.mr-btn:hover { border-color: #bfdbfe; color: var(--mr-blue); }
.mr-btn.primary { background: var(--mr-blue); border-color: var(--mr-blue); color: #fff; }
.mr-btn.primary:hover { filter: brightness(1.06); color: #fff; }

.mr-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.mr-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mr-field { display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.mr-field input, .mr-field select { height: 36px; padding: 6px 10px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 9px; min-width: 140px; }
.mr-filters .mr-go { margin-left: auto; display: flex; gap: 8px; }
.mr-row-sep { width: 100%; border-top: 1px dashed var(--border); margin: 4px 0 2px; }

/* Checklist dropdown */
.mr-pick { position: relative; }
.mr-pick > summary { list-style: none; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elevated); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; min-width: 150px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-pick > summary::-webkit-details-marker { display: none; }
.mr-pick > summary::after { content: '\25BE'; margin-left: auto; color: var(--text-tertiary); }
.mr-pick[data-count]:not([data-count="0"]) > summary { border-color: #93c5fd; background: rgba(37, 99, 235, 0.06); }
.mr-pick-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 280px; max-height: 360px; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.mr-pick-menu input[type="search"] { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 9px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); margin-bottom: 6px; }
.mr-pick-list { overflow: auto; display: grid; gap: 2px; }
.mr-pick-list label { display: flex; gap: 8px; align-items: center; padding: 6px 7px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.mr-pick-list label:hover { background: var(--bg-subtle); }
.mr-pick-list input { accent-color: var(--mr-blue); }
.mr-pick-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 6px; }
.mr-pick-foot button { border: 0; background: none; color: var(--mr-blue); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; }

.mr-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mr-presets a { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; }
.mr-presets a:hover { color: var(--mr-blue); border-color: #bfdbfe; }
.mr-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; height: 36px; }
.mr-toggle a { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; text-transform: none; letter-spacing: 0; }
.mr-toggle a.on { background: var(--mr-blue); color: #fff; }

.mr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mr-stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.mr-stat span { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.mr-stat strong { display: block; margin-top: 5px; font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.mr-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.mr-card h2 { margin: 0; padding: 13px 16px; font-size: 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mr-card h2 small { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.mr-note { margin: 0; padding: 9px 16px; font-size: 12.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.mr-table-wrap { overflow: auto; max-height: 70vh;
    /* Edge shadows that appear only where there is more table to scroll to. */
    background:
        linear-gradient(to right, var(--bg-elevated) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
        linear-gradient(to left, var(--bg-elevated) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
        linear-gradient(to right, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) left / 14px 100% no-repeat scroll,
        linear-gradient(to left, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) right / 14px 100% no-repeat scroll; }
.mr-scroll-cue { display: none; margin: 0; padding: 6px 16px; font-size: 12.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.mr-table-wrap.is-scrollable + .mr-scroll-cue, .mr-scroll-cue.is-on { display: block; }
.mr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mr-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-subtle); text-align: left; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mr-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, var(--border)); white-space: nowrap; }
.mr-table td.wrap { white-space: normal; min-width: 160px; max-width: 300px; }
.mr-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.mr-table tbody tr:hover td { background: rgba(37, 99, 235, 0.04); }
.mr-table tfoot td { font-weight: 700; background: var(--bg-subtle); border-top: 2px solid var(--border); position: sticky; bottom: 0; }
.mr-table a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-tertiary); }
.mr-table a:hover { color: var(--mr-blue); border-color: var(--mr-blue); }
.mr-empty { padding: 28px 16px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.mr-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.mr-pill.won { background: rgba(22, 163, 74, 0.12); color: var(--mr-green-ink); }
.mr-pill.lost { background: rgba(220, 38, 38, 0.1); color: var(--mr-red-ink); }

/* Chart */
.mr-chart { padding: 16px; }
.mr-chart-scroll { overflow-x: auto; padding-bottom: 4px; }
.mr-bars, .mr-bar-labels { display: grid; grid-template-columns: repeat(var(--mr-n, 12), minmax(52px, 1fr)); gap: 6px; min-width: calc(var(--mr-n, 12) * 58px); }
.mr-bars { align-items: end; height: 220px; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.mr-bar { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.mr-bar-pair { display: flex; align-items: flex-end; gap: 3px; height: calc(100% - 22px); width: 100%; justify-content: center; }
.mr-bar-pair span { width: 42%; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 1px; }
.mr-bar-pair .w { background: var(--mr-green); }
.mr-bar-pair .l { background: var(--mr-red); opacity: 0.8; }
.mr-bar-rate { font-size: 11px; font-weight: 700; color: var(--text-secondary); height: 20px; }
.mr-bar-labels { margin-top: 6px; }
.mr-bar-labels span { min-width: 0; text-align: center; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.mr-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.mr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* Weekly trend (Owner dashboard): narrow paired bars, labels every 4th week */
.mr-tone-green { background: var(--mr-green); }
.mr-tone-blue { background: var(--mr-blue); }
.mr-trend { display: grid; grid-template-columns: repeat(var(--mr-n, 12), minmax(14px, 1fr)); gap: 3px; min-width: calc(var(--mr-n, 12) * 17px); height: 220px; align-items: end; }
.mr-trend-col { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-width: 0; }
.mr-trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 1px; border-bottom: 1px solid var(--border); }
.mr-trend-bars span { flex: 1; min-height: 1px; border-radius: 3px 3px 0 0; }
.mr-trend-col small { height: 18px; margin-top: 4px; font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: visible; }
.mr-hbar { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 60px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.mr-hbar-track { height: 12px; background: var(--bg-subtle); border-radius: 6px; overflow: hidden; }
.mr-hbar-track span { display: block; height: 100%; background: var(--mr-blue); border-radius: 6px; }

/* Calendar */
.mr-cal { padding: 12px 16px 16px; }
.mr-cal h3 { margin: 12px 0 8px; font-size: 14px; }
.mr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mr-cal-grid .dow { background: var(--bg-subtle); font-size: 11px; font-weight: 700; color: var(--text-secondary); padding: 6px 8px; text-transform: uppercase; }
.mr-cal-day { min-height: 92px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 5px 6px; font-size: 12px; }
.mr-cal-day:nth-child(7n + 1) { border-left: 0; }
.mr-cal-day.out { background: var(--bg-subtle); color: var(--text-tertiary); }
.mr-cal-day b { font-size: 11.5px; color: var(--text-secondary); }
.mr-cal-job { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: rgba(37, 99, 235, 0.09); color: var(--text); text-decoration: none; font-size: 11.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-cal-job.won { background: rgba(22, 163, 74, 0.12); }
.mr-cal-job.lost { background: rgba(220, 38, 38, 0.1); }

/* Home */
.mr-sections { display: grid; gap: 18px; }
.mr-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0 0 10px; }
.mr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mr-tile { display: block; padding: 15px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 13px; text-decoration: none; color: var(--text); transition: border-color .12s, box-shadow .12s; }
.mr-tile:hover { border-color: #93c5fd; box-shadow: var(--shadow-md); }
.mr-tile strong { display: block; font-size: 15px; margin-bottom: 4px; }
.mr-tile span { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.mr-mapping { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.mr-mapping span { padding: 3px 9px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-secondary); }
.mr-mapping span.won { background: rgba(22, 163, 74, 0.12); color: var(--mr-green-ink); }
.mr-mapping span.lost { background: rgba(220, 38, 38, 0.1); color: var(--mr-red-ink); }

/* Settings form */
.mr-map-table td { vertical-align: middle; }
.mr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.mr-seg label { display: flex; align-items: center; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-secondary); border-left: 1px solid var(--border); }
.mr-seg label:first-child { border-left: 0; }
.mr-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mr-seg label:has(input:checked) { background: var(--mr-blue); color: #fff; }
.mr-seg label:has(input:focus-visible) { outline: 2px solid var(--mr-blue); outline-offset: -2px; }

@media (max-width: 700px) {
    .mr-filters .mr-go { margin-left: 0; width: 100%; }
    .mr-field, .mr-field input, .mr-field select, .mr-pick, .mr-pick > summary { width: 100%; max-width: none; }
    .mr-pick-menu { width: 100%; }
    .mr-cal-day { min-height: 64px; }
    .mr-hbar { grid-template-columns: 110px 1fr 48px; }
}


/* New UI (Sep 24 2026): the Sales report's workspace skin — navy title band,
   tinted filter tray, banded section heads, zebra rows. The skin's tokens
   (sales-planning-workspaces.css) carry light + dark, so only structure here. */
.sales-planning-workspace.mr { max-width: 1440px; --mr-blue: var(--sp-blue); }
.sales-planning-workspace .mr-crumb { color: var(--sp-muted); }
.sales-planning-workspace .mr-crumb:hover { color: var(--sp-blue); }
.sales-planning-workspace .mr-head { align-items: center; padding: 12px 16px; margin: 0 0 14px; background: var(--sp-navy); color: #fff; border: 1px solid #315370; border-radius: 12px; box-shadow: 0 2px 5px #10263d12; }
.sales-planning-workspace .mr-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.sales-planning-workspace .mr-head h1 { color: #fff; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; }
.sales-planning-workspace .mr-head h1 i { color: #91bcff; }
.sales-planning-workspace .mr-head p { color: #d4e3f1; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; }
.sales-planning-workspace .mr-head .mr-btn { background: #264760; color: #f0f6fd; border-color: #52738d; border-radius: 8px; }
.sales-planning-workspace .mr-head .mr-btn:hover { background: #345b79; color: #fff; border-color: #6f8ea8; }
.sales-planning-workspace .mr-head .mr-btn:focus-visible { outline-color: #a5ccff; }
.sales-planning-workspace .mr-btn { border-radius: 8px; background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-ink); }
.sales-planning-workspace .mr-btn:hover { background: var(--sp-hover); border-color: var(--sp-border); color: var(--sp-blue); }
.sales-planning-workspace .mr-btn.primary { background: #245bc9; border-color: #245bc9; color: #fff; }
.sales-planning-workspace .mr-btn.primary:hover { background: #1b4ba9; color: #fff; filter: none; }
.sales-planning-workspace .mr-panel { background: var(--sp-tint); border-color: var(--sp-border); border-radius: 10px; box-shadow: 0 1px 3px #17324d0a; }
.sales-planning-workspace .mr-field { color: var(--sp-muted); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sales-planning-workspace :is(.mr-field input, .mr-field select, .mr-pick > summary) { background: var(--sp-surface); border-color: var(--sp-border); border-radius: 8px; color: var(--sp-ink); }
.sales-planning-workspace .mr-pick[data-count]:not([data-count="0"]) > summary { border-color: var(--sp-blue); background: var(--sp-hover); }
.sales-planning-workspace .mr-pick-menu { background: var(--sp-surface); border-color: var(--sp-border); border-radius: 10px; box-shadow: 0 10px 28px #10263d2e; }
.sales-planning-workspace .mr-pick-list label:hover { background: var(--sp-hover); }
.sales-planning-workspace .mr-row-sep { border-color: var(--sp-border); }
.sales-planning-workspace .mr-presets { padding-top: 10px; border-top: 1px dashed var(--sp-border); }
.sales-planning-workspace .mr-presets a { background: var(--sp-surface); color: var(--sp-muted); border-color: var(--sp-border); }
.sales-planning-workspace .mr-presets a:hover { background: var(--sp-hover); color: var(--sp-blue); border-color: var(--sp-border); }
.sales-planning-workspace .mr-toggle { border-color: var(--sp-border); border-radius: 8px; background: var(--sp-surface); }
.sales-planning-workspace .mr-toggle a.on { background: #245bc9; }
.sales-planning-workspace .mr-summary { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.sales-planning-workspace .mr-stat { position: relative; overflow: hidden; padding: 13px 15px 13px 17px; background: var(--sp-surface); border-color: var(--sp-border); border-radius: 10px; }
.sales-planning-workspace .mr-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sp-blue); }
.sales-planning-workspace .mr-stat span { color: var(--sp-muted); font-size: 11px; }
.sales-planning-workspace .mr-stat strong { color: var(--sp-ink); font-size: 22px; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sales-planning-workspace .mr-card { background: var(--sp-surface); border-color: var(--sp-border); border-radius: 10px; }
.sales-planning-workspace .mr-card h2 { background: var(--sp-section); border-bottom-color: var(--sp-border); color: var(--sp-ink); padding: 12px 16px; }
.sales-planning-workspace .mr-card h2 small { color: var(--sp-muted); }
.sales-planning-workspace :is(.mr-note, .mr-scroll-cue) { color: var(--sp-muted); border-color: var(--sp-section); line-height: 1.5; }
.sales-planning-workspace .mr-table th { background: var(--sp-section); color: var(--sp-ink); border-color: var(--sp-border); }
.sales-planning-workspace .mr-table td { border-color: var(--sp-section); color: var(--sp-ink); }
.sales-planning-workspace .mr-table tbody tr:nth-child(even) td { background: var(--sp-tint); }
.sales-planning-workspace .mr-table tbody tr:hover td { background: var(--sp-hover); }
.sales-planning-workspace .mr-table tfoot td { background: var(--sp-section); border-color: var(--sp-border); }
.sales-planning-workspace .mr-table a { border-bottom-color: var(--sp-muted); }
.sales-planning-workspace .mr-table a:hover { color: var(--sp-blue); border-color: var(--sp-blue); }
.sales-planning-workspace .mr-empty { background: var(--sp-tint); color: var(--sp-muted); }
.sales-planning-workspace .mr-trend-bars, .sales-planning-workspace .mr-bars { border-color: var(--sp-border); }
.sales-planning-workspace .mr-cal-grid { border-color: var(--sp-border); background: var(--sp-surface); }
.sales-planning-workspace .mr-cal-day { border-color: var(--sp-section); }
/* Hub: each section is a banded card, like the Sales report's sections. */
.sales-planning-workspace .mr-section { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 10px; overflow: hidden; }
.sales-planning-workspace .mr-section > h2 { margin: 0; padding: 11px 16px; background: var(--sp-section); border-bottom: 1px solid var(--sp-border); color: var(--sp-ink); font-size: 14px; text-transform: none; letter-spacing: 0; }
.sales-planning-workspace .mr-section .mr-grid { padding: 14px 16px 16px; }
.sales-planning-workspace .mr-tile { background: var(--sp-tint); border-color: var(--sp-border); border-radius: 10px; }
.sales-planning-workspace .mr-tile:hover { border-color: var(--sp-blue); background: var(--sp-hover); box-shadow: none; }
.sales-planning-workspace .mr-tile strong { color: var(--sp-ink); }
.sales-planning-workspace .mr-tile span { color: var(--sp-muted); }
.sales-planning-workspace .mr-mapping span { background: var(--sp-surface); border: 1px solid var(--sp-section); }
[data-theme="dark"] .sales-planning-workspace .mr-head { background: #10263d; border-color: #2c4661; }
[data-theme="dark"] .sales-planning-workspace .mr-btn.primary { background: #2f6fe0; border-color: #2f6fe0; }
[data-theme="dark"] .sales-planning-workspace.mr { --mr-green: #4ade80; --mr-red: #f87171; --mr-green-ink: #a7f3c0; --mr-red-ink: #fecaca; }
@media (max-width: 760px) {
    .sales-planning-workspace .mr-head { padding: 12px; }
    .sales-planning-workspace .mr-head h1 { font-size: 19px; }
    .sales-planning-workspace .mr-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sales-planning-workspace .mr-filters .mr-go { margin-left: 0; width: 100%; }
}

/* Table search + pages (every management report table) */
.mr-table-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.mr-table-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; min-width: 260px; flex: 0 1 360px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); color: var(--text-secondary); }
.mr-table-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); }
.mr-table-search:focus-within { border-color: var(--mr-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.mr-table-count { font-size: 12.5px; color: var(--text-secondary); }
.mr-table tbody tr:nth-child(even of :not([hidden])) td { background: var(--bg-subtle); }
.mr-table tbody tr:nth-child(odd of :not([hidden])) td { background: var(--bg-elevated); }
.mr-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border-subtle, var(--border)); font-size: 12.5px; color: var(--text-secondary); }
.mr-pager[hidden] { display: none; }
.mr-pager .mr-btn { height: 32px; }
.mr-pager .mr-btn:disabled { opacity: .45; cursor: default; }
.mr-table tfoot[hidden] { display: none; }
@media (max-width: 760px) { .mr-table-search { min-width: 0; flex: 1 1 100%; } .mr-pager { justify-content: space-between; } }

/* "Numbers this report uses" box + tolerance form */
.mr-settings { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--mr-blue); border-radius: 10px; }
.mr-settings h2 { margin: 0 0 6px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.mr-settings h2 i { color: var(--mr-blue); }
.mr-settings ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mr-settings li { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--border-subtle, var(--border)); color: var(--text); }
.mr-settings p { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); max-width: 760px; }
.mr-settings .mr-settings-ask { margin: 0; }
.mr-tol-table td { padding: 10px 12px; }
.mr-tol-input { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-secondary); }
.mr-tol-input input { width: 160px; height: 38px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; font-variant-numeric: tabular-nums; }
.mr-tol-input input[name^="pct_"] { width: 90px; }
.mr-tol-now { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 16px; font-size: 12.5px; border-top: 1px solid var(--border-subtle, var(--border)); }
.mr-tol-now span { padding: 2px 9px; border-radius: 999px; background: var(--bg-subtle); }
.mr-tol-reset { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.sales-planning-workspace .mr-settings { background: var(--sp-surface); border-color: var(--sp-border); border-left-color: var(--sp-blue); }
.sales-planning-workspace .mr-settings li { background: var(--sp-tint); border-color: var(--sp-section); color: var(--sp-ink); }
.sales-planning-workspace .mr-table-search { background: var(--sp-surface); border-color: var(--sp-border); }
.sales-planning-workspace .mr-table tbody tr:nth-child(even of :not([hidden])) td { background: var(--sp-tint); }
.sales-planning-workspace .mr-table tbody tr:nth-child(odd of :not([hidden])) td { background: var(--sp-surface); }
.sales-planning-workspace .mr-table tbody tr:hover td { background: var(--sp-hover); }
.sales-planning-workspace :is(.mr-table-tools, .mr-pager, .mr-tol-now) { border-color: var(--sp-section); }

.mr-pill.warn { background: rgba(217, 119, 6, 0.14); color: #92400e; }
[data-theme="dark"] .mr-pill.warn { background: rgba(251, 191, 36, 0.16); color: #fde68a; }

/* Work type summary by division (Matt, Sep 28 2026): division rows open to subcategories. */
.mr-card h2:has(.mr-expand-all) { display: flex; align-items: center; gap: 8px; }
.mr-division-table tr.mr-parent td { font-weight: 600; }
.mr-division-table tr.mr-sub td { background: var(--bg-elevated); font-size: 13px; }
.mr-division-table tr.mr-sub td:first-child { padding-left: 28px; color: var(--text-tertiary); }
.mr-division-table .mr-sub-of { font-size: 12px; }
.mr-expand { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--mr-blue, #245bc9); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mr-expand:hover { background: rgba(36, 91, 201, 0.08); }
.mr-expand i { transition: transform .15s; font-size: 11px; }
.mr-expand[aria-expanded="true"] i { transform: rotate(90deg); }
.mr-check { display: inline-flex; align-items: center; gap: 8px; height: 36px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.mr-field .mr-check input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin: 0; flex: none; }