/* ============================================================
   HIRES — màn "Đơn thuê": 2 góc nhìn (tôi thuê / khách thuê tôi),
   KPI player, đơn đang diễn ra ghim + lịch sử phân trang
   ============================================================ */

/* Giãn cách dưới tiêu đề "Đơn thuê" (nhất là góc nhìn user: ẩn tab+KPI → eyebrow sát card) */
#hires .eyebrow { display: block; margin-bottom: 14px; }

/* 4 ô KPI player (tái dùng .mini-kpi từ admin.css) */
.hr-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 720px) { .hr-kpis { grid-template-columns: 1fr 1fr; } }

/* Select lọc trạng thái nằm gọn bên phải header card */
.hr-sel { width: auto; height: 38px; padding: 0 10px; font-size: 13px; margin-left: auto; flex-shrink: 0; }

/* Đơn đang diễn ra — card ghim nổi bật */
.hr-active {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), .10), rgba(var(--violet-rgb), .06));
  border: 1px solid rgba(var(--cyan-rgb), .35);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.hr-active__av {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 21px; background: var(--surface2);
}
.hr-active__av img { width: 100%; height: 100%; object-fit: cover; }
.hr-active__body { min-width: 0; flex: 1; }
.hr-active__name { font-weight: 700; font-size: 14px; }
.hr-active__meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hr-active .btn { flex-shrink: 0; }
/* Mobile: nút "Mở chat" xuống dòng full-width để không đâm vào tên/mô tả */
@media (max-width: 560px) {
  .hr-active { flex-wrap: wrap; }
  .hr-active .btn { flex: 1 0 100%; margin-top: 2px; }
}

/* Dòng lịch sử */
.hr-list { display: flex; flex-direction: column; gap: 8px; }
.hr-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg2); border-radius: 12px; padding: 10px 12px;
}
.hr-row__av {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; font-size: 18px; background: var(--surface2);
}
.hr-row__av img { width: 100%; height: 100%; object-fit: cover; }
.hr-row__body { min-width: 0; flex: 1; }
.hr-row__name { font-weight: 700; font-size: 13.5px; }
.hr-row__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hr-row__amt  { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.hr-row__time { font-size: 11.5px; color: var(--faint); white-space: nowrap; text-align: right; }

/* Nhãn trạng thái */
.hr-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.hr-tag--doing     { background: rgba(var(--cyan-rgb), .14); color: var(--cyan); }
.hr-tag--pending   { background: rgba(var(--gold-rgb), .14); color: var(--gold); }
.hr-tag--done      { background: rgba(var(--green-rgb), .14); color: var(--green); }
.hr-tag--cancelled { background: rgba(var(--red-rgb), .12); color: var(--red); }

.hr-empty { color: var(--faint); font-size: 13px; padding: 14px 2px; text-align: center; }

/* ============================================================
   NEBULA skin (gate :root[data-theme="nebula"]). Neon BYTE-NGUYÊN.
   1:1 mockup "Don Thue": kicker+h1, 2 tab pill, card đơn đang diễn ra
   gradient ghim, card lịch sử kính + hàng divider + pill trạng thái.
   ============================================================ */
:root[data-theme="nebula"] .app.is-neb #content > #hires.screen { max-width: 1000px; margin: 0 auto; padding: 26px 30px 90px; }
@media (max-width: 720px) {
  :root[data-theme="nebula"] .app.is-neb #content > #hires.screen { padding: 22px 16px 60px; }
}

/* Kicker + h1 */
:root[data-theme="nebula"] #hires .eyebrow {
  color: var(--n-label); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;
}
:root[data-theme="nebula"] #hires .screen-title { margin: 0 0 20px; }

/* Tab góc nhìn (player) = pill */
:root[data-theme="nebula"] #hrTabs { gap: 8px; margin-bottom: 20px; }
:root[data-theme="nebula"] #hrTabs .itab {
  border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 500;
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .09);
  color: var(--ink-soft);
}
:root[data-theme="nebula"] #hrTabs .itab.is-active {
  background: var(--violet-tint); border-color: transparent; color: var(--bg); font-weight: 600;
}

