/* Staff CRM — page-specific styles layered on ../styles.css */

.tab[hidden] { display: none; }
.toolbar { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.search-input { width: 100%; box-sizing: border-box; }

.form-card { max-width: 680px; }
.form-card label { margin-bottom: .7rem; }

/* Autocomplete suggestions (vehicle-make.js) */
.addr-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; }
.addr-suggest[hidden] { display: none; }
.addr-item { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .6rem; border-radius: 7px; font-size: .92rem; color: var(--ink); cursor: pointer; }
.addr-item svg { flex: none; margin-top: .15rem; color: var(--slate); }
.addr-item.active, .addr-item:hover { background: var(--bg); }
.addr-item.active svg, .addr-item:hover svg { color: var(--brand); }

/* Vehicle list (Inventory tab) */
.vehicle-list { display: flex; flex-direction: column; gap: .6rem; }
.vehicle-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: .8rem 1rem; cursor: pointer; display: flex; align-items: center; gap: .9rem;
}
.vehicle-row:hover { border-color: var(--brand); }
.vehicle-row .vr-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg-alt); }
.vehicle-row .vr-thumb.empty { display: grid; place-items: center; color: var(--slate); font-size: .7rem; text-align: center; }
.vehicle-row .vr-body { flex: 1; min-width: 0; }
.vehicle-row .vr-title { font-weight: 800; color: var(--ink); }
.vehicle-row .vr-meta { color: var(--slate); font-size: .82rem; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.vehicle-row .vr-side { text-align: right; flex: none; }
.vehicle-row .vr-price { font-weight: 800; color: var(--ink); }

/* Quick "on the website" toggle, shown on rows for available/in-prep vehicles */
.avail-toggle {
  margin-top: .35rem; border: 1px solid var(--line); background: var(--bg-alt); color: var(--slate);
  font-size: .72rem; font-weight: 800; padding: .22rem .55rem; border-radius: 999px; cursor: pointer;
}
.avail-toggle.on { background: var(--ok-bg); color: var(--ok); border-color: #b9e5d1; }

/* Vehicle detail modal */
.detail-section { margin-bottom: 1.1rem; }
.detail-section:last-child { margin-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; font-size: .88rem; }
.detail-grid dt { color: var(--slate); }
.detail-grid dd { margin: 0; font-weight: 700; }
.expense-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .1rem; border-bottom: 1px solid var(--line); font-size: .88rem; }
.expense-row:last-child { border-bottom: 0; }
.expense-cat { font-weight: 700; }
.expense-note { color: var(--slate); font-size: .8rem; }
.expense-amt { font-weight: 800; white-space: nowrap; }
.modal-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

table.receipt-table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
table.receipt-table th, table.receipt-table td { text-align: left; padding: .4rem .3rem; border-bottom: 1px solid var(--line); font-size: .88rem; }