/* OK Developer Widget - Universal, themable, responsive */

/* =============== THEME TOKENS =============== */
:root {
  --okp-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --okp-color-text: #222;
  --okp-color-muted: #6b7280;
  --okp-color-bg: #ffffff;
  --okp-color-panel: #ffffff;
  --okp-color-border: #e5e7eb;
  --okp-color-accent: #B8BD8F;
  --okp-color-accent-contrast: #ffffff;
  --okp-color-success: #16a34a;
  --okp-color-warning: #d97706;
  --okp-color-danger: #dc2626;
  --okp-radius: 10px;
  --okp-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* responsive typography & no-break defaults
   - adds fluid font sizes via CSS variables
   - prevents unwanted word-wrapping in tables, chips and titles
   - keeps ellipsis for overflow to avoid breaking layout
*/
:root {
  --okp-base-font: clamp(13px, 1.2vw, 16px);
  --okp-title-font: clamp(16px, 2.2vw, 20px);
  --okp-small-font: clamp(10px, 1vw, 12px);
}

/* apply base font size to widget and tune specific elements */
.ok-widget {
  font-size: var(--okp-base-font);
}

/* prevent breaking of words in key UI pieces (tables, chips, titles) */
.okw-table th,
.okw-table td,
.okw-chip,
.okw-card-title,
.okw-title {
  word-break: keep-all;     /* avoid breaking words (good for Polish) */
  overflow-wrap: normal;
  hyphens: none;
}

/* avoid wrapping and use ellipsis when content overflows column width */
.okw-table th,
.okw-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* keep chips on single line */
.okw-chip {
  white-space: nowrap;
}

/* smaller text tokens use smaller responsive font */
.ok-widget .muted,
.okw-card .muted,
.okw-table td .muted {
  font-size: var(--okp-small-font);
}

 /* =============== BASE =============== */
.ok-widget {
  font-family: var(--okp-font-family);
  color: var(--okp-color-text);
  background: var(--okp-color-panel);
  border: 1px solid var(--okp-color-border);
  border-radius: var(--okp-radius);
  box-shadow: var(--okp-shadow);
  padding: 16px;
}

/* helpers */
.okw-visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* Muted (bazowo delikatne, potem mniejsze na XS) */
.ok-widget .muted,
.okw-card .muted,
.okw-table td .muted {
  color: var(--okp-color-muted);
  /* slightly larger base for accessibility */
  font-size: 11px;
  line-height: 1.3;
  font-weight: 400;
}

/* make helper notes inside table cells readable on desktop:
   - show them as block content under the main value
   - allow wrapping so the text isn't tiny and clipped
   - ensure wrapping only happens between whole words (no mid-word breaks)
   - increase line-height for legibility
*/
@media (min-width: 1025px) {
  .okw-table td .muted {
    display: block;
    white-space: normal;      /* allow wrapping at spaces */
    word-break: normal;       /* avoid breaking words mid-word */
    overflow-wrap: normal;    /* prefer wrapping at word boundaries */
    overflow: visible;        /* allow the helper text to expand the row height */
    text-overflow: clip;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
    color: var(--okp-color-muted);
  }
}

/* toolbar */
.okw-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.okw-toolbar-left,
.okw-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.okw-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* buttons */
.okw-btn {
  appearance: none;
  border: 1px solid var(--okp-color-border);
  background: var(--okp-color-bg);
  color: var(--okp-color-text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
}
.okw-btn:hover { border-color: var(--okp-color-accent); }
.okw-btn.active,
.okw-btn.primary {
  background: var(--okp-color-accent);
  color: var(--okp-color-accent-contrast);
  border-color: var(--okp-color-accent);
}
.okw-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* pager */
.okw-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.okw-pager-info {
  color: var(--okp-color-muted);
  font-size: var(--okp-small-font);
}
.okw-pager-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.okw-pager-status {
  min-width: 110px;
  text-align: center;
  color: var(--okp-color-muted);
  font-size: var(--okp-small-font);
}

/* „Pokaż więcej" */
.okw-loadmore-wrap {
  display: flex;
}
.okw-loadmore {
  padding: 9px 18px;
  font-weight: 600;
}

/* filters */
.okw-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  margin: 8px 0 16px 0;
}
.okw-filters select,
.okw-filters input {
  width: 100%;
  border: 1px solid var(--okp-color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--okp-color-bg);
  color: var(--okp-color-text);
}
.okw-filters .okw-filter-actions {
  display: flex;
  gap: 8px;
}

/* table */

/* horizontal scroll wrapper for tables on narrow viewports */
.okw-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.okw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--okp-radius);
  border: 1px solid var(--okp-color-border);
}
.okw-table th,
.okw-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--okp-color-border);
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  background: var(--okp-color-bg);
}
.okw-table thead th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.okw-table tbody tr:hover td { background: #f9fafb; }

/* fixed table layout enables ellipsis and prevents layout blowout */
.okw-table {
  table-layout: fixed;
  min-width: 900px; /* fallback width that allows horizontal scroll below this */
}

/* Column-width tuning
   - prioritize first two identifier columns (ID oferty + Numer lokalu)
   - keep compact numeric columns (powierzchnia/ceny/kondygnacje), so identifiers stay readable
   - keep helper notes in price columns visible on desktop
*/
.okw-table th:nth-child(1),
.okw-table td:nth-child(1) { width: 150px; }  /* ID oferty */
.okw-table th:nth-child(2),
.okw-table td:nth-child(2) { width: 220px; }  /* Numer lokalu */
.okw-table th:nth-child(3),
.okw-table td:nth-child(3) { width: 3.5rem; text-align: center; } /* Pokoje (single digit) */
.okw-table th:nth-child(4),
.okw-table td:nth-child(4) { width: 100px; text-align: right; }  /* Powierzchnia */
.okw-table th:nth-child(5),
.okw-table td:nth-child(5) { width: 140px; white-space: normal; } /* Cena/m² */
.okw-table th:nth-child(6),
.okw-table td:nth-child(6) { width: 190px; white-space: normal; } /* Cena całkowita */
.okw-table th:nth-child(7),
.okw-table td:nth-child(7) { width: 104px; } /* Status (chip) */
.okw-table th:nth-child(8),
.okw-table td:nth-child(8) { width: 76px; text-align: center; } /* Kondygnacje */
.okw-table th:nth-child(9),
.okw-table td:nth-child(9) { width: 106px; } /* Data publikacji */

/* Ensure price columns can show the muted helper text (30-day price) on desktop */
@media (min-width: 1025px) {
  .okw-table td:nth-child(5),
  .okw-table td:nth-child(6) {
    overflow: visible; /* allow the helper text to expand beyond the cell */
    white-space: normal; /* let price + helper text wrap to next line */
  }
  .okw-table td:nth-child(5) .muted,
  .okw-table td:nth-child(6) .muted {
    display: block;
    overflow: visible;
  }
}

/* ensure ellipsis actually shows inside cells */
.okw-table th,
.okw-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* allow multi-line, readable headers (wrap at spaces, no letter-by-letter breaks) */
.okw-table thead th {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: normal; /* do NOT break words like "Pokoje" */
  hyphens: manual;
  line-height: 1.3;
  vertical-align: bottom;
}
/* lock "Pokoje" to a single line on desktop to avoid 'pokoj e' split */
.okw-table thead th:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hide long helper notes inside table on medium screens to keep columns readable */
@media (max-width: 1024px) {
  .okw-table td .muted { display: none; }
}

/* status chips */
.okw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.okw-chip.available { background: #dcfce7; color: #166534; }
.okw-chip.reserved  { background: #fffbeb; color: #92400e; }
.okw-chip.sold      { background: #fee2e2; color: #991b1b; }
.okw-chip.promo     { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }

/* cards */
.okw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.okw-card {
  border: 1px solid var(--okp-color-border);
  border-radius: var(--okp-radius);
  background: var(--okp-color-bg);
  padding: 12px;
  box-shadow: var(--okp-shadow);
}
.okw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.okw-card-title {
  font-weight: 600;
  font-size: 15px;
}
.okw-card-grid {
  display: grid;
  grid-template-columns: auto 1fr; /* label auto width, value takes remaining */
  gap: 6px 12px;
  font-size: 13px;
}
.okw-k {
  color: var(--okp-color-muted);
  /* prevent ugly mid-word breaks like "Kondygn acje" on cards */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: manual;
  /* align labels to the right to tighten layout on mobile */
  text-align: right;
  /* avoid overflow while keeping a single line */
  overflow: hidden;
  text-overflow: ellipsis;
}
.okw-v { font-weight: 600; }

/* utilities */
.okw-hide-sold .status-sold { display: none !important; }

/* =============== BREAKPOINTS =============== */

/* ≤ 1024px */
@media (max-width: 1024px) {
  .okw-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .okw-cards   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤ 800px */
@media (max-width: 800px) {
  /* below ~800px prefer cards: hide table and show 2-column cards */
  .okw-table { display: none; }
  .okw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤ 640px */
@media (max-width: 640px) {
  .okw-toolbar { gap: 8px; }
  .okw-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* prefer cards na małych ekranach */
  .okw-table { display: none; }

  .okw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .okw-card-header { flex-direction: column; }

  .okw-card-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .okw-card-grid { font-size: 13px; }
  .okw-k { font-size: 12px; }
  .okw-v { font-size: 13px; }

  .okw-chip {
    white-space: nowrap;
    font-size: 11px;
    padding: 4px 6px;
  }
}

/* ≤ 320px (very small phones) */
@media (max-width: 320px) {
  .okw-cards {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 6px !important;
  }

  .ok-widget { padding: 12px !important; }

  .okw-card {
    padding: 6px !important;
    box-shadow: none !important;
    border-width: 1px !important;
    min-height: 0 !important;
  }

  .okw-card-header { margin-bottom: 6px !important; }

  .okw-card-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .okw-card-grid { gap: 4px 8px !important; font-size: 12px !important; }
  .okw-k { font-size: 11px !important; }
  .okw-v { font-size: 13px !important; }

  /* najmniejsze muted */
  .ok-widget .muted,
  .okw-card .muted,
  .okw-table td .muted {
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
  }

  .okw-chip {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
  }

  .okw-table { display: none !important; }

  .okw-card * { margin: 0; }
  .okw-toolbar { gap: 6px !important; margin-bottom: 8px !important; }
  .okw-btn { padding: 6px 8px !important; font-size: 13px !important; }
}

/* < 1200px: prefer cards (kafle) */
@media (max-width: 1199px) {
  .okw-table { display: none !important; }
  .okw-cards { display: grid !important; }
}

/* >320px mobile/tablet: two cards per row */
@media (min-width: 321px) and (max-width: 1199px) {
  .okw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ≥1200px desktop: force single-word headers (no hyphenation/splitting) and tune widths */
@media (min-width: 1200px) {
  .okw-table thead th {
    white-space: nowrap !important;     /* keep each header as one line */
    word-break: keep-all !important;    /* never split inside words */
    overflow-wrap: normal !important;   /* wrap only between words if needed (but we keep nowrap) */
    hyphens: none !important;           /* Safari: disable automatic hyphenation */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.3;
    padding: 8px 10px;
  }
  /* keep first identifier columns wide enough to show IDs/numbers */
  .okw-table th:nth-child(1),
  .okw-table td:nth-child(1) { width: 150px; }
  .okw-table th:nth-child(2),
  .okw-table td:nth-child(2) { width: 220px; }
  .okw-table td:nth-child(2) { font-size: 13px; }

  /* compact numeric columns to preserve room for identifiers */
  .okw-table th:nth-child(3),
  .okw-table td:nth-child(3) { width: 3.5rem; text-align: center; }
  .okw-table th:nth-child(4),
  .okw-table td:nth-child(4) { width: 100px; }
  .okw-table th:nth-child(5),
  .okw-table td:nth-child(5) { width: 140px; }
  .okw-table th:nth-child(6),
  .okw-table td:nth-child(6) { width: 190px; }
  .okw-table th:nth-child(8),
  .okw-table td:nth-child(8) { width: 76px; text-align: center; }
}

/* ===== Omnibus compliance lock =====
   Ensure that the 30-day price (helper note) remains displayed
   under the main price on desktop, regardless of generic cell rules.
   Do not change this without legal review. */
@media (min-width: 1025px) {
  .okw-table td:nth-child(5),
  .okw-table td:nth-child(6) {
    overflow: visible;
    white-space: normal;
  }
  .okw-table td:nth-child(5) .muted,
  .okw-table td:nth-child(6) .muted {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
}

/* Desktop hard lock:
   Never split words anywhere inside the widget on desktop.
   Prevent hyphenation and mid-word breaks globally. */
@media (min-width: 1200px) {
  .ok-widget,
  .ok-widget * {
    hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* PlugInvVest override: neutral, universal buttons (black/grey) */
.ok-widget .okw-btn {
  border-color: #d1d5db;
  background: #f9fafb;
  color: #111827;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ok-widget .okw-btn:hover {
  border-color: #111827;
}
.ok-widget .okw-btn.active,
.ok-widget .okw-btn.primary {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}