/* ═══════════════════════════════════════════════════════════════
   PropertyDesk — Employee Detail Block
   Prefix: .pdemp-*
   Loaded via pd_cheque_fix/employee_detail library.
   Depends on pd_cheque_fix/node_detail (pdnd-* base reuse).
   preprocess: false (to avoid CSS aggregation stale cache)
═══════════════════════════════════════════════════════════════ */

/* ── OUTER WRAPPER ─────────────────────────────────────────── */
.pdemp-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  margin-bottom: 24px;
}

/* ── GRADIENT HEADER ───────────────────────────────────────── */
.pdemp-header {
  background: linear-gradient(90deg, #1f6e44, #2e8b57);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[dir="rtl"] .pdemp-header {
  background: linear-gradient(90deg, #2e8b57, #1f6e44);
}

.pdemp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pdemp-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.pdemp-name {
  font-size: 16pt;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.pdemp-sub {
  font-size: 8.5pt;
  color: rgba(255,255,255,.72);
  margin-top: 3px;
}

.pdemp-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Status pill inside header */
.pdemp-status-pill {
  font-size: 8.5pt;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.pdemp-st-active {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.38);
  color: #fff;
}
.pdemp-st-inactive {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.65);
}

/* Edit button */
.pdemp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 9pt;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.pdemp-btn-edit {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.6);
  color: #1f6e44;
}
.pdemp-btn-edit:hover {
  background: #fff;
  color: #145229;
}

/* ── KPI STRIP ─────────────────────────────────────────────── */
.pdemp-kpi {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #fcfcfc;
}

.pdemp-kp {
  flex: 1;
  padding: 14px 10px;
  text-align: center;
  border-inline-end: 1px solid #e5e7eb;
}
.pdemp-kp:last-child {
  border-inline-end: none;
}

.pdemp-kp-val {
  font-size: 20pt;
  font-weight: 800;
  color: #2e8b57;
  line-height: 1;
  letter-spacing: -.5px;
}
.pdemp-kp-val.pdemp-kp-teal { color: #0f766e; }
.pdemp-kp-val.pdemp-kp-blue { color: #1e40af; }
.pdemp-kp-val.pdemp-kp-gray {
  color: #6b7280;
  font-size: 11pt;
  font-weight: 700;
}

.pdemp-kp-lbl {
  font-size: 7.5pt;
  color: #9ca3af;
  margin-top: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── PROFILE CARD (2-col) ──────────────────────────────────── */
.pdemp-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #e5e7eb;
}

.pdemp-section {
  padding: 16px 22px;
}
.pdemp-section:first-child {
  border-inline-end: 1px solid #e5e7eb;
}

.pdemp-section-head {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f3f4f6;
}

.pdemp-row {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid #f9fafb;
}
.pdemp-row:last-child { border-bottom: none; }

.pdemp-lbl {
  min-width: 110px;
  flex-shrink: 0;
  font-size: 9pt;
  color: #6b7280;
  font-weight: 600;
}
[dir="rtl"] .pdemp-lbl { min-width: 130px; }

.pdemp-val {
  flex: 1;
  font-size: 10pt;
  color: #1a202c;
}

.pdemp-link {
  color: #2e8b57;
  text-decoration: none;
  font-weight: 600;
}
.pdemp-link:hover { text-decoration: underline; }

/* Inline status within profile */
.pdemp-inline-st {
  font-size: 8.5pt;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}
.pdemp-st-green {
  background: #dcfce7;
  color: #166534;
}
.pdemp-st-gray {
  background: #f3f4f6;
  color: #6b7280;
}

/* ── AUDIT TRAIL ───────────────────────────────────────────── */
.pdemp-audit {
  padding: 8px 22px;
  font-size: 8pt;
  color: #9ca3af;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.pdemp-audit strong { color: #6b7280; }

/* ── ACTIVITY SECTION ──────────────────────────────────────── */
.pdemp-activity {
  padding: 18px 22px 22px;
}

.pdemp-activity-head {
  font-size: 11pt;
  font-weight: 700;
  color: #1f6e44;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8f5ee;
}

/* Filter chips */
.pdemp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.pdemp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 8.5pt;
  font-weight: 600;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.pdemp-chip:hover {
  background: #e5e7eb;
}
.pdemp-chip.active {
  background: #2e8b57;
  color: #fff;
  border-color: #2e8b57;
}
.pdemp-chip strong { font-weight: 800; }

/* Search row */
.pdemp-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.pdemp-search {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 9.5pt;
  width: 220px;
  outline: none;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.pdemp-search:focus {
  border-color: #2e8b57;
  box-shadow: 0 0 0 3px rgba(46,139,87,.12);
}

.pdemp-meta {
  font-size: 8.5pt;
  color: #9ca3af;
  white-space: nowrap;
}

/* ── ACTIVITY TABLE ─────────────────────────────────────────── */
.pdemp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}

.pdemp-tbl thead tr {
  background: linear-gradient(90deg, #1f6e44, #2e8b57);
}
[dir="rtl"] .pdemp-tbl thead tr {
  background: linear-gradient(90deg, #2e8b57, #1f6e44);
}

.pdemp-tbl th {
  padding: 9px 12px;
  text-align: start;
  font-size: 8pt;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.pdemp-tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.pdemp-tbl tbody tr:nth-child(even) td {
  background: #f9fafb;
}
.pdemp-tbl tbody tr:hover td {
  background: #f0f9f4;
  transition: background .1s;
}

.pdemp-tbl tr.pdemp-hidden { display: none; }

.pdemp-tbl-link {
  color: #2e8b57;
  text-decoration: none;
  font-weight: 600;
}
.pdemp-tbl-link:hover {
  text-decoration: underline;
  color: #1f6e44;
}

.pdemp-date {
  white-space: nowrap;
  color: #6b7280;
  font-size: 9pt;
}

/* Type cell */
.pdemp-type-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.pdemp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Type colors */
.pdemp-dot-contract_ct        { background: #166534; }
.pdemp-dot-cheque_ct          { background: #0f766e; }
.pdemp-dot-payment_receipt_ct { background: #b45309; }
.pdemp-dot-unit               { background: #1e40af; }
.pdemp-dot-maintenance_ticket { background: #6b21a8; }
.pdemp-dot-owner_ct           { background: #1f6e44; }
.pdemp-dot-building_ct        { background: #065f46; }
.pdemp-dot-tenant_ct          { background: #0369a1; }
.pdemp-dot-agent              { background: #92400e; }

.pdemp-type-lbl {
  font-size: 8.5pt;
  color: #4b5563;
  font-weight: 600;
}

/* Empty state */
.pdemp-empty {
  padding: 28px 16px;
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  font-size: 9.5pt;
}

/* ── RESPONSIVE COLLAPSE (screen < 700px) ─────────────────── */
@media (max-width: 700px) {
  .pdemp-profile { grid-template-columns: 1fr; }
  .pdemp-section:first-child { border-inline-end: none; border-bottom: 1px solid #e5e7eb; }
  .pdemp-kpi { flex-wrap: wrap; }
  .pdemp-kp { min-width: 50%; }
  .pdemp-search { width: 140px; }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  .pdemp-wrap { box-shadow: none; border: 1px solid #ccc; }
  .pdemp-btn { display: none; }
  .pdemp-search-row { display: none; }
  .pdemp-chips { display: none; }
  .pdemp-tbl tr.pdemp-hidden { display: table-row !important; }
}