/* /public/assets/css/event.css */
/* Force white page background for event page (override base.twig dark theme) */
html, body { background: #ffffff !important; color: #111827 !important; }

/* White theme base */
.qmk-event { max-width: 1100px; margin: 0 auto; padding: 18px 14px 42px; color: #111827; }
.qmk-event-hero { padding: 8px 2px 18px; }

.qmk-event-hero__top { margin-bottom: 10px; }
.qmk-backbtn { text-decoration: none; }

.qmk-event-hero__title { display: flex; gap: 14px; align-items: flex-start; }

/* Flag image in title */
.qmk-event-flagimg{
  width: 42px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: inline-block;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  margin-top: 2px;
}

.qmk-event-head { flex: 1; min-width: 0; }
.qmk-event-kicker { display: flex; gap: 10px; align-items: center; opacity: .95; }
.qmk-dot { opacity: .5; }

.qmk-event-h1 { margin: 6px 0 10px; font-size: 22px; line-height: 1.25; }
.qmk-muted { opacity: .75; color: #4b5563; }

.qmk-event-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 13px;
  color: #111827;
}

.qmk-event-grid { display: grid; gap: 12px; }
@media (min-width: 980px){
  .qmk-event-grid { grid-template-columns: 1fr 1fr; }
  .card--full { grid-column: 1 / -1; }
}

.card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.card__title { margin: 0; font-size: 16px; color: #111827; }

.kv { display: grid; gap: 8px; }
.kv__row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: start; }
.kv__k { opacity: .75; font-size: 13px; color: #374151; }
.kv__v { font-size: 14px; color: #111827; word-break: break-word; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: #111827; text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: rgba(0,0,0,.06); }

.statsgrid { display: grid; gap: 10px; }
@media (min-width: 980px){ .statsgrid { grid-template-columns: 1fr 1fr; } }
.stat {
  padding: 12px; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}
.stat__k { opacity: .75; font-size: 13px; color: #374151; }
.stat__v { font-size: 22px; margin-top: 6px; color: #111827; }
.stat__s { opacity: .75; font-size: 12px; margin-top: 4px; color: #4b5563; }

/* Country (24h) flag + name */
.stat__countryline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 8px;
}
.stat__flag{
  width: 26px;
  height: 18px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
.stat__countryname{
  font-size: 13px;
  opacity: .95;
  color: #111827;
}

.toprow{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: #111827;
}
.toprow a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.toprow a:hover{ border-bottom-color: rgba(0,0,0,.35); }

.hgrid { display: grid; gap: 12px; margin-top: 12px; }
.hcard { padding: 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.02); }
.hcard--full { grid-column: 1 / -1; }
.hcard__k { opacity: .95; font-size: 14px; margin-bottom: 10px; color: #111827; }

/* Recent header row */
.recenthead{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #6b7280;
}

.recent { display: grid; gap: 8px; }
.recent a,
.recent .recent__row{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #ffffff;
  color: inherit; text-decoration: none;
}
.recent a:hover { background: rgba(0,0,0,.02); }
.recent .m { opacity: .95; color: #111827; }
.recent .p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; }
.recent .meta { opacity: .8; font-size: 12px; white-space: nowrap; color: #4b5563; }

.recent-empty { color:#6b7280; font-size: 13px; }

.share__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share__status { opacity: .8; font-size: 13px; color: #4b5563; }

/* Leaflet rendering fix */
.qmk-evmap { min-height: 260px; }
.qmk-evmap .leaflet-container { height: 100%; width: 100%; }

/* History spacing */
.qmk-historydesc{
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}
.qmk-historyactions{
  margin-top: 16px; /* ✅ more space from text */
}

/* ✅ Mobile details: label on top, value below, value larger */
@media (max-width: 640px){
  .kv__row{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 10px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: rgba(0,0,0,.015);
  }
  .kv__k{
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7280;
    opacity: 1;
  }
  .kv__v{
    font-size: 16px;      /* ✅ value stands out */
    font-weight: 700;
    color: #111827;
  }
}