:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:rgba(0,0,0,.08);
  --muted:rgba(0,0,0,.55);
  --shadow: 0 12px 28px rgba(0,0,0,.10);
  --radius: 18px;

  /* iOS-ish pills */
  --pill-border: rgba(17,24,39,.12);
  --pill-shadow: 0 10px 22px rgba(17,24,39,.10);
}

body{ background: var(--bg); }
.navbar{ box-shadow: 0 10px 25px rgba(0,0,0,.12); }

.page-hero{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,0));
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.card-hover{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--card);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(13,110,253,.25);
}

.muted-hint{ color: var(--muted); }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.modal-content{ border-radius: var(--radius); }

/* ==============================
   iOS-ish PILL BUTTONS / BADGES
   ============================== */
.btn-pill{ border-radius: 999px !important; }
.btn.btn-pill{
  box-shadow: 0 10px 18px rgba(17,24,39,.10);
}
.btn-primary.btn-pill{
  border: 0 !important;
  background-image: linear-gradient(180deg, rgba(13,110,253,1), rgba(13,110,253,.85));
}
.btn-outline-secondary.btn-pill,
.btn-outline-light.btn-pill,
.btn-outline-danger.btn-pill{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 18px rgba(17,24,39,.08);
}
.btn-outline-secondary.btn-pill{
  border-color: rgba(17,24,39,.15);
}

/* Base soft badge */
.badge-soft{
  border: 1px solid var(--pill-border) !important;
  border-radius: 999px !important;
  padding: .38rem .62rem !important;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 10px 18px rgba(17,24,39,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Status pills (global) */
.badge-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
}
.badge-status .dot{
  width:8px;height:8px;border-radius:999px;
  background: currentColor;
  opacity:.9;
}

/* Signed/Accepted -> green */
.badge-signed{
  color: #0f5132 !important;
  background: linear-gradient(180deg, rgba(25,135,84,.20), rgba(25,135,84,.10)) !important;
  border-color: rgba(25,135,84,.28) !important;
}

/* Pending -> blue */
.badge-pending{
  color: #084298 !important;
  background: linear-gradient(180deg, rgba(13,110,253,.20), rgba(13,110,253,.10)) !important;
  border-color: rgba(13,110,253,.28) !important;
}

/* Cancelled/Rejected -> gray */
.badge-cancelled{
  color: rgba(17,24,39,.70) !important;
  background: linear-gradient(180deg, rgba(108,117,125,.18), rgba(108,117,125,.10)) !important;
  border-color: rgba(108,117,125,.25) !important;
}

/* ==============================
   EVENT CARD
   ============================== */
.event-card{
  position: relative;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(17,24,39,.08);

  display:flex;
  flex-direction: column;
  min-height: 100%;
}

/* FULL CARD PHOTO BACKGROUND */
.event-card.has-photo{
  background: #111827;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* dark overlay behind content */
.event-card.has-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.52) 58%,
    rgba(0,0,0,.45) 100%
  );
  z-index: 0;
  pointer-events:none;
}

/* ensure card content above overlay */
.event-card > *{
  position: relative;
  z-index: 1;
}

/* header */
.event-hero{
  position: relative;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

/* header when no photo */
.event-hero.no-img{
  background: linear-gradient(135deg, var(--c1, #eef2ff), var(--c2, #f8fafc));
}

/* header on photo: make it TALLER so photo more visible */
.event-hero.on-photo{
  background: transparent;
  min-height: clamp(120px, 18vw, 150px);
  padding-top: 18px;
  padding-bottom: 18px;
}

/* DO NOT create overlays that can wash out content */
.event-hero::before,
.event-hero::after{
  content: none !important;
  display: none !important;
}

.event-hero .hero-inner{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  justify-content:space-between;
}

/* left group */
.event-left{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  min-width:0;
}

/* icon circle */
.event-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 8px 16px rgba(17,24,39,.12);
  flex: 0 0 auto;
}
.event-icon svg{
  width: 22px;
  height: 22px;
  color: rgba(17,24,39,.82);
}

/* logo circle */
.event-logo{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(255,255,255,.70);
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
}
.event-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.event-badges{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.event-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.15;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-subtitle{
  margin-top: 2px;
  color: rgba(17,24,39,.68);
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-activity{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.65);
}

/* title/subtitle when has photo */
.event-card.has-photo .event-title,
.event-card.has-photo .event-subtitle,
.event-card.has-photo .event-activity{
  color: #fff;
  text-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.event-card.has-photo .event-activity{ opacity: .92; }

/* divider */
.event-divider{
  height: 1px;
  background: rgba(17,24,39,.06);
}

/* body */
.event-body{
  padding: 14px;
  background: #fff;
  flex: 1;
}

/* body on photo -> glass */
.event-card.has-photo .event-body{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.event-meta.small .rowline{
  display:grid;
  grid-template-columns: 118px 1fr;
  align-items:center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(17,24,39,.10);
}
.event-meta.small .rowline:last-child{ border-bottom:0; }
.event-meta.small .k{
  color: rgba(17,24,39,.55);
  white-space: nowrap;
}
.event-meta.small .v{
  color: rgba(17,24,39,.85);
  font-weight: 900;
  text-align: right;
}

.event-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: wrap;
}
.event-actions .btn-signup{
  padding-left: 16px;
  padding-right: 16px;
}
.event-actions .btn-detail{
  padding: 6px 12px;
  font-size: 12px;
}

/* highlight card after returning from detail */
.card-focus{
  outline: 3px solid rgba(13,110,253,.35);
  box-shadow: 0 0 0 6px rgba(13,110,253,.12), var(--shadow);
  transition: box-shadow .2s ease, outline .2s ease;
}
.event-letter{
  font-weight: 900;
  font-size: 16px;
  color: rgba(17,24,39,.8);
}