/* KPI player = tile kính */
:root[data-theme="nebula"] #hires .mini-kpi {
  background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .08);
  border-radius: 14px;
}

/* Đơn đang diễn ra = card gradient ghim (violet→cyan) */
:root[data-theme="nebula"] .hr-active {
  background: linear-gradient(120deg, rgba(var(--violet-rgb), .16), rgba(var(--cyan-rgb), .06));
  border: 1px solid rgba(var(--violet-rgb), .3);
  border-radius: 18px; padding: 18px 20px; gap: 16px; margin-bottom: 22px;
}
:root[data-theme="nebula"] .hr-active__av {
  width: 52px; height: 52px; border-radius: 14px; font-size: 26px;
  background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff;
}
:root[data-theme="nebula"] .hr-active__name { font-size: 16px; }
:root[data-theme="nebula"] .hr-active__meta { font-size: 13px; color: var(--ink-soft); }
:root[data-theme="nebula"] .hr-active .btn {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .16);
  color: var(--ink); border-radius: 11px; padding: 11px 16px; font-weight: 600;
}

/* Card lịch sử = kính */
:root[data-theme="nebula"] #hires .card {
  background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .08);
  border-radius: 18px;
}
:root[data-theme="nebula"] #hires .card__body { padding: 22px; }
:root[data-theme="nebula"] #hires .sd-sec { margin-bottom: 16px; }
:root[data-theme="nebula"] #hires .sd-sec__ic,
:root[data-theme="nebula"] #hires .sd-sec__d,
:root[data-theme="nebula"] #hires #hrReload { display: none; }
:root[data-theme="nebula"] #hires .sd-sec__t { font-size: 16px; font-weight: 700; }

/* Select lọc trạng thái = chip kính + caret riêng (uiselect vẽ popup) */
:root[data-theme="nebula"] #hires .hr-sel {
  appearance: none; -webkit-appearance: none; color-scheme: dark; cursor: pointer;
  height: 38px; padding: 0 30px 0 13px; border-radius: 10px;
  background: rgba(var(--hl-rgb), .05)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a83b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  border: 1px solid rgba(var(--hl-rgb), .09); color: var(--ink-soft);
}

/* Tab kỳ (Tất cả/7d/30d) = pill mờ */
:root[data-theme="nebula"] #hrPeriods { gap: 6px; }
:root[data-theme="nebula"] #hrPeriods .wtab {
  background: transparent; border: 1px solid rgba(var(--hl-rgb), .09);
  color: var(--muted); border-radius: 100px; font-size: 12.5px;
}
:root[data-theme="nebula"] #hrPeriods .wtab.is-active {
  background: rgba(var(--violet-rgb), .16); border-color: rgba(var(--violet-rgb), .3); color: var(--violet-tint);
}

/* Hàng lịch sử = divider trong card (không phải card riêng) */
:root[data-theme="nebula"] .hr-list { gap: 0; }
:root[data-theme="nebula"] .hr-row {
  background: transparent; border-radius: 0; padding: 14px 4px; gap: 14px;
  border-bottom: 1px solid rgba(var(--hl-rgb), .06);
}
:root[data-theme="nebula"] .hr-list .hr-row:last-child { border-bottom: 0; }
:root[data-theme="nebula"] .hr-row__av { width: 42px; height: 42px; border-radius: 11px; font-size: 20px; }
:root[data-theme="nebula"] .hr-row__name { font-size: 14.5px; font-weight: 600; }
:root[data-theme="nebula"] .hr-row__meta { font-size: 12px; color: var(--faint); }

/* Pill trạng thái bo tròn hẳn; huỷ → hồng như mockup */
:root[data-theme="nebula"] .hr-tag { border-radius: 100px; padding: 3px 10px; }
:root[data-theme="nebula"] .hr-tag--cancelled { background: rgba(var(--pink-rgb), .15); color: var(--pink-tint); }

/* Empty-state dịu */
:root[data-theme="nebula"] .hr-empty { color: var(--muted); }