/* =========================================================
   RentGo — additions the server-rendered app needs on top of
   the prototype's stylesheets. Everything here is a gap the
   static mock-up never had: validation messages, confirmation
   states, and a couple of layout helpers.
   Brand tokens come from main.css; nothing is redefined here.
   ========================================================= */

/* ---------- Validation ---------- */
.err,
.field-validation-error {
  display: block;
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.input.input-validation-error,
.field input.input-validation-error,
.field select.input-validation-error,
.field textarea.input-validation-error {
  border-color: var(--danger);
}

.validation-summary-errors ul { margin: 0; padding-inline-start: 18px; }
.validation-summary-valid { display: none; }

/* ---------- Confirmation ---------- */
.ico-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
  font-size: 34px;
}

/* ---------- Status pills ---------- */
/* One pill per booking stage, so a tenant can scan a list of rentals at a glance. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.status-pill.pending   { background: #fef3c7; color: #b45309; }
.status-pill.awaiting  { background: #fef3c7; color: #b45309; }
.status-pill.accepted  { background: var(--primary-50); color: var(--primary-700); }
.status-pill.active    { background: var(--accent-100); color: var(--accent-600); }
.status-pill.returned  { background: var(--primary-50); color: var(--primary-700); }
.status-pill.completed { background: #dcfce7; color: #15803d; }
.status-pill.cancelled { background: #fee2e2; color: #b91c1c; }

/* ---------- Booking rows (my rentals / orders received) ---------- */
.booking-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}
.booking-row:last-child { border-bottom: 0; }
.booking-row img { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.booking-row .br-body { flex: 1; min-width: 0; }
.booking-row .br-title { font-weight: 700; margin-bottom: 4px; }
.booking-row .br-meta { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.9; }
.booking-row .br-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.booking-row .br-side { text-align: end; flex-shrink: 0; }
.booking-row .br-total { font-weight: 800; color: var(--primary); }

/* ---------- Small stat cards (vendor dashboard) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.stat-card .sc-value { font-size: var(--fs-2xl); font-weight: 900; color: var(--primary); }
.stat-card .sc-label { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Tables (my products) ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th,
.data-table td { padding: var(--space-4); text-align: start; border-bottom: 1px solid var(--border-soft); }
.data-table th { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .t-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; }
.data-table .t-actions { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .data-table thead { display: none; }
  .data-table tr { display: block; border-bottom: 1px solid var(--border-soft); padding: var(--space-3) 0; }
  .data-table td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: 6px var(--space-4); }
  .data-table td::before { content: attr(data-label); font-weight: 700; color: var(--text-muted); font-size: var(--fs-xs); }
}

/* ---------- Account layout ---------- */
.acct-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 980px) { .acct-layout { grid-template-columns: 1fr; } }

/* ---------- One-time codes ---------- */
/* The prototype drew four boxes; a six-digit code needs narrower ones to stay on one line
   inside the sign-in card. */
.otp input { width: 46px; height: 56px; font-size: var(--fs-xl); }
@media (max-width: 420px) {
  .otp { gap: 6px; }
  .otp input { width: 40px; height: 50px; }
}

/* "Resend" is a form submit, not a link, so it has to be un-styled back into one. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

.otp-meta form { display: inline; }

/* Vendor quick-add in the header. Hidden on narrow screens, where the same link
   lives in the mobile menu — the header has no room for a fifth control there. */
.header-actions .btn-add-listing { white-space: nowrap; }
.header-actions .btn-add-listing i { margin-inline-end: 6px; }
@media (max-width: 1100px) {
    .header-actions .btn-add-listing { display: none; }
}

/* Logout posts rather than links, so it is a <button> that has to sit in the nav
   looking exactly like the anchors around it. */
.acct-nav form { margin: 0; display: contents; }
.acct-nav button.acct-link {
    width: 100%;
    font: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}