/* ======================================================================
   HUB — the owner's Fleet dashboard (js/screens/ownerDashboard.js).

   An analytics-rich lister hub on the same light system as the marketplace:
   off-white canvas, white cards with a hairline border and a soft shadow,
   amber for the primary action, WhatsApp green for inquiry signals.

   Component map
     .kpi-row / .kpi      row A: demand and traction, with week deltas
     .fleet-row / .stat   row B: status tiles that filter the table
     .hub-chart           SVG views line + inquiries bars, range buttons
     .fleet-table         per-machine traction and actions
     .hub-activity        emirate-level activity feed
   ====================================================================== */
:root {
  --hub-bg: #f8f9fa;
  --hub-line: #e5e7eb;
  --hub-amber: #f59e0b;
  --hub-green: #22c55e;
  --hub-green-700: #15803d;
  --hub-red: #dc2626;
  --hub-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 4px 14px rgb(15 23 42 / 5%);
}

.hub { display: grid; gap: 14px; padding: 12px 16px 24px; }
.hub-card {
  background: #fff; border: 1px solid var(--hub-line); border-radius: 8px;
  box-shadow: var(--hub-shadow); padding: 14px 16px;
}
.hub-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.hub-card-head h2 {
  margin: 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-900);
}
.hub-card-head small { font-size: 12px; color: var(--color-neutral-600); }
.hub-note { font-size: 12px; color: var(--color-neutral-600); }
.hub-warn {
  font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  padding: 8px 10px; border-radius: 6px;
}

