:root{
  --bg: #eaf3ff;              /* page background */
  --card-bg: #ffffff;         /* card background */
  --ink: #0f2544;             /* dark navy text */
  --muted: #5b6b86;           /* muted label */
  --accent-amber: #f59e0b;    /* Rezerwacja */
  --accent-red: #d93025;      /* Um. dew. */
  --accent-green: #10b981;    /* Wolne */
  --btn-bg: #0f2544;          /* button navy */
  --btn-fg: #ffffff;
  --ring: rgba(15,37,68,0.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* container */
.np-listing .wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px 80px;
}

/* hide table scaffolding; treat tbody as stack of cards */
.np-listing table,
.np-listing thead,
.np-listing tbody,
.np-listing tr,
.np-listing th,
.np-listing td{
  display:block;
  border:none;
  padding:0;
  margin:0;
}
.np-listing thead{ display:none; }

/* one row = one card */
.card{
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(15, 37, 68, 0.10);
  padding: 18px 18px 22px;
  margin: 14px 6px 22px;
  border: 1px solid var(--ring);
}
.card:nth-child(even){
  box-shadow: 0 22px 64px rgba(15, 37, 68, 0.12);
}

/* header line: apt number + status */
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 6px 8px;
}

.card-apt{
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 900;
  letter-spacing: .3px;
}

/* status badge */
.badge{
  font-weight: 900;
  font-size: clamp(16px, 4.8vw, 22px);
  padding: 4px 0;
  white-space: nowrap;
}
.badge--rez{ color: var(--accent-amber); }
.badge--um{  color: var(--accent-red); }
.badge--wol{ color: var(--accent-green); }

.hr{
  height: 1px;
  background: var(--ring);
  margin: 4px 0 12px;
  border-radius: 1px;
}

/* info grid: two columns, two rows */
.info{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 18px;
  padding: 10px 4px 18px;
}

/* label + icon; value bold below */
.item .label{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-weight: 800;
  font-size: clamp(16px, 4.2vw, 20px);
  letter-spacing:.2px;
  margin-bottom: 4px;
}

.item .value{
  font-size: clamp(26px, 6.6vw, 34px);
  font-weight: 900;
  letter-spacing:.3px;
}

.icon{
  display:inline-flex;
  width: 22px;
  height: 22px;
  align-items:center;
  justify-content:center;
}

/* big pill button */
.card .actions{
  padding-top: 6px;
  display:flex;
  justify-content:center;
}

.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 28px;
  min-width: 70%;
  border-radius: 999px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 900;
  font-size: clamp(18px, 5vw, 22px);
  text-decoration:none;
  box-shadow: 0 8px 24px rgba(15, 37, 68, 0.25);
}
.btn-pill:active{
  transform: translateY(1px);
  box-shadow: 0 6px 18px rgba(15, 37, 68, 0.25);
}

/* (opcjonalnie) tooltip – nieużywany teraz, zostawiony w razie „powrotu” */
#hintBox{
  position: fixed;
  z-index: 99999;
  display: none;
  max-width: min(90vw, 360px);
  padding: 12px 14px;
  background: rgba(15,37,68,0.96);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: none;
}
#hintBox.is-visible{ display:block; }
#hintBox .hint-title{ font-weight: 800; margin-bottom: 6px; opacity: .95; }
#hintBox .hint-body{ font-weight: 600; }

/* ===== Modal (Sheet) – bazowy styl + warianty pozycji ===== */
#sheetOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: none;
  z-index: 99998;
}
#sheetOverlay.is-open{ display:block; }

.sheet{
  position: fixed;
  background: var(--card-bg, #fff);
  box-shadow: 0 -16px 46px rgba(0,0,0,.28);
  transition: transform .22s ease;
  z-index: 99999;
  border: 1px solid var(--ring);
}

/* wariant z dołu */
.sheet--bottom{
  left:0; right:0; bottom:0;
  max-height:75vh;
  border-top-left-radius:20px; border-top-right-radius:20px;
  border-bottom-left-radius:0;  border-bottom-right-radius:0;
  transform: translateY(100%);
}
.sheet--bottom.is-open{ transform: translateY(0); }

/* wariant z góry (domyślny) */
.sheet--top{
  left:0; right:0; top:0;
  max-height:75vh;
  border-bottom-left-radius:20px; border-bottom-right-radius:20px;
  border-top-left-radius:0;  border-top-right-radius:0;
  transform: translateY(-100%);
}
.sheet--top.is-open{ transform: translateY(0); }

/* wariant z prawej */
.sheet--right{
  top:0; bottom:0; right:0;
  width:min(92vw, 460px);
  border-top-left-radius:20px; border-bottom-left-radius:20px;
  border-top-right-radius:0;  border-bottom-right-radius:0;
  transform: translateX(100%);
}
.sheet--right.is-open{ transform: translateX(0); }

.sheet-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ring);
}

.sheet-title{
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 900;
  color: var(--ink);
}

.sheet-close{
  appearance: none;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ink);
}

.sheet-body{
  padding: 16px 18px 22px;
  overflow: auto;
  max-height: calc(75vh - 64px);
  font-size: 16px;
  color: var(--ink);
}

.loading{ opacity:.8; font-style: italic; }

/* „zwykły przycisk” dla cen */
.price-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--ring);
  background: #f3f4f6;
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(18px, 5vw, 24px);
  cursor: pointer;
  text-align: center;
}
.price-btn:active{ transform: translateY(1px); }