/* ══ UNIT DETAIL PAGE — Premium Redesign ════════════════════════════ */

/* ─── Page Shell ──────────────────────────────────────────────────── */
.ud-page { display:flex; flex-direction:column; gap:0; }

/* ─── Breadcrumb Row ──────────────────────────────────────────────── */
.ud-breadcrumb {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px; flex-wrap:wrap; gap:6px;
}
.ud-breadcrumb-trail {
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--text-faint);
}
.ud-breadcrumb-trail .lnk { cursor:pointer; transition:color .12s; }
.ud-breadcrumb-trail .lnk:hover { color:var(--text-soft); }
.ud-back {
  font-size:12px; font-weight:500; color:var(--primary);
  background:none; border:none; font-family:inherit;
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  padding:0; transition:opacity .1s;
}
.ud-back:hover { opacity:.75; }

/* ─── Header Card ─────────────────────────────────────────────────── */
.ud-header-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; padding:18px 20px;
  box-shadow:var(--shadow-sm); margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.ud-hdr-left { flex:1; min-width:0; }
.ud-hdr-code {
  font-size:11px; font-family:'JetBrains Mono',monospace;
  color:var(--text-faint); margin-bottom:4px;
}
.ud-hdr-no-row {
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
  flex-wrap:wrap;
}
.ud-hdr-no {
  font-size:22px; font-weight:700; color:var(--text); letter-spacing:-.3px;
}
.ud-hdr-meta {
  font-size:12px; color:var(--text-muted); line-height:1.5;
}
.ud-hdr-meta-sep { color:var(--text-faint); margin:0 4px; }
.ud-hdr-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ─── KPI Summary Strip ───────────────────────────────────────────── */
.ud-kpi-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin-bottom:16px;
}
/* Reuses .inv-kpi-tile, .inv-kpi-icon, etc. from inventory.css */
/* Override value size for non-numeric values */
.ud-kpi-tile .inv-kpi-value.sm { font-size:18px; letter-spacing:-.2px; }
.ud-kpi-price-wrap { display:flex; align-items:baseline; gap:4px; }
.ud-kpi-pkr {
  font-size:10px; font-weight:600; color:var(--text-muted);
  position:relative; top:-4px;
}
.ud-kpi-num { font-size:22px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.ud-kpi-unit { font-size:13px; font-weight:400; color:var(--text-muted); }

/* ─── Tab Bar ─────────────────────────────────────────────────────── */
.ud-tabs {
  display:inline-flex; align-items:center; gap:2px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; padding:4px; margin-bottom:16px;
  box-shadow:var(--shadow-sm); flex-wrap:wrap;
}
.ud-tab {
  display:inline-flex; align-items:center; gap:7px;
  height:32px; padding:0 14px; border-radius:7px;
  border:none; background:transparent; font-family:inherit;
  font-size:12px; font-weight:500; color:var(--text-muted);
  cursor:pointer; transition:all .1s; white-space:nowrap;
}
.ud-tab:hover { background:rgba(0,0,0,.04); color:var(--text-soft); }
[data-theme="dark"] .ud-tab:hover { background:rgba(255,255,255,.06); }
.ud-tab.on {
  background:var(--bg-primary-soft); color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.ud-tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  height:16px; min-width:16px; padding:0 4px;
  background:var(--bg-chip); border:1px solid var(--border);
  border-radius:8px; font-size:10px; font-weight:500;
  color:var(--text-soft); line-height:1; box-sizing:border-box;
}
.ud-tab.on .ud-tab-badge {
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  border-color:color-mix(in srgb, var(--primary) 20%, transparent);
  color:var(--primary);
}

/* ─── Tab Content ─────────────────────────────────────────────────── */
.ud-tab-pane { display:none; }
.ud-tab-pane.on { display:block; }

/* ─── Overview 2-column layout ────────────────────────────────────── */
.ud-overview-grid {
  display:grid; grid-template-columns:1.5fr 1fr; gap:16px;
  align-items:start;
}

/* ─── Detail Card ─────────────────────────────────────────────────── */
.ud-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-sm); overflow:hidden;
  margin-bottom:16px;
}
.ud-card:last-child { margin-bottom:0; }
.ud-card-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; height:52px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ud-card-title {
  display:flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; color:var(--text);
}
.ud-card-title-ic { color:var(--text-muted); display:flex; }
.ud-card-hd-right { display:flex; align-items:center; gap:6px; }
.ud-card-meta { font-size:11px; color:var(--text-muted); margin-left:4px; }