/* ---- Row A: KPIs ---------------------------------------------------------- */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi {
  background: #fff; border: 1px solid var(--hub-line); border-radius: 8px;
  box-shadow: var(--hub-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.kpi-label {
  display: flex; align-items: center; gap: 6px; font-family: var(--font-heading);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600);
}
.kpi-label svg { width: 15px; height: 15px; color: var(--color-neutral-500); }
.kpi-value { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--steel-900); }
.kpi-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-600); flex-wrap: wrap; }
.delta {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--color-neutral-100); color: var(--color-neutral-700);
}
.delta-up { background: #ecfdf5; color: var(--hub-green-700); }
.delta-down { background: #fef2f2; color: var(--hub-red); }
.kpi-inquiries .kpi-value { color: var(--hub-green-700); }

/* ---- Row B: fleet tiles ------------------------------------------------- */
.fleet-row .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fleet-row .stat {
  border: 1px solid var(--hub-line); border-radius: 8px; padding: 10px 12px;
  background: #fff; box-shadow: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s ease, background .12s ease;
}
.fleet-row .stat:hover { border-color: var(--brand-500); }
.fleet-row .stat[aria-pressed="true"] { border-color: var(--steel-900); background: var(--steel-900); color: #fff; }
.fleet-row .stat[aria-pressed="true"] .lbl { color: var(--brand-300); }
.fleet-row .stat[aria-pressed="true"] .stat-value { color: #fff; }
.fleet-row .stat-value { font-size: 24px; }
.fleet-row .stat .lbl { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--color-neutral-400); }
.status-dot.live { background: var(--hub-green); }
.status-dot.on_hire { background: var(--steel-800); }
.status-dot.maintenance { background: var(--hub-amber); }
.status-dot.unconfirmed { background: var(--color-neutral-400); }
.status-dot.paused { background: var(--hub-red); }
.utilization { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--color-neutral-700); }
.utilization b { color: var(--steel-900); font-family: var(--font-heading); font-size: 16px; }
.util-bar { flex: 1; min-width: 80px; max-width: 220px; height: 6px; background: var(--color-neutral-200); border-radius: 3px; overflow: hidden; }
.util-bar span { display: block; height: 100%; background: var(--hub-amber); }

/* ---- Chart ---------------------------------------------------------------- */
.range-picker { display: inline-flex; border: 1px solid var(--hub-line); border-radius: 6px; overflow: hidden; }
.range-picker button {
  border: 0; background: #fff; padding: 6px 10px; font-family: var(--font-heading); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); cursor: pointer;
}
.range-picker button + button { border-left: 1px solid var(--hub-line); }
.range-picker button.on { background: var(--steel-900); color: var(--brand-300); }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--color-neutral-700); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.legend-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; background: var(--steel-900); }
.hub-chart svg { width: 100%; height: auto; display: block; }
.hub-chart .bar { fill: var(--hub-green); opacity: .85; }
.hub-chart .bar:hover { opacity: 1; }
.hub-chart .line { fill: none; stroke: var(--steel-900); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hub-chart .dot { fill: #fff; stroke: var(--steel-900); stroke-width: 1.5; }
.hub-chart .grid { stroke: var(--hub-line); stroke-width: 1; }
.hub-chart .axis-label { font-size: 10px; fill: var(--color-neutral-600); font-family: var(--font-body); }
.chart-empty { font-size: 12px; color: var(--color-neutral-600); padding: 24px 0; text-align: center; }

/* ---- Fleet table ---------------------------------------------------------- */
.fleet-table { width: 100%; border-collapse: collapse; }
.fleet-table th {
  text-align: left; font-family: var(--font-heading); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); padding: 6px 8px; border-bottom: 1px solid var(--hub-line);
}
.fleet-table td { padding: 10px 8px; border-bottom: 1px solid var(--hub-line); vertical-align: middle; font-size: 13px; }
.fleet-table tr:last-child td { border-bottom: 0; }
.fleet-row-hidden { display: none !important; }

.machine-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.machine-thumb {
  width: 64px; height: 44px; flex: none; border: 1px solid var(--hub-line); border-radius: 4px;
  object-fit: cover; background: var(--color-neutral-100); display: grid; place-items: center;
  color: var(--color-neutral-500);
}
.machine-thumb svg { width: 60%; height: auto; }
.machine-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.15; }
.machine-name .yr { color: var(--color-neutral-600); font-weight: 500; margin-right: 4px; }
.machine-loc {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px;
  color: var(--color-neutral-700); background: var(--color-neutral-100); border: 1px solid var(--hub-line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.machine-loc svg { width: 12px; height: 12px; flex: none; }

.status-select {
  font: inherit; font-size: 12.5px; padding: 6px 28px 6px 10px; border: 1px solid var(--hub-line);
  border-radius: 999px; background: #fff; cursor: pointer; appearance: auto; min-height: 34px;
}
.status-select[data-status="live"] { border-color: var(--hub-green); color: var(--hub-green-700); background: #ecfdf5; }
.status-select[data-status="on_hire"] { border-color: var(--steel-800); color: var(--steel-900); background: var(--color-neutral-100); }
.status-select[data-status="maintenance"] { border-color: var(--hub-amber); color: #92400e; background: #fffbeb; }
.status-select[data-status="paused"] { border-color: var(--hub-red); color: var(--hub-red); background: #fef2f2; }
.status-select[data-status="unconfirmed"] { color: var(--color-neutral-700); }
.status-select.saving { opacity: .55; pointer-events: none; }

.rate-view { display: flex; flex-direction: column; gap: 2px; }
.rate-line { white-space: nowrap; }
.rate-line b { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.rate-line small { color: var(--color-neutral-600); }
.rate-edit-btn {
  align-self: flex-start; background: none; border: 0; padding: 0; margin-top: 2px; cursor: pointer;
  font-size: 11.5px; color: var(--brand-700); text-decoration: underline; font-family: inherit;
}
.rate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 200px; }
.rate-form label { font-size: 10.5px; color: var(--color-neutral-600); display: block; }
.rate-form .input { min-height: 32px; font-size: 12.5px; padding: 4px 6px; }
.rate-form-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
.rate-form-actions .btn { min-height: 30px; font-size: 12px; padding: 2px 10px; }

.traction { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tr-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--color-neutral-800); }
.tr-item svg { width: 15px; height: 15px; color: var(--color-neutral-500); }
.tr-leads { color: var(--hub-green-700); font-weight: 600; }
.tr-leads svg { color: var(--hub-green); }
.demand {
  font-family: var(--font-heading); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; font-weight: 600; white-space: nowrap;
}
.demand-high { background: #ecfdf5; color: var(--hub-green-700); border: 1px solid #a7f3d0; }
.demand-price { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.demand-low { background: var(--color-neutral-100); color: var(--color-neutral-700); border: 1px solid var(--hub-line); }
.demand-steady { background: #fff; color: var(--color-neutral-700); border: 1px solid var(--hub-line); }
.demand-hint { flex-basis: 100%; font-size: 11px; color: var(--color-neutral-600); }

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.row-actions .btn { min-height: 30px; font-size: 11.5px; padding: 2px 9px; letter-spacing: .04em; white-space: nowrap; }
.btn-ghost { border-color: var(--hub-line); background: #fff; }
.btn-ghost:hover { border-color: var(--brand-500); }
.btn-boost { border-color: var(--brand-300); background: var(--brand-100); color: var(--brand-700); }

.fleet-empty-filter { padding: 22px 8px; text-align: center; font-size: 13px; color: var(--color-neutral-600); }

/* ---- Activity feed --------------------------------------------------------- */
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hub-line); font-size: 12.5px; line-height: 1.4; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-neutral-100); color: var(--color-neutral-600);
}
.activity-icon svg { width: 14px; height: 14px; }
.activity-icon.whatsapp { background: #ecfdf5; color: var(--hub-green-700); }
.activity-icon.call { background: #eff6ff; color: #1d4ed8; }
.activity-icon.save { background: var(--brand-100); color: var(--brand-700); }
.activity-icon.search { background: var(--color-neutral-100); color: var(--steel-900); }
.activity-text b { font-weight: 600; }
.activity-time { display: block; font-size: 11px; color: var(--color-neutral-600); margin-top: 2px; }

/* ---- Layout ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* The table becomes stacked cards on a phone. */
  .fleet-table, .fleet-table tbody, .fleet-table tr, .fleet-table td { display: block; }
  .fleet-table thead { display: none; }
  .fleet-table tr { padding: 10px 0; border-bottom: 1px solid var(--hub-line); }
  .fleet-table td { padding: 5px 0; border: 0; }
  .fleet-table td[data-col]::before {
    content: attr(data-col); display: block; font-family: var(--font-heading); font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 3px;
  }
  .fleet-table td[data-col="Machine"]::before { display: none; }
}

@media (min-width: 640px) {
  .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fleet-row .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ph { background: var(--hub-bg); }
  .hub { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 16px var(--content-gutter) 40px; }
  .hub-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
  .hub-activity { position: sticky; top: calc(var(--nav-h) + 12px); }
  .kpi-value { font-size: 32px; }
  .fleet-table th, .fleet-table td { padding: 12px 10px; }
  .machine-thumb { width: 76px; height: 52px; }
}