/* ════════════════════════════════════════════════════════════
   Order listing screen (/zlecenia)
   Page-specific styles only — nav, footer, buttons and the shared
   design tokens come from main.css. Ported from the analiza mockup
   (zlecenia-listing-final.html), adapted to the real data model:
   no per-card location / offer-count, no filter sidebar.
   ════════════════════════════════════════════════════════════ */

:root {
  --dark:#111827; --mid:#374151; --gray:#6B7280; --gray-light:#9CA3AF;
  --border:#E5E7EB; --bg:#F5F7FA; --surface:#FFFFFF;
}

/* ══ PAGE HEADER BAR ══ */
.search-header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 28px; }
.search-header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.header-count { font-size:13px; color:var(--gray-light); }
.breadcrumb { display:flex; align-items:center; gap:7px; }
.breadcrumb a { font-size:13px; color:var(--gray); text-decoration:none; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb span { font-size:13px; color:var(--gray-light); }
.breadcrumb .crumb-active { color:var(--dark); font-weight:600; }

/* ══ PAGE LAYOUT ══ */
.page-wrap { max-width:1200px; margin:0 auto; padding:20px 28px 80px; }

/* ══ CATEGORY NAV BAR ══ */
.cat-nav { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:68px; z-index:150; }
.cat-nav-inner { max-width:1200px; margin:0 auto; padding:10px 28px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.cat-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; border:1.5px solid var(--border); background:transparent; font-size:13px; font-weight:600; color:var(--gray); cursor:pointer; white-space:nowrap; transition:all .15s; font-family:inherit; flex-shrink:0; line-height:1; text-decoration:none; }
.cat-pill:hover  { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.cat-pill.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.cp-emoji { font-size:15px; }
.cp-count { font-size:10px; font-weight:700; background:rgba(0,0,0,.09); padding:1px 6px; border-radius:20px; line-height:1.6; }
.cat-pill.active .cp-count { background:rgba(255,255,255,.25); }

/* ══ RESULTS AREA ══ */
.results-area { display:flex; flex-direction:column; gap:16px; }

/* Top bar */
.results-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.results-title { font-size:21px; font-weight:900; letter-spacing:-.03em; }
.results-title span { font-weight:400; color:var(--gray); font-size:16px; margin-left:6px; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.sort-wrap { display:flex; align-items:center; gap:7px; }
.sort-label { font-size:13px; color:var(--gray); white-space:nowrap; }
.sort-select { border:1.5px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; font-family:inherit; color:var(--dark); background:var(--surface); cursor:pointer; outline:none; appearance:none; padding-right:28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; transition:border-color .2s; }
.sort-select:focus { border-color:var(--orange); }
.view-toggle { display:flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; }
.view-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:transparent; border:none; color:var(--gray-light); transition:all .15s; }
.view-btn.active { background:var(--orange); color:white; }
.view-btn svg { width:15px; height:15px; }

/* Active filter chips */
.active-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.active-filters-label { font-size:12px; font-weight:600; color:var(--gray); white-space:nowrap; }
.filt-chip { display:inline-flex; align-items:center; gap:5px; background:var(--orange-pale); color:var(--orange); border:1px solid #FFCBAD; border-radius:20px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none; }
.filt-chip:hover { background:#FFE5D5; }
.filt-chip .chip-x { font-size:14px; line-height:1; font-weight:400; }

/* ══ CARD GRID ══ */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.cards-list { display:flex; flex-direction:column; gap:6px; }
.cards-grid[hidden], .cards-list[hidden] { display:none; }

/* ── Grid card ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:box-shadow .2s,border-color .2s,transform .2s; cursor:pointer; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.card:hover { box-shadow:0 6px 20px rgba(0,0,0,.08); border-color:#D1D5DB; transform:translateY(-2px); }
/* Top accent bar — 3px category colour */
.card-accent { height:3px; width:100%; flex-shrink:0; }
.card-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:8px; }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.card-cat-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.card-title { font-size:14px; font-weight:700; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--dark); }
.card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px; }
.card-meta-item { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray); }
.card-meta-item svg { width:12px; height:12px; flex-shrink:0; }
.card-footer { padding:11px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-price { font-size:14px; font-weight:700; color:var(--orange); }
.card-price-label { font-size:10px; color:var(--gray-light); margin-bottom:2px; }
.card-cta-link { font-size:12px; font-weight:700; color:var(--orange); text-decoration:none; }
.card-cta-link:hover { text-decoration:underline; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.badge-green  { background:#DCFCE7; color:#15803D; }
.badge-orange { background:var(--orange-pale); color:var(--orange); }
.badge-red    { background:#FEE2E2; color:#DC2626; }
.badge-blue   { background:#EFF6FF; color:#1D4ED8; }
.badge-dot    { width:5px; height:5px; border-radius:50%; background:currentColor; }

/* ── Empty state ── */
.cards-empty { padding:48px 24px; text-align:center; color:var(--gray); font-size:14px; background:var(--surface); border:1px dashed var(--border); border-radius:16px; }

/* ── Load more ── */
.load-more-row { display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:8px; }
.load-more-info { font-size:13px; color:var(--gray); }
.progress-bar { width:200px; height:4px; background:var(--border); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#FF6B2B,#FF3200); border-radius:4px; }

/* ══ LIST VIEW — dedicated compact row (.oi) ══ */
.oi { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; transition:box-shadow .15s,border-color .15s; text-decoration:none; color:inherit; }
.oi:hover { box-shadow:0 2px 10px rgba(0,0,0,.07); border-color:#D1D5DB; }
.oi-bar { width:3px; flex-shrink:0; }
.oi-body { flex:1; padding:12px 16px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.oi-r1 { display:flex; align-items:baseline; gap:16px; }
.oi-title { flex:1; font-size:14px; font-weight:600; color:var(--dark); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.oi-price { width:140px; text-align:right; font-size:14px; font-weight:600; color:var(--dark); flex-shrink:0; letter-spacing:-.01em; }
/* One uniform gap between items; fixed category width so every row's meta lines up. */
.oi-r2 { display:flex; align-items:center; gap:8px; }
.oi-cat { width:160px; overflow:hidden; white-space:nowrap; font-size:12px; font-weight:600; flex-shrink:0; display:inline-flex; align-items:center; gap:5px; }
.oi-dot { color:var(--border); flex-shrink:0; }
.oi-mi { font-size:12px; color:var(--gray); display:flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; }
.oi-mi svg { width:12px; height:12px; flex-shrink:0; }
.oi-gap { flex:1; min-width:12px; }
.oi-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; flex-shrink:0; }
.oi-bdot { width:4px; height:4px; border-radius:50%; background:currentColor; flex-shrink:0; }
.oi-badge.green { background:#DCFCE7; color:#15803D; }
.oi-badge.red   { background:#FEE2E2; color:#DC2626; }
.oi-cta { font-size:13px; color:var(--orange); flex-shrink:0; font-weight:600; }
@media(max-width:540px){
  .oi-r1 { gap:10px; }
  .oi-price { font-size:13px; }
  .oi-gap { display:none; }
}

/* ══════════ RWD ══════════ */
@media (max-width:1100px) {
  .page-wrap { padding:20px 20px 80px; }
  .cat-nav-inner { padding:10px 20px; }
}
@media (max-width:767px) {
  .cat-nav { position:static; }
  .cat-nav-inner { padding:8px 16px; gap:6px; }
  .cat-pill { padding:5px 11px; font-size:12px; gap:5px; }
  .cp-emoji { font-size:13px; }
  .search-header { padding:12px 16px; }
  .page-wrap { padding:16px 16px 72px; }
  .results-topbar { flex-direction:column; align-items:flex-start; gap:12px; }
  .topbar-right { width:100%; justify-content:space-between; }
  .cards-grid { grid-template-columns:1fr; }
}
@media (max-width:479px) {
  .cat-pill { padding:5px 10px; }
  .cat-pill .cp-count { display:none; }
}