body { font-family: -apple-system, Segoe UI, Arial, sans-serif; margin: 0; background: #f4f5f7; color: #1a1a1a; }
header { background: #1a2b4a; color: white; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
header a { color: #cfe0ff; text-decoration: none; margin-left: 16px; }
header a:hover { text-decoration: underline; }
main { padding: 20px; max-width: 1400px; margin: 0 auto; }

.scoreboard { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.score-card { background: white; border-radius: 8px; padding: 12px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); min-width: 150px; }
.score-card .label { font-size: 12px; color: #666; text-transform: uppercase; }
.score-card .value { font-size: 22px; font-weight: 600; }

.filters { background: white; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters select, .filters input[type=text] { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; }

table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
th { background: #f0f1f4; font-weight: 600; position: sticky; top: 0; }
tr:hover { background: #fafbff; }

.light { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.light.green { background: #2e9e4b; }
.light.yellow { background: #e8b800; }
.light.orange { background: #e07b1a; }
.light.gray { background: #d0d3d8; }
.light.recorded-partial { background: linear-gradient(90deg, #2e9e4b 50%, #d0d3d8 50%); }
.light.blue { background: #2f6fb0; } /* Parts tab: distributor-credit recovery, vs green = customer/payer-paid */
.light.sm { width: 9px; height: 9px; margin-right: 2px; }

/* Parts tab preset filter chips (one-click, added 2026-07-21) -- distinct
   from the payment board's <select>-dropdown filter pattern by design,
   since these are meant to be single-click canned views. */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { background: white; border: 2px solid #d0d3d8; border-radius: 20px; padding: 10px 18px; cursor: pointer;
        text-decoration: none; color: #1a1a1a; font-size: 13px; display: flex; flex-direction: column; align-items: center;
        min-width: 150px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.chip:hover { border-color: #1a2b4a; }
.chip.active { border-color: #1a2b4a; background: #1a2b4a; color: white; }
.chip .chip-label { font-weight: 600; }
.chip .chip-count { font-size: 16px; font-weight: 700; margin-top: 2px; }
.chip .chip-dollars { font-size: 11px; opacity: .8; }
.chip.clear { border-style: dashed; color: #888; }

/* Group-by-vendor subtotal rows in the drill-down table */
tr.vendor-group-header td { background: #eef1f7; font-weight: 700; border-top: 2px solid #c8ccd6; }

/* Margin / vendor-reconciliation strip tables, reused mini-table look */
.mini-table-wrap { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.mini-table { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 12px 16px; flex: 1; min-width: 320px; }
.mini-table h3 { margin: 0 0 8px; font-size: 14px; }
.mini-table table { box-shadow: none; }
.mini-table th, .mini-table td { padding: 4px 8px; font-size: 12px; }

.apply-disabled { position: relative; cursor: not-allowed; }
.apply-disabled[disabled] { opacity: .55; }

/* Dual light rows (Labor / Parts), added 2026-07-20 -- two thin rows
   stacked in the same P/L/R column instead of doubling row height. */
.dual-light-cell { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
.light-row { display: flex; align-items: center; line-height: 1; }
.parts-na { font-size: 9px; color: #aaa; font-style: italic; }

.legend { margin-left: auto; font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; }
.legend .light { margin-left: 10px; }
.legend .light:first-child { margin-left: 4px; }

.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { text-decoration: underline; }
.expected-date { color: #888; font-style: italic; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.paid-not-applied { background: #fff3cd; color: #8a6300; }
.badge.unpaid-chase { background: #f8d7da; color: #842029; }
.badge.matched-clean { background: #d1ecf1; color: #0c5460; }
.badge.cancelled { background: #e2e3e5; color: #41464b; }
.badge.new-payer { background: #e0d4f7; color: #4a2a7a; }
.badge.review-reason { background: #f8d7da; color: #842029; margin-right: 4px; white-space: nowrap; }
.badge.gui-applied { background: #d4edda; color: #155724; }
.badge.gui-applied-not-closed, .badge.gui-warn { background: #fff3cd; color: #a05a00; }
.light.gui-warn { background: #e0a326; }
.badge.just-applied { background: #cfe2ff; color: #084298; font-weight: 700; }
tr.just-applied-row { background: #eef5ff; }
tr.just-applied-row:hover { background: #e2ecff; }

button, .btn { padding: 8px 16px; border-radius: 5px; border: none; font-weight: 600; cursor: pointer; }
button[disabled], .btn.disabled { background: #d0d3d8; color: #777; cursor: not-allowed; }
.btn.primary { background: #1a2b4a; color: white; }

.flash { background: #fff3cd; border: 1px solid #ffe08a; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.login-box { max-width: 340px; margin: 80px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.login-box input { width: 100%; padding: 8px; margin: 6px 0 14px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-row input, .form-row select { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; }