/* ============================================
   Public Contractor Project - Units (Mobile-first)
   Goals:
   - "Table-like" list: 1 apartment per row (no horizontal scroll)
   - Reduce long scroll: group by floor (accordion) + search + jump-to-floor
   - Inspired by global apps (accordion + compact rows + inline details)
   ============================================ */

.cp-unitsPublic .cp-unitsHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.cp-unitsPublic .cp-unitsTitle{
  font-weight: 900;
  font-size: 15px;
  color: #0f172a;
}
.cp-unitsPublic .cp-unitsSub{
  opacity: .75;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.7;
}

/* Tools */
.cp-unitsPublic .cp-unitsTools{
  display:grid;
  gap:10px;
}
.cp-unitsPublic .cp-unitsToolsRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.cp-unitsPublic .cp-ico{
  width: 18px;
  height: 18px;
  opacity: .75;
  flex: 0 0 auto;
}
.cp-unitsPublic .cp-unitsSearch{
  flex: 1 1 260px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.30);
  background: #fff;
  box-shadow: 0 12px 26px rgba(2,6,23,.04);
}
.cp-unitsPublic .cp-input{
  width: 100%;
  border: none;
  outline: none;
  font-weight: 900;
  font-size: 13px;
  background: transparent;
  color: #0f172a;
}
.cp-unitsPublic .cp-unitsJump{
  flex: 0 0 auto;
}
.cp-unitsPublic .cp-select{
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.30);
  background: #fff;
  font-weight: 900;
  font-size: 13px;
  color: #0f172a;
  box-shadow: 0 12px 26px rgba(2,6,23,.04);
}
.cp-unitsPublic .cp-hint{
  font-size: 12px;
  opacity: .75;
  font-weight: 800;
}
.cp-unitsPublic .cp-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Accordions (floors + units) */
.cp-unitsPublic details > summary{
  list-style: none;
}
.cp-unitsPublic details > summary::-webkit-details-marker{
  display:none;
}

.cp-unitsPublic .cp-floor{
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(2,6,23,.05);
  margin-bottom: 10px;
}
.cp-unitsPublic .cp-floorSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.cp-unitsPublic .cp-floorTitle{
  font-weight: 900;
  font-size: 14px;
  color: #0f172a;
}
.cp-unitsPublic .cp-floorMeta{
  font-size: 12px;
  opacity: .75;
  margin-top: 4px;
  line-height: 1.5;
}
.cp-unitsPublic .cp-floorRight{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.92);
}
.cp-unitsPublic .cp-acc{
  width: 18px;
  height: 18px;
  transition: transform .15s ease;
  opacity: .75;
}
.cp-unitsPublic .cp-floor[open] .cp-floorRight .cp-acc{
  transform: rotate(180deg);
}
.cp-unitsPublic .cp-floorBody{
  border-top: 1px solid rgba(148,163,184,.18);
}

/* Units list: "table-like" compact rows */
.cp-unitsPublic .cp-unitsList{
  display:block;
}

.cp-unitsPublic .cp-unit{
  border-bottom: 1px dashed rgba(148,163,184,.26);
  background: #fff;
}
.cp-unitsPublic .cp-unit:last-child{
  border-bottom: none;
}

.cp-unitsPublic .cp-unitRow{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items:center;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.cp-unitsPublic .cp-unitRow:hover{
  background: rgba(14,165,233,.05);
}

.cp-unitsPublic .cp-unitMain{
  min-width: 0;
}
.cp-unitsPublic .cp-unitTop{
  font-weight: 900;
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-unitsPublic .cp-unitSub{
  font-size: 12px;
  opacity: .75;
  margin-top: 3px;
  display:flex;
  align-items:center;
  gap: 0;
  min-width:0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-unitsPublic .cp-unitFin{
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-unitsPublic .cp-unitPrice{
  white-space: nowrap;
  text-align: left;
}
.cp-unitsPublic .cp-unitChevron{
  display:flex;
  align-items:center;
  justify-content:center;
}

.cp-unitsPublic .cp-unitChevron .cp-acc{
  opacity: .55;
}
.cp-unitsPublic .cp-unit[open] .cp-unitChevron .cp-acc{
  transform: rotate(180deg);
  opacity: .8;
}

/* Details */
.cp-unitsPublic .cp-unitDetails{
  padding: 0 14px 12px 14px;
}
.cp-unitsPublic .cp-dl{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.18);
  font-size: 12px;
  line-height: 1.7;
}
.cp-unitsPublic .cp-dl > div:nth-child(odd){
  opacity: .75;
  font-weight: 900;
}
.cp-unitsPublic .cp-dl > div:nth-child(even){
  font-weight: 900;
  color: #0f172a;
}

/* Tighter on very small screens */
@media(max-width: 420px){
  .cp-unitsPublic .cp-unitRow{ padding: 10px 12px; gap: 10px; }
  .cp-unitsPublic .cp-floorSummary{ padding: 12px; }
  .cp-unitsPublic .cp-unitFin{ display:none; } /* keep the row compact */
}

/* --- Vertical tightening shard merged from tl_global_ui_tightening.css split: contractor project public surfaces. --- */

.cp-tableWrap,
.cpw-projectUnitsSection .cp-tableWrap {overflow: auto;
  border-radius: 22px !important;
  border: 1px solid var(--tl-tight-border) !important;
  background: #fff;
  box-shadow: var(--tl-tight-shadow-soft) !important;}

.cp-table {width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;}

.cp-table thead th {position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248,250,252,.96) !important;
  backdrop-filter: blur(10px);
  color: var(--tl-tight-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--tl-tight-border) !important;}

.cp-table tbody td {padding: 13px 14px !important;
  vertical-align: middle;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
  background: rgba(255,255,255,.98);}

.cp-table tbody tr:nth-child(even) td {background: rgba(248,250,252,.74);}

.cp-table tbody tr:hover td {background: rgba(239,246,255,.84) !important;}

.cp-table tbody tr:last-child td {border-bottom: 0 !important;}

.cp-table tbody td :is(.tl-btn, .mm-btn, .mw-btn, .cx-btn, .tl-mini-btn, button, a) {min-height: 34px;
  border-radius: 12px !important;}

@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
.cp-table thead th,
.cp-table tbody td {padding: 11px 10px !important;
    font-size: 12px !important;}
}