/* static/gmp.css - card UI, badges, responsive, lazy */

/* wrapper */
#gmp-wrapper { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222; }
.container { padding: 16px; max-width: 900px; margin: auto; }

/* Controls / sticky filters */
.sticky-filters {
  display:flex;
  gap:8px;
  margin-bottom:8px;
  position: sticky;
  top: 64px;
  background: #fff;
  padding: 8px 0;
  z-index: 20;
}
.filter-btn {
  border: 1px solid #e6e6e6;
  background: #fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}
.filter-btn.active { background:#0d1117; color:#fff; border-color:#0d1117; }

/* meta line */
.gmp-meta-line { display:flex; justify-content:space-between; margin-bottom:8px; font-size:13px; color:#555; }

/* Card basics */
.ipo-card {
  border: 1px solid #eee;
  border-radius:10px;
  padding:12px;
  margin-bottom:10px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  transition: box-shadow .12s ease, transform .06s ease;
}
.ipo-card:hover { box-shadow: 0 6px 18px rgba(13,17,23,0.06); transform: translateY(-2px); }

/* 4-column grid layout for card summary */
.card-grid {
  display:grid;
  grid-template-columns: 1fr auto minmax(140px,200px) auto;
  gap:12px;
  align-items:center;
}

/* Name + GMP */
.col-name .ipo-title { font-weight:700; font-size:16px; color:#111; margin-bottom:6px; }
.gmp-row { display:flex; gap:8px; align-items:center; }
.gmp-label { font-size:11px; color:#333; font-weight:700; text-transform:uppercase; }
.gmp-value { font-size:15px; font-weight:800; color:#111; }

/* Status column */
.col-status { text-align:center; }

/* Date column (front only) */
.meta-item-inline { display:flex; gap:6px; align-items:center; }
.meta-item-inline .meta-label { font-size:11px; color:#666; font-weight:700; text-transform:uppercase; }
.meta-item-inline .meta-value { font-size:14px; font-weight:700; color:#111; }

/* Link column */
.col-link { text-align:right; }
.ipo-link {
  display:inline-block;
  padding:8px 10px;
  background:#0d1117;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
}

/* Hidden details (Kostak / Subject / Type) shown on expand */
.card-row-details { margin-top:10px; display:none; color:#333; font-size:14px; }
.ipo-card.expanded .card-row-details { display:block; }

/* badges */
.badge {
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; color:#fff; font-weight:700;
}
.badge.active { background:#0b8043; }
.badge.upcoming { background:#f39c12; color:#111; }
.badge.closed { background:#c0392b; }

/* GMP color classes */
.gmp-value.gmp-up { color:#0a8a3f; }
.gmp-value.gmp-down { color:#c62828; }
.gmp-value.gmp-neutral { color:#333; }

/* hidden-by-lazy used to hide cards beyond batch */
.hidden-by-lazy { display:none !important; }

/* Load more button */
.load-more-btn {
  background:#0d1117; color:#fff; padding:10px 16px; border-radius:8px; border:none; cursor:pointer;
}

/* Accessibility: touch targets */
.ipo-card, .filter-btn, .load-more-btn { touch-action: manipulation; }

/* Responsive: stack columns on small screens */
@media (max-width:720px) {
  .card-grid {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
  }
  .col-name { grid-column: 1 / span 2; }
  .col-status { grid-column: 2 / 3; grid-row: 1 / 2; justify-self:end; }
  .col-meta { grid-column: 1 / span 2; grid-row: 2 / 3; display:flex; gap:12px; }
  .col-link { grid-column: 2 / 3; grid-row: 2 / 3; justify-self:end; align-self:center; }
}

/* small-screen tweaks */
@media (max-width:600px){
  .col-name .ipo-title { font-size:15px; }
  .meta-item-inline .meta-value { font-size:13px; }
  .meta-item-inline .meta-label { font-size:10px; }
  .sticky-filters { top:56px; padding:6px 0; overflow-x:auto; }
}