:root { --red:#c00000; --dark:#151515; --muted:#666; --line:#ddd; --bg:#f7f7f7; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:#111; }
header { display:flex; align-items:center; gap:14px; padding:12px 18px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.logo { width:54px; height:34px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; border-radius:6px; }
header h1 { margin:0; font-size:22px; } header small { color:var(--muted); }
nav { display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px; background:#fff; border-bottom:1px solid var(--line); }
button, .btn { border:0; background:var(--dark); color:#fff; padding:10px 14px; border-radius:8px; font-weight:700; cursor:pointer; }
button.secondary { background:#555; } button.red { background:var(--red); } button.light { background:#eee; color:#111; } button.small { padding:6px 8px; font-size:12px; }
main { padding:18px; max-width:1280px; margin:auto; } .screen { display:none; } .screen.active { display:block; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:12px; }
.card h2,.card h3 { margin-top:0; } input, textarea, select { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; font:inherit; }
textarea { min-height:100px; } label { display:block; margin:10px 0 4px; font-weight:700; }
table { width:100%; border-collapse:collapse; background:#fff; } th,td { padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f0f0f0; position:sticky; top:126px; z-index:3; } tr:hover { background:#fafafa; cursor:pointer; }
.muted { color:var(--muted); } .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .kpi { font-size:28px; font-weight:800; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#eee; font-size:12px; font-weight:700; } .badge.done { background:#d7f5dd; } .badge.open { background:#ffe4e4; }
.check-list { max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:8px; } .check-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-bottom:1px solid #eee; } .check-row:last-child { border-bottom:0; } .check-row input { width:auto; margin:0; } .check-row label { margin:0; flex:1; font-weight:600; } .count-pill { margin-left:auto; background:#eee; border-radius:999px; padding:3px 8px; font-size:12px; font-weight:700; }
.timeline { border-left:3px solid var(--red); padding-left:12px; margin-left:4px; } .timeline-item { margin:0 0 14px; }

.trip-sheet { overflow:hidden; padding:0; }
.trip-sheet-header { padding:14px 16px; background:#f0f0f0; border-bottom:1px solid var(--line); font-weight:800; }
.trip-line { display:grid; grid-template-columns:minmax(190px,1.3fr) minmax(120px,.75fr) minmax(240px,1.6fr) minmax(110px,.55fr); gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; }
.trip-line:last-child { border-bottom:0; }
.trip-line:hover { background:#fafafa; }
.trip-line.completed { background:#eeeeee; color:#777; }
.trip-line.completed .trip-company { text-decoration:line-through; }
.trip-company { font-weight:800; }
.trip-status { justify-self:end; }
.call-detail-actions { display:flex; gap:6px; flex-wrap:wrap; }
.call-detail-actions button.selected { background:var(--red); }
.call-detail-actions button:not(.selected) { background:#555; }
.detail-nav { display:flex; justify-content:space-between; gap:8px; margin-bottom:12px; }
button, .btn, a { touch-action:manipulation; -webkit-tap-highlight-color:rgba(0,0,0,.08); }
.proposal-row { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.proposal-row:last-child { border-bottom:0; }
.proposal-link { flex:1; color:#0645ad; font-weight:700; text-decoration:none; }
.proposal-date { color:var(--muted); white-space:nowrap; }
.error-banner { display:none; background:#ffe7e7; color:#8b0000; padding:10px 18px; border-bottom:1px solid #d99; font-weight:700; }
@media(max-width:700px) { .trip-line { grid-template-columns:1fr; gap:4px; } .trip-status { justify-self:start; } }
@media(max-width:700px) { header h1 { font-size:18px; } th { position:static; } table, thead, tbody, tr, th, td { display:block; } thead { display:none; } td { border-bottom:0; } tr { border-bottom:1px solid var(--line); padding:8px; } }


.contact-row{border:1px solid var(--line);border-radius:8px;padding:10px;margin:0 0 10px}.contact-row.inactive{opacity:.58}.contact-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.interaction-box{border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0}.nearest-distance{font-size:1.45rem;font-weight:800;margin:12px 0}.trip-line.next-unvisited{outline:3px solid #f4b400;outline-offset:-3px}.coordinate-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

button.danger { background:#8b0000; }
button.danger:hover { background:#650000; }

/* Multi-territory customer selector */
.multi-select{position:relative;margin-bottom:12px}.multi-select-button{width:100%;text-align:left;background:#fff;color:#222;border:1px solid var(--line);font-weight:500;min-height:44px}.multi-select-button:after{content:"▾";float:right}.multi-select-menu{display:none;position:absolute;left:0;right:0;z-index:50;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);max-height:330px;overflow:auto;padding:8px}.multi-select-menu.open{display:block}.multi-option{display:flex;align-items:center;gap:9px;padding:8px;border-radius:6px;margin:0;font-weight:600}.multi-option:hover{background:#f3f4f6}.multi-option input{width:auto;margin:0}.multi-add-row{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:8px;margin-top:6px}.multi-add-row input{margin:0}.territory-empty{padding:6px}

.customer-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-top:14px}.summary-tile{border:1px solid var(--line);border-radius:9px;padding:11px;background:#fafafa}.summary-tile span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:5px}.summary-tile strong{font-size:15px}.app-footer{max-width:1280px;margin:0 auto;padding:12px 18px 24px;color:var(--muted);font-size:12px;text-align:right}@media(max-width:760px){.customer-summary-grid{grid-template-columns:1fr 1fr}}@media(max-width:430px){.customer-summary-grid{grid-template-columns:1fr}}