/* Light theme + grid header (no overlap) */
.dh-events-root {
  --ec-bg:#ffffff; --ec-surface:#ffffff; --ec-border:#e5e7eb;
  --ec-text:#111827; --ec-muted:#6b7280; --ec-accent:#2563eb; --ec-accent-ghost:rgba(37,99,235,.12);
  --ec-today:#16a34a; --ec-past:.45; --ec-radius:14px; --ec-shadow:0 8px 22px rgba(0,0,0,.06);
  --ec-shadow-in: inset 0 0 0 1px var(--ec-border);
  color:var(--ec-text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;
}
.dh-events-root .dh-ec-calendar-wrapper{ background:var(--ec-surface); border:1px solid var(--ec-border); border-radius:var(--ec-radius); box-shadow:var(--ec-shadow); overflow:hidden }
/* Header uses CSS Grid so arrows never overlap the month title */
.dh-events-root .dh-ec-calendar-header{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:
  "prev title next"
  "vs vs vs";
  align-items:center; gap:10px; padding:16px; background:#f9fafb; border-bottom:1px solid var(--ec-border);
}
.dh-events-root .dh-ec-prev{ grid-area: prev; }
.dh-events-root .dh-ec-next{ grid-area: next; }
.dh-events-root .dh-ec-month-title{ grid-area: title; justify-self:center; font-weight:800; font-size:18px; line-height:36px; white-space:nowrap }
.dh-events-root .dh-ec-view-switch{ grid-area: vs; justify-self:end; display:flex; gap:8px }
@media (min-width:740px){
  .dh-events-root .dh-ec-calendar-header{
    grid-template-columns:auto 1fr auto auto; grid-template-areas:"prev title next vs";
  }
}
.dh-events-root .dh-ec-nav{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; border-radius:10px; border:1px solid var(--ec-border); background:#fff; cursor:pointer; color:var(--ec-text); transition:transform .12s, background .2s, border-color .2s }
.dh-events-root .dh-ec-nav:hover{ background:var(--ec-accent-ghost); border-color:var(--ec-accent); transform:translateY(-1px) }
.dh-events-root .dh-ec-view-switch .dh-ec-btn{ border:1px solid var(--ec-border); background:#fff; color:var(--ec-text); padding:8px 12px; border-radius:10px; cursor:pointer; transition:all .2s }
.dh-events-root .dh-ec-view-switch .dh-ec-btn:hover{ border-color:var(--ec-accent); background:var(--ec-accent-ghost) }
.dh-events-root .dh-ec-view-switch .dh-ec-btn.active{ border-color:var(--ec-accent); box-shadow:0 0 0 3px var(--ec-accent-ghost) }

/* Grid */
.dh-events-root .dh-ec-calendar-grid{ padding:12px 14px 4px 14px }
.dh-events-root .dh-ec-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px }
.dh-events-root .dh-ec-weekdays div{ text-align:center; font-weight:700; color:var(--ec-muted) }
.dh-events-root .dh-ec-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px }
.dh-events-root .dh-ec-day{ min-height:96px; border-radius:12px; background:#fff; box-shadow:var(--ec-shadow-in); border:1px solid var(--ec-border); padding:8px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s, transform .1s, background .2s }
.dh-events-root .dh-ec-day:hover{ border-color:var(--ec-accent); background:rgba(37,99,235,.04); transform:translateY(-1px) }
.dh-events-root .dh-ec-day.past{ opacity:var(--ec-past) }
.dh-events-root .dh-ec-day.today{ box-shadow:0 0 0 2px var(--ec-today) inset }
.dh-events-root .dh-ec-day .num{ font-weight:800; font-size:14px }
.dh-events-root .dh-ec-day .items{ margin-top:auto; font-size:12px; line-height:1.25 }
.dh-events-root .dh-ec-day .item{ display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dh-events-root .dh-ec-event-dot{ width:8px; height:8px; border-radius:50%; background:var(--ec-accent) }

/* Day Events & List cards */
.dh-events-root .dh-ec-day-events{ padding:12px 16px 18px 16px }
.dh-events-root .dh-ec-day-events h3{ margin:8px 0 10px 0; font-size:20px }
.dh-events-root .dh-ec-card{ display:block; position:relative; border:1px solid var(--ec-border); background:#fff; border-radius:12px; padding:10px; margin-bottom:10px; transition:border-color .2s, background .2s, transform .1s; color:inherit; text-decoration:none; cursor:pointer }
.dh-events-root .dh-ec-card:hover{ border-color:var(--ec-accent); background:rgba(37,99,235,.04); transform:translateY(-1px) }
.dh-events-root .dh-ec-card .meta{ font-size:13px }
.dh-events-root .dh-ec-card img{ width:120px; height:84px; object-fit:cover; border-radius:10px; margin-right:12px; float:left }
.dh-events-root .dh-ec-card::after{ content:''; display:block; clear:both }
.dh-events-root .dh-ec-list-view{ padding:12px 16px 16px 16px }
.dh-events-root .dh-ec-list-filters{ display:flex; gap:8px; align-items:center; margin-bottom:10px }
.dh-events-root .dh-ec-list-filters input[type="date"]{ padding:8px; border-radius:10px; border:1px solid var(--ec-border); background:#fff; color:var(--ec-text) }
.dh-events-root .dh-ec-more-wrap{ padding:12px; text-align:center; border-top:1px solid var(--ec-border) }

/* Single & badges */
.dh-events-root .dh-ec-cover{ width:100%; height:auto; border-radius:12px; display:block }
.dh-events-root .badges .badge{ display:inline-block; font-size:11px; padding:3px 6px; border-radius:999px; background:var(--ec-accent-ghost); color:#1e40af; border:1px solid rgba(37,99,235,.35) }

/* Mobile: show only dots inside calendar cells (hide event titles/ +N) */
@media (max-width: 680px){
  .dh-events-root .dh-ec-days .item .label{ display:none !important; }
  .dh-events-root .dh-ec-days .item.more{ display:none !important; }
  .dh-events-root .dh-ec-day .items{ gap:4px; }
  .dh-events-root .dh-ec-event-dot{ width:6px; height:6px; }
}

/* Responsive tweaks */
@media (max-width: 960px){ .dh-events-root .dh-ec-day{ min-height:86px } }
@media (max-width: 680px){
  .dh-events-root .dh-ec-days{ gap:6px }
  .dh-events-root .dh-ec-day{ min-height:72px; padding:6px }
  .dh-events-root .dh-ec-card img{ width:100%; height:160px; float:none; margin:0 0 8px 0 }
}