/* Definition rows */
.ud-rows { padding:0 18px; }
.ud-row {
  display:flex; align-items:center; justify-content:space-between;
  height:36px; border-bottom:1px solid var(--border); gap:12px;
}
.ud-row:last-child { border-bottom:none; }
.ud-row-l {
  font-size:12px; font-weight:500; color:var(--text-muted);
  flex-shrink:0; width:40%;
}
.ud-row-r {
  font-size:13px; font-weight:500; color:var(--text);
  text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ud-row-r.mono { font-family:'JetBrains Mono',monospace; }
.ud-row-r.price {
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
}

/* Notes section */
.ud-notes { padding:14px 18px; border-top:1px solid var(--border); }
.ud-notes-lbl {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px;
}
.ud-notes-body {
  font-size:13px; color:var(--text-soft); line-height:1.6;
  background:var(--bg-page); border-radius:8px; padding:12px;
}

/* ─── Empty States (no emoji, Lucide only) ────────────────────────── */
.ud-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:28px 18px; text-align:center; gap:6px;
}
.ud-empty-ic {
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-chip); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); margin-bottom:4px;
}
.ud-empty-title { font-size:13px; font-weight:500; color:var(--text-soft); margin:0; }
.ud-empty-sub { font-size:12px; color:var(--text-muted); margin:0; max-width:260px; line-height:1.5; }

/* Ownership row */
.ud-owner-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.ud-owner-row:last-child { border-bottom:none; }
.ud-owner-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--bg-primary-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--primary);
}
.ud-owner-name { font-size:13px; font-weight:500; color:var(--text); }
.ud-owner-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.ud-owner-badge-current {
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px;
  background:var(--bg-success-soft); color:var(--success);
  border:1px solid rgba(22,163,74,.2); white-space:nowrap;
}

/* Minimal no-transfer text block */
.ud-no-transfer {
  padding:16px 18px; border-top:1px solid var(--border);
}
.ud-no-transfer-title { font-size:12px; font-weight:500; color:var(--text-soft); margin-bottom:3px; }
.ud-no-transfer-sub { font-size:12px; color:var(--text-muted); }

/* ─── Stub tab panels (Payments, Contacts, Documents, Activity) ───── */
.ud-stub {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-sm);
}
.ud-stub-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; height:52px; border-bottom:1px solid var(--border);
}
.ud-stub-title { font-size:14px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }

/* ─── Contact timeline row ────────────────────────────────────────── */
.ud-con-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border);
}
.ud-con-row:last-child { border-bottom:none; }
.ud-con-ic {
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  background:var(--bg-chip); display:flex; align-items:center;
  justify-content:center; color:var(--text-muted);
}
.ud-con-body { flex:1; min-width:0; }
.ud-con-label { font-size:12px; font-weight:600; color:var(--text-soft); }
.ud-con-notes { font-size:11px; color:var(--text-muted); margin-top:2px; }
.ud-con-date { font-size:11px; color:var(--text-faint); margin-top:2px; }

/* ─── More dropdown ───────────────────────────────────────────────── */
/* Reuses .inv-dd from inventory.css */

/* ─── Sticky header behavior ──────────────────────────────────────── */
.ud-sticky-hd {
  position:sticky; top:0; z-index:20;
  /* Slight bg lift so scrolled content doesn't bleed through */
  backdrop-filter:saturate(180%) blur(6px);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
}

/* ─── PKR superscript inside detail rows ──────────────────────────── */
.ud-row-r-pkr {
  font-size:11px; font-weight:600; color:var(--text-muted);
  margin-right:3px; position:relative; top:-3px;
}

