:root {
  --ink: #1c1c1e;
  --muted: #6b6b70;
  --line: #e2e2e6;
  --bg: #fbfbfc;
  --card: #fff;
  --accent: #7a4b2a;
  --warn: #b3541e;
  --overdue: #a3242b;
  --ok: #2f6b45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

nav {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 1.5rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a.on { color: var(--ink); }
nav a.on { font-weight: 600; }
nav .brand { font-weight: 700; color: var(--accent); margin-right: .5rem; }
nav .spacer { flex: 1; }
nav .who { color: var(--muted); font-size: .85rem; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }

header.page {
  display: flex; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
header.page h1 { margin: 0; font-size: 1.5rem; }
header.page .filter { margin-left: auto; }

h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
h2 .count { color: var(--muted); font-weight: 400; font-size: .9rem; }
h2.overdue { color: var(--overdue); }
h3 { margin: 0 0 .4rem; font-size: .8rem; text-transform: uppercase;
     letter-spacing: .04em; color: var(--muted); }

.sub { color: var(--muted); font-size: .85rem; font-weight: 400; }
.empty { color: var(--muted); font-style: italic; }
.muted { opacity: .75; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.hint { margin-top: 2.5rem; color: var(--muted); font-size: .85rem; }

/* tables */
table { width: 100%; border-collapse: collapse; background: var(--card);
        border: 1px solid var(--line); border-radius: 6px; }
table.narrow { max-width: 620px; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--muted); font-weight: 600; background: #f6f6f8; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.model { font-weight: 600; }
tr.stale td { background: #fdf6ef; }

a { color: var(--accent); }

/* cards */
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 220px; background: var(--card); border: 1px solid var(--line);
        border-radius: 6px; padding: .8rem 1rem; }
.card p { margin: .2rem 0; }

/* task lists */
ul.tasks, ul.notes { list-style: none; margin: 0; padding: 0; }
ul.tasks li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .45rem .7rem; background: var(--card);
  border: 1px solid var(--line); border-bottom: 0;
}
ul.tasks li:first-child { border-radius: 6px 6px 0 0; }
ul.tasks li:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 6px 6px; }
ul.tasks .due { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
ul.tasks .dealer { font-weight: 600; text-decoration: none; }
ul.tasks .title { flex: 1; }
ul.tasks .owner { color: var(--muted); font-size: .8rem; }
ul.tasks.overdue .due { color: var(--overdue); font-weight: 600; }
ul.tasks.today .due { color: var(--warn); font-weight: 600; }
ul.tasks li.overdue .due { color: var(--overdue); font-weight: 600; }
ul.tasks li.done .title { text-decoration: line-through; color: var(--muted); }
ul.tasks form { display: inline; margin: 0; }

ul.notes li { background: var(--card); border: 1px solid var(--line);
              border-radius: 6px; padding: .6rem .8rem; margin-bottom: .5rem; }
ul.notes .meta { color: var(--muted); font-size: .78rem; margin-bottom: .25rem; }
ul.notes .body { white-space: pre-wrap; }

/* controls */
button, input, select, textarea { font: inherit; }
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 5px;
  padding: .35rem .8rem; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.check {
  background: transparent; color: var(--ok); border: 1px solid var(--line);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .45rem;
}
button.check.undo { color: var(--muted); }
button.link { background: none; color: var(--accent); padding: 0; font-size: .8rem; }

input, select, textarea {
  padding: .35rem .5rem; border: 1px solid var(--line);
  border-radius: 5px; background: var(--card); color: var(--ink);
}
textarea { width: 100%; resize: vertical; }

.filter { display: flex; align-items: center; gap: .5rem; }
.filter label { display: flex; align-items: center; gap: .35rem;
                color: var(--muted); font-size: .85rem; }
.row-form { display: flex; gap: .5rem; margin-bottom: .8rem; align-items: flex-start; }
.row-form input[name="title"] { flex: 1; }
.clear { font-size: .85rem; }

.tag { font-size: .7rem; padding: .05rem .35rem; border-radius: 3px;
       background: #eee; color: var(--muted); }
.tag.warn { background: #fbeadd; color: var(--warn); cursor: help; }
.pill { background: var(--overdue); color: #fff; border-radius: 10px;
        padding: .05rem .45rem; font-size: .78rem; }

.flash { background: #fdf3e6; border: 1px solid #e8d3b8; color: var(--warn);
         padding: .5rem .8rem; border-radius: 5px; margin-bottom: 1rem; }

/* login */
.login { max-width: 320px; margin: 12vh auto; }
.login h1 { font-size: 1.3rem; color: var(--accent); }
.login form { display: flex; flex-direction: column; gap: .7rem; }
.login label { display: flex; flex-direction: column; gap: .2rem;
               font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------- map view */
.maplayout { display: flex; gap: 1rem; align-items: stretch;
             border: 1px solid var(--line); border-radius: 6px;
             overflow: hidden; background: var(--card); }
#map { flex: 1; height: 560px; min-width: 0; }

.mapside { width: 260px; min-width: 260px; display: flex; flex-direction: column;
           border-left: 1px solid var(--line); background: #f8f8fa; }
.mapside input[type="search"] { margin: .6rem; }
#pinlist { list-style: none; margin: 0; padding: 0 0 .5rem;
           overflow-y: auto; flex: 1; }
#pinlist li { display: flex; align-items: center; gap: .45rem;
              padding: .3rem .7rem; cursor: pointer; font-size: .85rem; }
#pinlist li:hover { background: #ecebef; }
#pinlist i { width: 9px; height: 9px; border-radius: 50%;
             border: 1px solid #555; flex: none; }
#pinlist .n { flex: 1; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
#pinlist .v { color: var(--muted); font-variant-numeric: tabular-nums;
              font-size: .78rem; }

.legend { margin-top: 1.2rem; }
.legend ul { list-style: none; margin: .3rem 0 .6rem; padding: 0;
             display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.legend li { display: flex; align-items: center; gap: .4rem;
             font-size: .82rem; color: var(--muted); }
.legend i { width: 11px; height: 11px; border-radius: 50%;
            border: 1px solid #555; }

.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: .15rem 0; }

/* leaflet popups, matched to the rest of the app */
.leaflet-popup-content { margin: .6rem .8rem; font: inherit; }
.pin-name { font-weight: 700; font-size: .95rem; }
.pin-where { color: var(--muted); font-size: .8rem; margin-bottom: .3rem; }
.pin-row { font-size: .82rem; }

@media (max-width: 860px) {
  .maplayout { flex-direction: column; }
  .mapside { width: auto; min-width: 0; border-left: 0;
             border-top: 1px solid var(--line); max-height: 260px; }
  #map { height: 380px; }
}