/* ============================================================
   BikeBid — Appraisals list page
   Builds on app.css (sidebar, .card, .btn, colours)
   ============================================================ */

.main.appraisals-list{ }

/* page header */
.apage-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.apage-head h1{ font-size:32px; font-weight:800; letter-spacing:-.025em; margin:0 0 7px; }
.apage-head p{ margin:0; color:var(--ink-3); font-size:14.5px; }
.apage-head .acts{ display:flex; gap:11px; flex:none; }
.btn.compact{ padding:11px 17px; font-size:14px; }
.btn.compact i[data-lucide]{ width:17px; height:17px; }
.btn.soft{ background:var(--card); color:var(--ink-2); border:1px solid var(--line); }
.btn.soft:hover{ background:var(--bg); border-color:var(--ink-4); }

/* row density segmented toggle */
.density-seg{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line);
  border-radius:11px; background:var(--card); }
.density-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
  border:none; border-radius:8px; background:transparent; color:var(--ink-4); cursor:pointer;
  transition:background .12s, color .12s; }
.density-btn:hover{ background:var(--bg); color:var(--ink-2); }
.density-btn i[data-lucide]{ width:17px; height:17px; }
.density-btn.active{ background:var(--blue-50); color:var(--blue); }

/* status tabs */
.atabs{ display:flex; gap:11px; margin-bottom:20px; flex-wrap:wrap; }
.atab{ display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); font-family:inherit; font-weight:700; font-size:14px; color:var(--ink-2); cursor:pointer;
  transition:background .12s, border-color .12s, color .12s; }
