/* The admin area. Builds on site.css. */
body.admin { background: #f1f3f6; padding-bottom: 96px; }
.admin-bar { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 30; }
.admin-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; flex-wrap: wrap; }
.admin-bar .logo { color: #fff; font-size: 17px; }
.admin-bar .logo small { color: #ff9c99; }
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-nav a { color: #c9d3e6; text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 8px; }
.admin-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.admin-nav a.on { color: #fff; background: rgba(255, 255, 255, .14); }
.admin-nav em { font-style: normal; background: var(--red); color: #fff; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.admin-nav em:empty { display: none; }
@media (max-width: 640px) {
  .admin-bar .wrap { padding: 10px 0; }
  .admin-nav { width: 100%; }
}

.admin-main { padding: 28px 0; }
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title h1 { font-size: 1.7rem; }
.page-title p { margin: 4px 0 0; color: var(--muted); }

/* Car list */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input { max-width: 320px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--muted); padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips b { font-weight: 700; opacity: .7; margin-left: 4px; }
.rows { display: grid; gap: 10px; }
.row-car {
  display: grid; grid-template-columns: 96px 1fr auto auto auto; gap: 18px; align-items: center;
  background: #fff; border-radius: 12px; padding: 10px 14px 10px 10px; box-shadow: var(--shadow);
}
.row-car .thumb { width: 96px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e7eaef; }
.row-car .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-car .thumb .no-photo svg { width: 36px; }
.row-car .thumb .no-photo div div { display: none; }
.row-car h3 { font-size: 16px; }
.row-car .sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.row-car .nums { text-align: right; }
.row-car .nums b { display: block; font-size: 17px; color: var(--navy); }
.row-car .nums small { color: var(--muted); }
.row-car .actions { display: contents; }
.row-car select { width: 156px; font-weight: 600; }
.row-car select.available { color: var(--green); }
.row-car select.pending { color: var(--amber); }
.row-car select.sold { color: var(--red); }
.warn { color: var(--amber); font-weight: 600; }
@media (max-width: 760px) {
  .row-car { grid-template-columns: 84px 1fr; gap: 10px 14px; }
  .row-car .thumb { width: 84px; grid-row: span 2; }
  .row-car .nums { text-align: left; display: flex; gap: 10px; align-items: baseline; }
  .row-car .nums b { display: inline; }
  .row-car .actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .row-car select { width: 100%; }
}

/* Edit form */
.edit { display: grid; gap: 18px; max-width: 900px; }
.box { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.box h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.box h2 .n { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; display: grid; place-items: center; flex: none; }
.box > .hint { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fields label, .box label.full { display: grid; align-content: start; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fields .wide { grid-column: span 2; }
.fields .all { grid-column: 1 / -1; }
.req::after { content: " *"; color: var(--red); }
.vin-row { display: flex; gap: 10px; }
.vin-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.vin-msg { font-size: 14px; margin: 10px 0 0; }
.vin-msg.ok { color: var(--green); }
.vin-msg.err { color: var(--red-dark); }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 12px; bottom: 12px; color: var(--muted); font-weight: 600; }
.money input { padding-left: 24px; }
@media (max-width: 760px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .fields .wide { grid-column: 1 / -1; }
  .box { padding: 18px; }
}

/* Photos */
.drop {
  display: grid; place-items: center; text-align: center; gap: 6px;
  border: 2px dashed #c2cad6; border-radius: 12px; padding: 28px 16px; cursor: pointer;
  color: var(--muted); background: #fafbfc; transition: background .15s, border-color .15s;
}
.drop:hover, .drop.over { border-color: var(--navy); background: #eef2f8; }
.drop b { color: var(--navy); font-size: 16px; }
.drop svg { width: 38px; color: var(--navy); }
.drop input { display: none; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.photos:empty { display: none; }
.ph-item { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #e7eaef; cursor: grab; }
.ph-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ph-item.dragging { opacity: .4; }
.ph-item .cover { position: absolute; left: 8px; top: 8px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.ph-tools { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.ph-tools button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .92); cursor: pointer; font-size: 14px; font-weight: 700; color: var(--navy); }
.ph-tools button:hover { background: #fff; }
.ph-tools .del { color: var(--red); }
.ph-tools span { display: flex; gap: 4px; }
.ph-progress { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 33, 64, .55); color: #fff; font-weight: 700; font-size: 14px; }
.ph-progress i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--red); transition: width .2s; }
.ph-item.error .ph-progress { background: rgba(169, 38, 35, .8); font-size: 12.5px; padding: 8px; text-align: center; }

/* Features */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tags:empty { display: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 500; padding: 6px 8px 6px 12px; border-radius: 999px; }
.tag button { border: 0; background: rgba(255, 255, 255, .2); color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.suggest button { font: inherit; font-size: 13px; border: 1px dashed #c2cad6; background: #fff; color: var(--muted); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.suggest button:hover { border-color: var(--navy); color: var(--navy); }
.desc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.link-btn { border: 0; background: none; color: var(--red); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }

/* Status */
.status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.status label { display: block; cursor: pointer; }
.status input { position: absolute; opacity: 0; }
.status span { display: block; text-align: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; color: var(--muted); }
.status input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.status input:focus-visible + span { outline: 2px solid var(--red); }
.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 500; }
.check input { width: 18px; height: 18px; }

/* Save bar */
.save-bar { position: fixed; inset: auto 0 0 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(15, 33, 64, .08); z-index: 25; }
.save-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.save-bar .note { color: var(--muted); font-size: 14px; }
.save-bar .btns { display: flex; gap: 10px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.danger { margin-top: 8px; }
.danger button { border: 0; background: none; color: var(--red); font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { .save-bar .note { display: none; } .save-bar .btns { width: 100%; } .save-bar .btn { flex: 1; } }

/* Leads */
.lead-card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.lead-card header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lead-card b { font-size: 16px; }
.lead-card time { color: var(--muted); font-size: 13.5px; }
.lead-card .contact { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14.5px; }
.lead-card .contact a { color: var(--navy); font-weight: 600; }
.lead-card .about { font-size: 13.5px; color: var(--muted); }
.lead-card p { margin: 4px 0 0; white-space: pre-line; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 40; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--red-dark); }

/* Terms: shown once to each admin before anything else. */
body.gated .admin-nav { display: none; }
.terms { display: grid; gap: 16px; max-width: 820px; }
.terms-text { max-height: 52vh; overflow-y: auto; padding: 4px 16px 4px 2px; border-bottom: 1px solid var(--line); }
.terms-text h3 { font-size: 15px; margin: 16px 0 4px; }
.terms-text h3:first-child { margin-top: 0; }
.terms-text p { color: var(--muted); line-height: 1.55; margin: 0 0 6px; }
.terms .check { margin-top: 0; align-items: flex-start; }
.terms .check input { flex: none; margin-top: 2px; }
.terms-who { font-size: 13px; color: var(--muted); }
.terms .btn { justify-self: start; }
.terms .btn:disabled { opacity: .45; cursor: not-allowed; }
.page-title + .box + .box { margin-top: 16px; }
.terms-log { overflow-x: auto; }
.terms-log table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.terms-log th, .terms-log td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.terms-log th { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* A trade-in request on the Leads page. */
.trade-box { display: grid; gap: 2px; margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: #eef2f8; }
.trade-box span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.trade-box b { font-size: 16px; }
.trade-box small { color: var(--muted); font-size: 13.5px; }
.lang-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #fff4df; color: #a46510; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.edit .box + .box { margin-top: 16px; }

/* Dashboard */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: #fff; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.kpi small { font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi b { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.kpi span { font-size: 12.5px; color: var(--muted); }
.kpi p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.kpi em { font-style: normal; font-weight: 700; }
.kpi em.up { color: var(--green); }
.kpi em.down { color: var(--red-dark); }
.dash-chart { margin-bottom: 16px; }
.dash-chart h2 small { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dash-chart svg { width: 100%; height: 140px; display: block; margin-top: 10px; }
.dash-chart .bar { fill: #c9d3e6; }
.dash-chart g:hover .bar { fill: var(--navy); }
.dash-chart .dot, .dot-key { fill: var(--red); }
.dot-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid.three { grid-template-columns: repeat(3, 1fr); }
.dash-grid .box h2 { margin-bottom: 12px; }
.attn { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.attn li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border-left: 4px solid #c9d3e6; background: #f6f8fb; }
.attn li.l1 { border-left-color: var(--red); }
.attn li.l2 { border-left-color: var(--amber); }
.attn a { text-decoration: none; color: var(--navy); }
.attn small { color: var(--muted); font-weight: 600; }
.attn span { font-size: 13.5px; color: var(--muted); }
.top-cars { display: grid; }
.top-cars a { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.top-cars a:last-child { border-bottom: 0; }
.top-cars img, .top-cars .ph { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: #e8ecf2; display: block; }
.top-cars b { display: block; font-size: 14.5px; color: var(--navy); }
.top-cars small { font-size: 12.5px; color: var(--muted); }
.top-cars .nums { text-align: right; min-width: 44px; }
.top-cars .nums b { font-size: 16px; }
.lot { margin: 0; display: grid; }
.lot div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lot div:last-child { border-bottom: 0; }
.lot dt { color: var(--muted); }
.lot dd { margin: 0; font-weight: 700; color: var(--navy); }
.sources { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.sources li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 14px; }
.sources i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--navy); }
.recent { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.recent li { display: grid; padding: 8px 0; border-bottom: 1px solid var(--line); }
.recent li:last-child { border-bottom: 0; }
.recent span { font-size: 13px; color: var(--muted); }
.more { font-weight: 600; color: var(--red); text-decoration: none; font-size: 14px; }
.small { font-size: 12.5px; }
.dash-note { margin: 4px 0 24px; }
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .dash-grid, .dash-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 24px; }
}

/* Private numbers: what the dealer paid, sold for, and profit. */
.private { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #f6f8fb; border: 1px dashed #c9d3e6; }
.private > p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.private > p b { color: var(--navy); }
.sold-fields { margin-top: 16px; }
.profit-line { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.profit-line b, .sales b, .recent b.gain { color: var(--green); }
b.loss, .sales b.loss { color: var(--red-dark); }
.sales-grid { grid-template-columns: 1.4fr 1fr; }
.sales { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sales th, .sales td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.sales th:first-child { text-align: left; font-weight: 500; color: var(--muted); }
.sales thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sales td small { display: block; font-size: 11.5px; color: var(--muted); }
.sales tbody tr:nth-child(3) td { font-size: 16px; font-weight: 700; }
.missing { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff4df; color: var(--amber); font-size: 13.5px; display: grid; gap: 4px; }
.missing a { color: var(--navy); }
.lot dd small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); text-align: right; }
.sale-dialog { border: 0; border-radius: 16px; padding: 24px; width: min(420px, calc(100% - 32px)); box-shadow: 0 20px 60px rgba(15, 33, 64, .3); }
.sale-dialog::backdrop { background: rgba(15, 33, 64, .45); }
.sale-dialog form { display: grid; gap: 12px; }
.sale-dialog h2 { margin: 0; }
.sale-dialog p { margin: 0; }
.sale-dialog label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sale-dialog small, .sale-dialog .opt { font-weight: 400; }
.row-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
@media (max-width: 1000px) {
  .sales-grid { grid-template-columns: 1fr; }
}
.hinted { display: grid; gap: 4px; align-content: start; }
.hinted > small { font-size: 12px; color: var(--muted); }
.fields .money, .hinted .money { align-self: start; }

/* Dashboard, with color */
.kpis { grid-template-columns: repeat(6, 1fr); margin-bottom: 6px; }
.kpi { position: relative; overflow: hidden; padding-top: 18px; --c: var(--navy); --tint: #eef2f8; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.kpi .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--c); margin-bottom: 6px; }
.kpi .ic svg { width: 19px; height: 19px; }
.kpi b .loss { color: var(--red-dark); }
.k-visits { --c: #2f6fd6; --tint: #e8f0fc; }
.k-carViews { --c: #6b4fc8; --tint: #efebfb; }
.k-leads { --c: #c8322f; --tint: #fdecec; }
.k-trades { --c: #d9a21b; --tint: #fdf5e1; }
.k-sold { --c: #138a8a; --tint: #e3f4f4; }
.k-profit { --c: #1f7a4d; --tint: #e6f4ec; }
.kpi-note { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.h-note { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 6px; }

.chart-wrap { position: relative; }
.profit-chart { width: 100%; height: auto; display: block; }
.profit-chart .zero { stroke: #c9d3e6; stroke-width: 1.5; }
.profit-chart text { font: 600 12px Inter, system-ui, sans-serif; text-anchor: middle; fill: var(--ink, #17202e); }
.profit-chart text.m { fill: var(--muted); font-weight: 500; }
.profit-chart text.muted { fill: var(--muted); font-weight: 500; font-size: 11px; }
.profit-chart g:hover rect[rx="4"] { opacity: .85; }
.chart-empty { position: absolute; inset: 30% 10% auto; text-align: center; margin: 0; color: var(--muted); font-size: 14px; background: rgba(255, 255, 255, .85); padding: 8px; border-radius: 8px; }

.dash-chart .bar { fill: #c3d6f6; }
.dash-chart g:hover .bar { fill: #2f6fd6; }
.leads-line { fill: none; stroke: #c8322f; stroke-width: 2.5; stroke-linejoin: round; }
.legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.lg-bar { width: 10px; height: 10px; border-radius: 2px; background: #c3d6f6; display: inline-block; margin-left: 8px; }
.lg-line { width: 16px; height: 3px; border-radius: 2px; background: #c8322f; display: inline-block; margin-left: 8px; }

.aging { margin-bottom: 16px; }
.lot-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.lot-strip div { background: #f6f8fb; border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.lot-strip small { font-size: 12px; color: var(--muted); font-weight: 600; }
.lot-strip b { font-size: 18px; color: var(--navy); }
.lot-strip em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.age-bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; gap: 2px; }
.age-bar button { border: 0; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; min-width: 28px; }
.age-bar button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7); }
.age-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 8px; }
.age-legend button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; }
.age-legend button:disabled { opacity: .5; cursor: default; }
.age-legend button[aria-pressed="true"] { border-color: var(--navy); background: #f6f8fb; }
.age-legend i { width: 10px; height: 10px; border-radius: 3px; }
.age-legend span { font-size: 13px; color: var(--muted); font-weight: 600; }
.age-legend b { font-size: 14px; color: var(--navy); }
.age-legend small { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.age-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; }
.age-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.age-list a { color: var(--navy); text-decoration: none; }
.age-list small, .age-list span { color: var(--muted); }

.donut { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; margin-bottom: 8px; }
.donut svg { width: 130px; height: 130px; }
.donut text { text-anchor: middle; font-family: Inter, system-ui, sans-serif; }
.donut .t { font-size: 20px; font-weight: 800; fill: var(--navy); }
.donut .s { font-size: 11px; fill: var(--muted); }
.donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.donut li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.donut i { width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .lot-strip { grid-template-columns: repeat(3, 1fr); }
  .age-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .lot-strip { grid-template-columns: 1fr 1fr; }
  .donut { grid-template-columns: 110px 1fr; }
  .donut svg { width: 110px; height: 110px; }
  .legend { display: none; }
}
.kpi.neg b { color: var(--red-dark); }
.age-list[hidden] { display: none; }
@media (max-width: 560px) {
  .age-legend { grid-template-columns: 1fr; }
}

/* Roles: links only some roles use */
body:not(.role-owner) .for-owner { display: none; }
body.role-sales .for-managers { display: none; }

/* Not on the team */
.gate-box { max-width: 560px; margin: 40px auto; display: grid; gap: 10px; }
.gate-box h1 { font-size: 1.5rem; }
.gate-box p { margin: 0; color: var(--muted); }
.gate-box .btn { justify-self: start; margin-top: 6px; }

/* Members */
.member-add { display: grid; grid-template-columns: 2fr 1.4fr 1fr auto; gap: 12px; align-items: end; }
.member-add label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.member-add .opt { font-weight: 400; }
.members { display: grid; }
.member { display: grid; grid-template-columns: 1.6fr 1.4fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.member small { display: block; color: var(--muted); font-size: 12.5px; }
.member select { min-width: 150px; }
.role-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #eef2f8; color: var(--navy); font-weight: 700; font-size: 13px; }
.danger-link { color: var(--red-dark); }
.roles-help table { width: 100%; border-collapse: collapse; font-size: 14px; }
.roles-help th, .roles-help td { padding: 8px; border-bottom: 1px solid var(--line); text-align: center; }
.roles-help th:first-child { text-align: left; font-weight: 500; color: var(--muted); }
.roles-help thead th { font-size: 12.5px; color: var(--muted); }
.edit + .box, .box + .box { margin-top: 16px; }

/* Activity */
.activity { list-style: none; margin: 0; padding: 0; display: grid; }
.activity li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.activity time { color: var(--muted); font-size: 13px; }
.activity a { color: var(--navy); }

/* Sales waiting for approval */
.await-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fff4df; color: var(--amber); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.await-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff4df; color: #6b4a0e; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.await-box .btns, .approval .btns { display: flex; gap: 8px; }
.note-box { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #eef2f8; font-size: 13.5px; color: var(--navy); }
.approvals { margin-bottom: 16px; border: 2px solid #f0c66b; }
.approval { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.approval:last-child { border-bottom: 0; }
.approval img, .approval .ph { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: #e8ecf2; display: block; }
.approval a { color: var(--navy); text-decoration: none; }
.approval small { color: var(--muted); font-weight: 600; }
.approval span { display: block; font-size: 13.5px; color: var(--muted); }
.approval b.gain { color: var(--green); }
@media (max-width: 760px) {
  .member-add { grid-template-columns: 1fr; }
  .member { grid-template-columns: 1fr auto; }
  .approval { grid-template-columns: 52px 1fr; }
  .approval .btns { grid-column: 1 / -1; justify-content: flex-end; }
  .activity li { grid-template-columns: 1fr; gap: 2px; }
}
.access-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius); background: #eef2f8; color: var(--navy); font-size: 14px; margin: 16px 0; }
.access-status:empty { display: none; }
.access-status.ok { background: #e6f4ec; color: var(--green); }
.access-status.warn { background: #fff4df; color: #6b4a0e; }

/* Itemized other costs */
.cost-list { margin-top: 14px; display: grid; gap: 8px; }
.cost-head { display: grid; gap: 2px; }
.cost-head b { font-size: 13px; color: var(--muted); }
.cost-head small { font-size: 12px; color: var(--muted); }
.cost-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.cost-row .money { display: block; }
.c-del { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; font-size: 15px; }
.c-del:hover { color: var(--red-dark); border-color: var(--red-dark); }
.cost-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 2px; }
.cost-foot .btn { padding: 8px 14px; font-size: 14px; }
#cost-total { font-size: 14px; color: var(--muted); }
#cost-total b { color: var(--navy); }
.cost-breakdown { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cost-breakdown h3 { font-size: 14px; margin: 0 0 2px; }
.cost-breakdown h3 small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.cb-row { display: grid; grid-template-columns: 130px 1fr 80px 52px; gap: 10px; align-items: center; font-size: 13.5px; }
.cb-row i { height: 8px; border-radius: 4px; background: #e07a2f; }
.cb-row b { text-align: right; color: var(--navy); }
.cb-row small { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) {
  .cb-row { grid-template-columns: 100px 1fr 70px; }
  .cb-row small { display: none; }
}
.cost-chips { margin-top: 2px; align-items: center; }
.cost-chips > span { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.cost-chips:empty { display: none; }

/* In progress cars */
.draft-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #e8ecf2; color: #4a5568; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.draft-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #eef2f8; color: var(--navy); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.ip-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ip-row:last-child { border-bottom: 0; }
.ip-row img, .ip-row .ph { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: #e8ecf2; display: block; }
.ip-row b { display: block; font-size: 14.5px; color: var(--navy); }
.ip-row a { text-decoration: none; }
.ip-row small { font-size: 12.5px; color: var(--muted); }
.ip-row .btn { padding: 8px 14px; font-size: 14px; }

/* Consignment */
.ownership { margin-top: 16px; display: grid; gap: 10px; }
.own-q { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.status.own { grid-template-columns: 1fr 1.6fr; }
.consign-fields[hidden] { display: none; }
.sub.consign { color: #6b4fc8; font-weight: 600; }
.lot dd.loss { color: var(--red-dark); }

/* Purchase price plus costs */
.car-total { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.car-total b { color: var(--navy); font-size: 16px; }
.save-bar .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* An In progress car's row has a Publish button as well. */
.row-car.has-publish { grid-template-columns: 96px 1fr auto auto auto auto; }
@media (max-width: 760px) {
  .row-car.has-publish { grid-template-columns: 84px 1fr; }
  .row-car.has-publish .actions { grid-template-columns: 1fr 1fr 1fr; }
}

/* In progress in the status choices */
.row-car select.draft { color: #4a5568; }
.status input[value="draft"]:checked + span { background: #4a5568; border-color: #4a5568; }
@media (max-width: 560px) {
  .status { grid-template-columns: 1fr 1fr; }
}

/* Settings › Website theme: a small drawing of each theme to pick from. */
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .looks { grid-template-columns: 1fr; } }
.look { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; background: #fff; }
.look:hover { border-color: #c5ccd8; }
.look:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15, 33, 64, .1); }
.look:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.look input { position: absolute; opacity: 0; }
.look-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.look-name em { display: none; font-style: normal; font-size: 11px; font-weight: 700; background: #e6f4ec; color: var(--green); padding: 1px 8px; border-radius: 999px; }
.look.current .look-name em { display: inline; }
.look small { color: var(--muted); font-size: 13px; font-weight: 400; }
.look-try { justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--red); text-decoration: none; }
.look-try:hover { text-decoration: underline; }
.look-thumb { --top: #fff; --hero: #0f2140; --text: #fff; --accent: #c8322f; --card: #fff; --page: #f5f6f8; --r: 4px;
  display: grid; grid-template-rows: 12px 66px auto; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--page); border: 1px solid var(--line); }
.look-thumb i { display: block; }
.lt-bar { background: var(--top); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.look-thumb .lt-hero { position: relative; background: var(--hero); padding: 12px 10px; display: grid; gap: 5px; align-content: start; }
.lt-hero i:nth-child(1) { width: 46%; height: 7px; border-radius: 2px; background: var(--text); }
.lt-hero i:nth-child(2) { width: 30%; height: 7px; border-radius: 2px; background: var(--accent); }
.lt-hero i:nth-child(3) { width: 22%; height: 9px; border-radius: var(--r); background: var(--accent); margin-top: 4px; }
.look-thumb .lt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px; }
.lt-cards i { height: 34px; border-radius: var(--r); background: linear-gradient(#c3cad6 0 58%, var(--card) 58%); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.look-classic .lt-hero { background: linear-gradient(90deg, #0f2140 45%, transparent), linear-gradient(135deg, #8a96ab, #42506a); }
.look-midnight { --top: #0d0f13; --accent: #e0302b; --page: #f1f1ef; --r: 1px; }
.look-midnight .lt-hero { background: linear-gradient(90deg, #0d0f13 25%, rgba(13, 15, 19, .3)), linear-gradient(135deg, #6c6f76, #2a2c31); }
.look-midnight .lt-hero i:nth-child(1) { width: 56%; height: 9px; }
.look-showroom { --hero: #f3f5f8; --text: #141b2b; --page: #fff; --r: 7px; }
.look-showroom .lt-hero { background: linear-gradient(90deg, #f3f5f8 45%, transparent), linear-gradient(135deg, #dfe4ea, #b9c2cf); }
.look-showroom .lt-cards i { box-shadow: none; border: 1px solid var(--line); }

/* Settings › Color and Logo */
.sub-h { font-size: 1rem; margin: 22px 0 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; }
.swatch input { position: absolute; opacity: 0; }
.swatch span { width: 24px; height: 24px; border-radius: 50%; background: var(--c); }
.swatch:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15, 33, 64, .1); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.logo-up { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.logo-up > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 240px; }
.logo-up small { flex-basis: 100%; font-size: 13px; }
.logo-up label.btn { cursor: pointer; }
.logo-now { display: grid; place-items: center; min-width: 72px; height: 72px; padding: 8px; border: 1px dashed #c5ccd8; border-radius: 12px; background: #f6f7f9; }
.logo-now img { width: 52px; height: 52px; object-fit: contain; }
.logo-now img.wide { width: auto; max-width: 200px; height: 48px; }
.marks { display: flex; flex-wrap: wrap; gap: 10px; }
.marks.dim { opacity: .45; }
.mark { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); background: #fff; min-width: 76px; }
.mark input { position: absolute; opacity: 0; }
.mark:has(input:checked) { border-color: var(--navy); color: var(--ink); }
.mark:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

/* demo.lotswift.com */
.demo-note { background: #fff4df; color: #6b4a0e; border-bottom: 1px solid #f1dfb8; font-size: 14px; }
.demo-note .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 9px 0; }
.demo-note a { color: #6b4a0e; font-weight: 700; }