/* assets/css/my.css — "Moje ogłoszenia" w stylu całej strony (light/dark) */
:root{
  /* Korzystamy z tokenów globalnych, ale mamy bezpieczne fallbacki */
  --my-surface:      var(--surface, #ffffff);
  --my-elev:         var(--elev, #f8fafc);
  --my-border:       var(--border, #e5e7eb);
  --my-text:         var(--text, #0b1220);
  --my-muted:        var(--muted-text, #64748b);
  --my-chip-bg:      var(--chip-bg, #f1f5f9);
  --my-chip-text:    var(--chip-text, #0b1220);
  --my-shadow:       var(--shadow-lg, 0 12px 28px rgba(2,6,12,.12));
  --my-thumb-bg:     var(--thumb-bg, #0f1318);
  --my-accent:       var(--accent, #0ea5e9);
  --my-ok:           var(--ok, #10b981);
  --my-warn:         var(--warn, #f59e0b);
  --my-danger:       var(--danger, #ef4444);
  --my-gold:         #f6c049;
}

:root[data-theme="dark"]{
  --my-surface:   var(--surface, #0c1118);
  --my-elev:      var(--elev, #0f1520);
  --my-border:    var(--border, #1f2a40);
  --my-text:      var(--text, #e6edf3);
  --my-muted:     var(--muted-text, #9fb2c7);
  --my-chip-bg:   var(--chip-bg, #142033);
  --my-chip-text: var(--chip-text, #cdd8ee);
  --my-shadow:    0 10px 28px rgba(0,0,0,.38);
  --my-thumb-bg:  #0f1318;
}

/* Lista kart */
/* Lista kart – 2 kolumny na desktopie */
#myList{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}


/* Karta */
.my-card{
  display:grid;
  grid-template-columns: 280px 1fr;  /* było ~160px */
  gap:16px;
  background:var(--my-surface);
  border:1px solid var(--my-border);
  border-radius:16px;
  padding:16px;                       /* lekko większy padding */
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.my-card:hover{ transform:translateY(-2px); box-shadow:var(--my-shadow); }
.my-card:focus-within{ outline:2px solid color-mix(in oklab, var(--my-accent) 35%, transparent); outline-offset:2px; }

/* Wyróżnione — złota ramka jak na listingu */
/* Wyróżnione — taki sam look jak index/search/favorites */
.my-card[data-featured="1"]{
  position:relative;
  border:2px solid #f5c518 !important;
  border-radius:15px;
  box-shadow:0 0 20px rgba(245,197,24,.28);
}

.my-card[data-expired="1"]{
  opacity:.85;
}

/* Media */
.my-media{ overflow:hidden; border-radius:12px; background:var(--my-thumb-bg); }
.my-media .thumb{
  width:100%;
  height:100%;
  aspect-ratio: 3/2;                  /* trochę szerszy kadr */
  object-fit:cover;
  display:block;
}

/* Treść */
.my-body{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.topline{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.title{ margin:0; font-size:18px; font-weight:800; line-height:1.15; color:var(--my-text); }
.title a{ color:inherit; text-decoration:none; }
.title a:hover{ text-decoration:underline; }

/* Chipy – używamy globalnej .chip, ale subtelnie dostosowujemy w obrębie listy */
#myList .chip{
  background:var(--my-chip-bg);
  color:var(--my-chip-text);
  border:1px solid var(--my-border);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  white-space:nowrap;
}
#myList .chip.ok{ background: color-mix(in oklab, var(--my-ok) 20%, var(--my-chip-bg)); border-color: color-mix(in oklab, var(--my-ok) 40%, var(--my-border)); color:var(--my-chip-text); }
#myList .chip.warn{ background: color-mix(in oklab, var(--my-warn) 18%, var(--my-chip-bg)); border-color: color-mix(in oklab, var(--my-warn) 35%, var(--my-border)); }
#myList .chip.id-chip{ opacity:.8; }

/* Statystyki i przyciski */
.badges, .stats, .btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
.stats{ margin-top:2px; }
.btn-row{ margin-top:auto; }

/* Pager */
#pager{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.pager-btn{
  background:var(--my-elev);
  border:1px solid var(--my-border);
  color:var(--my-text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}
.pager-btn.active{ background: color-mix(in oklab, var(--my-accent) 10%, var(--my-elev)); border-color: color-mix(in oklab, var(--my-accent) 35%, var(--my-border)); }

/* Drobiazgi */
.muted{ color:var(--my-muted); }
.ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 1100px){
  #myList{ grid-template-columns: 1fr; }
  .my-card{ grid-template-columns: 1fr; }   /* obraz nad treścią */
  .my-media .thumb{ aspect-ratio: 16/10; }
}