/* ─── Payments tab — summary chips ────────────────────────────────── */
.ud-pay-chip {
  display:inline-flex; align-items:baseline; gap:6px;
  height:30px; padding:0 12px; border-radius:8px;
  background:var(--bg-chip); border:1px solid var(--border);
}
.ud-pay-chip-lbl {
  font-size:11px; font-weight:500; color:var(--text-muted);
}
.ud-pay-chip-val {
  font-size:13px; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* ─── Top-level header action accents ─────────────────────────────── */
.ud-act-transfer {
  color: var(--text) !important;
}
.ud-act-transfer:hover {
  background: color-mix(in srgb, #8b5cf6 8%, var(--bg-card)) !important;
  border-color: color-mix(in srgb, #8b5cf6 35%, var(--border)) !important;
  color: #8b5cf6 !important;
}
.ud-act-cancel {
  color: var(--text) !important;
}
.ud-act-cancel:hover {
  background: var(--bg-danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
  color: var(--danger) !important;
}

/* ─── Activity Timeline ───────────────────────────────────────────── */
.ud-activity-timeline {
  padding:14px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.ud-act-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; background:var(--bg-page);
  border:1px solid var(--border); border-radius:8px;
}
.ud-act-ic {
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ud-act-body { flex:1; min-width:0; }
.ud-act-title {
  font-size:12px; font-weight:600; color:var(--text);
  line-height:1.4; word-break:break-word;
}
.ud-act-meta {
  font-size:11px; color:var(--text-muted); margin-top:3px;
  display:flex; gap:4px; flex-wrap:wrap;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .ud-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .ud-overview-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .ud-sticky-hd { position:static; }  /* sticky-on-mobile feels cramped */
  .ud-header-card { flex-direction:column; align-items:flex-start; }
  .ud-hdr-right { width:100%; flex-wrap:wrap; }
  .ud-tabs { width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .ud-kpi-grid { grid-template-columns:1fr 1fr; }
  .ud-hdr-outstanding { align-items:flex-start; }
}

/* ═══ Recovery-focused redesign additions ════════════════════════════ */

/* Sticky-header outstanding amount — large, red, prominent */
.ud-hdr-outstanding {
  display:flex; flex-direction:column; align-items:flex-end;
  margin-right:6px; line-height:1.1;
}
.ud-hdr-out-lbl {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted);
}
.ud-hdr-out-val {
  font-size:22px; font-weight:700; color:var(--danger);
  font-variant-numeric:tabular-nums; letter-spacing:-.3px;
}
.ud-hdr-cta { height:32px; }

/* Payment Schedule — summary chips live in the panel header */
.ud-sched-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Status pills (Paid / Due / Overdue) */
.ud-sched-pill {
  display:inline-flex; align-items:center; height:20px; padding:0 9px;
  border-radius:10px; font-size:11px; font-weight:600; white-space:nowrap;
}
.ud-sched-pill.paid    { background:var(--bg-success-soft); color:var(--success); }
.ud-sched-pill.due     { background:var(--bg-chip);         color:var(--text-soft); }
.ud-sched-pill.overdue { background:var(--bg-danger-soft);  color:var(--danger); }

/* Overdue installment rows highlighted red */
.ud-sched-overdue td { background:var(--bg-danger-soft); }
[data-theme="dark"] .ud-sched-overdue td { background:rgba(220,38,38,.08); }

/* Documents grid */
.ud-doc-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px; padding:16px 18px;
}
.ud-doc-card {
  display:flex; flex-direction:column; gap:6px;
  background:var(--bg-page); border:1px solid var(--border);
  border-radius:10px; padding:14px;
}
.ud-doc-ic {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-chip); color:var(--text-muted);
}
.ud-doc-name {
  font-size:12px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ud-doc-date { font-size:11px; color:var(--text-muted); }
.ud-doc-dl {
  margin-top:4px; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; color:var(--primary);
  text-decoration:none; cursor:pointer;
}
.ud-doc-dl:hover { text-decoration:underline; }