.atab:hover{ background:var(--bg); }
.atab .ct{ font-size:12.5px; font-weight:800; min-width:20px; height:20px; padding:0 6px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center; background:#eef1f5; color:var(--ink-3); }
.atab.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.atab.active .ct{ background:rgba(255,255,255,.25); color:#fff; }
.atab .ct.green{ background:var(--green-50); color:var(--green-700); }
.atab .ct.red{ background:#fee2e2; color:#c0392b; }
.atab .ct.amber{ background:#fef3c7; color:#92600a; }
.atab i[data-lucide]{ width:15px; height:15px; }
.atab[data-filter="favourite"] i[data-lucide]{ color:#f59e0b; fill:#f59e0b; }
.atab.active[data-filter="favourite"] i[data-lucide]{ color:#fff; fill:#fff; }
.fav-star{ width:14px; height:14px; color:#f59e0b; fill:#f59e0b; flex:none; vertical-align:-2px; margin-left:6px; }

/* content grid */
.acontent{ display:grid; grid-template-columns:250px 1fr; gap:22px; align-items:start; }

/* filter rail */
.afilters{ padding:20px; position:sticky; top:24px; }
.afilters h3{ font-size:17px; font-weight:800; margin:0 0 18px; }
.afield{ margin-bottom:18px; }
.afield:last-of-type{ margin-bottom:20px; }
.afield label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:8px; }
.afield .inwrap{ position:relative; }
.afield .inwrap > i[data-lucide], .afield .inwrap > svg{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-4); width:16px; height:16px; pointer-events:none; }
.afield .search-i{ left:12px; right:auto; }
.ainput, .aselect{ width:100%; font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; transition:border-color .12s, box-shadow .12s; }
.afield .inwrap:has(.search-i) .ainput{ padding-left:34px; }
.ainput::placeholder{ color:var(--ink-4); }
.ainput:focus, .aselect:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklab,var(--blue) 14%,transparent); }
.aselect{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }
.clear-filters{ width:100%; padding:11px; border:none; border-radius:10px; background:var(--blue-50); color:var(--blue);
  font-family:inherit; font-weight:700; font-size:13.5px; cursor:pointer; }
.clear-filters:hover{ background:color-mix(in oklab,var(--blue) 14%,#fff); }

/* table card */
.atable-card{ padding:0; overflow:hidden; }
.at-head, .at-row{ display:grid; grid-template-columns:2.95fr .95fr .55fr .98fr 1.18fr .78fr .8fr; gap:14px; align-items:center; }
.at-head{ padding:15px 22px; border-bottom:1px solid var(--line); font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.at-head .r, .at-row .r{ text-align:left; }
.at-row{ padding:14px 22px; border-bottom:1px solid var(--line-2); }
.at-row:last-child{ border-bottom:none; }
.at-row:hover{ background:#fafbfc; }

.bikecell{ display:flex; align-items:center; gap:13px; }
.bthumb{ width:58px; height:42px; border-radius:9px; background:#eef1f5; color:var(--ink-4); flex:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bthumb i[data-lucide]{ width:22px; height:22px; }
.bthumb img{ width:100%; height:100%; object-fit:cover; }

/* row density — compact is the default above; these scale rows up */
.atable-card.density-comfortable .at-row { padding: 28px 22px; }
.atable-card.density-comfortable .bthumb { width: 96px; height: 72px; }
.atable-card.density-spacious .at-row { padding: 44px 22px; }
.atable-card.density-spacious .bthumb { width: 128px; height: 96px; }
.bname{ font-weight:700; font-size:14px; line-height:1.25; text-wrap:balance; }
.brego{ font-size:12px; color:var(--ink-4); margin-top:2px; }

/* status badges */
.sbadge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap; }
.sbadge.active{ background:var(--green-50); color:var(--green-700); }
.sbadge.active::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sbadge.draft{ background:#f1f5f9; color:var(--ink-3); }
.sbadge.draft::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sbadge.won{ background:var(--green-50); color:var(--green-700); }
.sbadge.lost{ background:#fee2e2; color:#c0392b; }
.sbadge.deleted{ background:#eef1f5; color:#64748b; }
.sbadge.deleted::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sbadge i[data-lucide]{ width:14px; height:14px; }

.offers-n{ font-weight:700; font-size:14px; }
.hioffer{ font-weight:800; font-size:14.5px; }
.hioffer.green{ color:var(--green); }
.hioffer.dim{ color:var(--ink-2); }
.hioffer.none{ color:var(--ink-4); font-weight:600; }
.dcell .l1{ font-size:13px; color:var(--ink-2); font-weight:600; }
.dcell .l2{ font-size:12px; color:var(--ink-4); margin-top:1px; }
.dcell.none{ color:var(--ink-4); font-weight:600; }
.upd{ font-size:12.5px; color:var(--ink-4); white-space:nowrap; }
.act-btn{ padding:7px 16px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--blue);
  font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:background .12s, border-color .12s; }
.act-btn:hover{ background:var(--blue-50); border-color:var(--blue); }

/* action cell: edit/view button + kebab */
.at-row .r{ display:flex; align-items:center; gap:7px; }
.kebab-btn{ width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--ink-4); cursor:pointer; flex:none; display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s, color .12s; }
.kebab-btn:hover{ background:var(--bg); border-color:var(--line); color:var(--ink-2); }
.kebab-btn i[data-lucide]{ width:18px; height:18px; }

/* highlighted row */
.at-row.highlighted{ background:#e8f1ff; }
.at-row.highlighted:hover{ background:#deebff; }

/* row action popup menu */
.row-menu{ position:absolute; z-index:120; min-width:170px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 14px 34px rgba(16,24,40,.17); padding:6px; opacity:0; transform:translateY(-4px) scale(.98);
  transform-origin:top right; pointer-events:none; transition:opacity .12s ease, transform .12s ease; }
.row-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.row-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:none; background:transparent;
  border-radius:8px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; text-align:left; }
.row-menu button:hover{ background:var(--bg); }
.row-menu button i[data-lucide]{ width:16px; height:16px; flex:none; }
.row-menu button.danger{ color:var(--red); }
.row-menu button.danger:hover{ background:#fef2f2; }
.row-menu .rm-sep{ height:1px; background:var(--line-2); margin:5px 4px; }
:root[data-theme="dark"] .at-row.highlighted{ background:rgba(1,90,230,.18); }
:root[data-theme="dark"] .at-row.highlighted:hover{ background:rgba(1,90,230,.24); }
:root[data-theme="dark"] .row-menu button.danger:hover{ background:rgba(220,38,38,.14); }

.empty-row{ padding:50px 22px; text-align:center; color:var(--ink-4); font-weight:600; }

/* pagination */
.apage-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; flex-wrap:wrap; }
.apage-foot .showing{ font-size:13px; color:var(--ink-3); }
.apager{ display:flex; align-items:center; gap:7px; }
.apager button{ min-width:36px; height:36px; padding:0 9px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); font-family:inherit; font-weight:700; font-size:13.5px; color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.apager button:hover:not(:disabled){ background:var(--bg); }
.apager button.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.apager button:disabled{ opacity:.4; cursor:default; }
.apager button i[data-lucide]{ width:16px; height:16px; }
.perpage{ font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-2); background:var(--card);
  border:1px solid var(--line); border-radius:9px; padding:8px 30px 8px 12px; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }

@media (max-width:1080px){
  .acontent{ grid-template-columns:1fr; }
  .afilters{ position:static; }
  .at-head{ display:none; }
  .at-row{ grid-template-columns:1.6fr 1fr; gap:8px 14px; }
}

/* make rows feel clickable (row → View Appraisal) */
.at-row{ cursor:pointer; }