.wh-calendar-wrap{width:100%;max-width:1100px;margin:0 auto;background:rgba(10,10,10,.94);color:#fff;padding:20px;border:1px solid #333;border-radius:14px;box-sizing:border-box}
.wh-cal-toolbar{display:grid;grid-template-columns:48px 1fr 48px;gap:12px;align-items:center;margin-bottom:12px}
.wh-cal-title{text-align:center;font-size:clamp(22px,3vw,32px);font-weight:700}
.wh-nav{width:48px;height:44px;background:var(--wh-club);color:#fff;border:0;border-radius:8px;font-size:30px;line-height:1;cursor:pointer}
.wh-cal-actions{display:flex;justify-content:flex-end;margin-bottom:14px}
.wh-primary,.wh-secondary{border:0;border-radius:8px;padding:11px 16px;font-weight:700;cursor:pointer}
.wh-primary{background:var(--wh-club);color:#fff}
.wh-secondary{background:#333;color:#fff}
.wh-weeknames,.wh-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.wh-weeknames div{text-align:center;font-weight:700;padding:8px 4px;color:#ddd}
.wh-day{min-width:0;min-height:100px;background:var(--wh-day);border:1px solid var(--wh-border);border-radius:8px;padding:8px;box-sizing:border-box}
.wh-day.empty{background:transparent;border:0}
.wh-day.today{box-shadow:inset 0 0 0 2px var(--wh-club)}
.wh-day-num{font-weight:800;font-size:15px;margin-bottom:5px}
.wh-event{display:block;color:#fff;text-decoration:none;padding:5px 6px;margin:4px 0;border-radius:5px;font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-cat-club{background:var(--wh-club)}.wh-cat-party{background:var(--wh-party)}.wh-cat-ride{background:var(--wh-ride)}.wh-cat-other{background:var(--wh-other)}
.wh-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;color:#ddd;font-size:13px}
.wh-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.wh-login-required{background:#111;color:#fff;padding:18px;border-radius:10px}
.wh-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.wh-modal[hidden]{display:none}
.wh-dialog{width:min(620px,100%);max-height:92vh;overflow:auto;background:#151515;color:#fff;border:1px solid #333;border-radius:14px;padding:22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.65)}
.wh-dialog h3{margin:0 0 18px;font-size:26px}
.wh-close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:#fff;font-size:32px;cursor:pointer}
.wh-dialog label{display:block;font-weight:700;margin:12px 0}
.wh-dialog input,.wh-dialog select,.wh-dialog textarea{display:block;width:100%;box-sizing:border-box;background:#222;color:#fff;border:1px solid #555;border-radius:7px;padding:11px;margin-top:6px;font:inherit}
.wh-dialog input::placeholder,.wh-dialog textarea::placeholder{color:#aaa}
.wh-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wh-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.wh-form-status{min-height:20px;color:#ff7777}
.wh-upcoming{background:rgba(10,10,10,.94);border:1px solid #333;border-radius:12px;padding:16px;color:#fff}
.wh-upcoming-title{font-size:24px;font-weight:800;margin-bottom:12px}
.wh-up-item{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-top:1px solid #333}
.wh-up-date{font-weight:800;color:#fff}.wh-up-main{display:flex;flex-direction:column;gap:3px}.wh-up-main strong{font-size:16px}.wh-up-main span{font-size:13px;color:#bbb}
.wh-empty{color:#aaa;padding:10px 0}
@media (max-width:700px){
 .wh-calendar-wrap{padding:12px;border-radius:10px}
 .wh-cal-toolbar{grid-template-columns:42px 1fr 42px}.wh-nav{width:42px;height:40px}
 .wh-cal-actions{justify-content:stretch}.wh-primary{width:100%}
 .wh-weeknames,.wh-days{gap:4px}
 .wh-day{min-height:74px;padding:5px;border-radius:6px}
 .wh-day-num{font-size:13px}.wh-event{font-size:10px;padding:4px}
 .wh-legend{gap:8px;font-size:11px}
 .wh-two{grid-template-columns:1fr}
}

.wh-event{width:100%;border:0;cursor:pointer;text-align:left;font:inherit}
.wh-delete{background:#4a0000;color:#fff;border:1px solid #8b0000;border-radius:8px;padding:11px 16px;font-weight:700;cursor:pointer}

/* Mobile modal: use the whole viewport for the form instead of a nested scroll box */
/* Prevent the page/footer behind the popup from taking part in scrolling */
body.whcal-modal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
}

@media (max-width:700px){
  .wh-modal{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10px;
    overscroll-behavior:none;
  }

  .wh-dialog{
    width:100%;
    max-width:620px;
    height:calc(100dvh - 20px);
    max-height:calc(100dvh - 20px);
    min-height:0;
    margin:0 auto;
    box-sizing:border-box;
    padding:18px 16px 0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .wh-dialog form{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:0;
  }

  .wh-actions{
    position:sticky;
    left:auto;
    right:auto;
    bottom:0;
    margin:12px 0 0;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    background:#151515;
    border-top:1px solid #333;
    z-index:6;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    box-sizing:border-box;
  }

  .wh-actions .wh-primary,
  .wh-actions .wh-secondary,
  .wh-actions .wh-delete{
    min-height:44px;
    flex:0 1 auto;
  }
}

.wh-upcoming{max-width:700px}
.wh-up-item{align-items:center}
.wh-up-date{white-space:nowrap}
@media(max-width:480px){.wh-up-item{grid-template-columns:62px 1fr}.wh-upcoming-title{font-size:21px}.wh-up-main strong{font-size:15px}}

/* Upcoming list: keep date and event details in separate columns */
.wh-up-item{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:13px 0;
}
.wh-up-date{
  min-width:0;
  white-space:nowrap;
}
.wh-up-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.wh-up-main strong{
  line-height:1.25;
}
.wh-up-main span{
  line-height:1.25;
}
@media(max-width:480px){
  .wh-up-item{grid-template-columns:82px minmax(0,1fr);gap:10px}
  .wh-up-date{font-size:13px}
}