/* ═══════════════════════════════════════════════════════════════════
   events.css  –  Bates PM  Family Events / Calendar Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Event type colours ─────────────────────────────────────────── */
:root {
  --ev-allowance  : #1D9E75;
  --ev-birthday   : #E24B4A;
  --ev-interest   : #534AB7;
  --ev-chore      : #E09420;
  --ev-meal       : #0c6e8f;
  --ev-shopping   : #185FA5;
  --ev-savings    : #1D9E75;
  --ev-manual     : #6b6b66;
  --ev-ical       : #854F0B;
  --ev-anniversary: #B5297A;
  --ev-other      : #5a6a7a;
}

/* ── Week navigator ─────────────────────────────────────────────── */
.ev-week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.ev-week-lbl{font-size:15px;font-weight:600;flex:1;text-align:center;}
/* When the label is a <button> it becomes tappable for month/year jump */
.ev-lbl-btn{
  background:none;border:none;cursor:pointer;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  padding:4px 8px;
  border-radius:var(--rad);
  transition:background .12s;
}
.ev-lbl-btn:hover,.ev-lbl-btn:active{ background:var(--card2); }
.ev-week-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:4px 12px;color:var(--ch-accent,var(--text2));line-height:1;}
.ev-week-btn:active{opacity:.6;}
.ev-today-btn{font-size:12px;font-weight:600;color:var(--ch-accent,var(--green));background:none;border:1px solid var(--ch-accent,var(--green));border-radius:20px;padding:4px 12px;cursor:pointer;}

/* ── Day columns — clear grid with separators ───────────────────── */
/* Outer scroll wrapper so the 7-column grid never causes horizontal
   overflow on a narrow phone screen.  The grid itself has a min-width
   so each column stays readable; the wrapper clips and scrolls.       */
.ev-week-grid-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:8px;
  /* Prevent the inner border-radius from being clipped by the wrapper */
  border-radius:var(--radl);
}
.ev-week-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(44px,1fr));
  min-width:308px; /* 7 × 44px — readable minimum */
  gap:0;
  border:1px solid var(--blight);
  border-radius:var(--radl);
  overflow:hidden;
  background:var(--blight);
  width:100%;
}
.ev-day-col{
  display:flex;
  flex-direction:column;
  background:var(--card);
  min-height:80px;
  padding:4px 3px 6px;
}
.ev-day-col + .ev-day-col{ border-left:1px solid var(--blight); }
.ev-day-hdr{
  text-align:center;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text2);
  padding-bottom:3px;
}
.ev-day-hdr.today{color:var(--ch-accent,var(--green));}
.ev-day-num{
  text-align:center;
  font-size:14px;
  font-weight:600;
  width:24px;
  height:24px;
  line-height:24px;
  border-radius:50%;
  margin:0 auto 5px;
}
.ev-day-num.today{
  background:var(--ch-accent,var(--green));
  color:#fff;
}
.ev-day-col.today-col{background:var(--card2);}

/* ── Event tiles ────────────────────────────────────────────────── */
.ev-tile{
  border-radius:3px;
  padding:2px 4px;
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#fff;
  margin-bottom:2px;
  -webkit-tap-highlight-color:transparent;
  line-height:1.4;
}
.ev-tile:active{filter:brightness(0.88);}
.ev-tile-icon{margin-right:1px;}
.ev-tile.type-allowance {background:var(--ev-allowance);}
.ev-tile.type-birthday  {background:var(--ev-birthday);}
.ev-tile.type-interest  {background:var(--ev-interest);}
.ev-tile.type-chore     {background:var(--ev-chore);}
.ev-tile.type-meal      {background:var(--ev-meal);}
.ev-tile.type-shopping  {background:var(--ev-shopping);}
.ev-tile.type-savings   {background:var(--ev-savings);}
.ev-tile.type-manual    {background:var(--ev-manual);}
.ev-tile.type-ical      {background:var(--ev-ical);}
.ev-tile.type-anniversary{background:var(--ev-anniversary);}
.ev-tile.type-other      {background:var(--ev-other);}
/* Time-of-day indicator — left border shade */
.ev-tile.morning   {border-left:2px solid rgba(255,255,255,0.55);}
.ev-tile.afternoon {border-left:2px solid rgba(0,0,0,0.18);}
.ev-tile.evening   {border-left:2px solid rgba(0,0,0,0.32);}

/* ── Legend / colour key ────────────────────────────────────────── */
.ev-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-bottom:14px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--blight);
  border-radius:var(--rad);
}
.ev-legend-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--text2);
  font-weight:500;
}
.ev-legend-dot{
  width:10px;
  height:10px;
  border-radius:2px;
  flex-shrink:0;
}

/* ── Coming up (child dashboard) ───────────────────────────────── */
.ev-coming-up{margin-bottom:16px;}
.ev-coming-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--blight);border-radius:var(--radl);margin-bottom:8px;box-shadow:var(--shad);cursor:pointer;}
.ev-coming-card:active{background:var(--card2);}
.ev-coming-icon{font-size:28px;flex-shrink:0;}
.ev-coming-body{flex:1;min-width:0;}
.ev-coming-title{font-size:15px;font-weight:600;}
.ev-coming-days{font-size:12px;color:var(--text2);margin-top:2px;}
.ev-coming-days.soon{color:var(--ch-accent,var(--green));font-weight:600;}
.ev-reaction-row{display:flex;gap:8px;margin-top:6px;}
.ev-reaction-btn{font-size:18px;background:var(--card2);border:1px solid var(--blight);border-radius:20px;padding:4px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ev-reaction-btn.selected{border-color:var(--ch-accent,var(--green));background:var(--glight);}

/* ── Event detail overlay ───────────────────────────────────────── */
.ev-detail-type{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px;opacity:.7;}
.ev-detail-title{font-size:20px;font-weight:700;margin-bottom:4px;}
.ev-detail-meta{font-size:13px;color:var(--text2);margin-bottom:12px;}
.ev-detail-notes{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:12px;}

/* ── Parent settings — event sources ───────────────────────────── */
.ev-source-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--blight);}
.ev-source-row:last-child{border-bottom:none;}
.ev-source-icon{font-size:22px;flex-shrink:0;width:32px;text-align:center;}
.ev-source-body{flex:1;min-width:0;}
.ev-source-label{font-size:15px;font-weight:500;}
.ev-source-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.ev-ical-wrap{padding:12px 0;}
.ev-ical-filters{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.ev-ical-filter-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--card2);border-radius:var(--rad);}
.ev-ical-filter-name{font-size:14px;}

/* ── Add / edit event form ──────────────────────────────────────── */
.ev-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.ev-type-opt{padding:10px 6px;text-align:center;border:2px solid var(--blight);border-radius:var(--radl);cursor:pointer;font-size:13px;background:var(--card2);-webkit-tap-highlight-color:transparent;}
.ev-type-opt.sel{border-color:var(--ch-accent,var(--green));background:var(--glight);}
.ev-type-opt .ev-type-icon{font-size:22px;display:block;margin-bottom:3px;}
.ev-vis-opts{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.ev-vis-opt{padding:8px 14px;border:2px solid var(--blight);border-radius:20px;cursor:pointer;font-size:13px;background:var(--card2);}
.ev-vis-opt.sel{border-color:var(--ch-accent,var(--green));background:var(--glight);}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCED CALENDAR — Week bands, Month grid, View toggle
   ═══════════════════════════════════════════════════════════════════ */

/* ── View mode toggle (Week / Month pill) ────────────────────────── */
.ev-view-toggle{
  display:flex;
  gap:0;
  background:var(--card2);
  border:1px solid var(--blight);
  border-radius:20px;
  padding:2px;
  margin:0 auto 12px;
  width:fit-content;
}
.ev-view-btn{
  padding:5px 18px;
  border-radius:18px;
  border:none;
  background:transparent;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:var(--text2);
  transition:background .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.ev-view-btn.on{
  background:var(--ch-accent,var(--green));
  color:#fff;
}

/* ── Banded week grid (time-of-day rows) ─────────────────────────── */
.ev-week-grid-banded{
  display:grid;
  grid-template-columns:repeat(7,minmax(44px,1fr));
  min-width:308px;
  gap:0;
  border:1px solid var(--blight);
  border-radius:var(--radl);
  overflow:hidden;
  background:var(--blight);
  width:100%;
}
/* Each day column in banded mode */
.ev-week-grid-banded .ev-day-col{
  display:flex;
  flex-direction:column;
  background:var(--card);
  padding:4px 2px 4px;
  min-height:0;
}
.ev-week-grid-banded .ev-day-col + .ev-day-col{ border-left:1px solid var(--blight); }

/* Time band containers */
.ev-band{
  min-height:28px;
  padding:2px 1px;
  border-top:1px solid var(--blight);
  background:transparent;
}
.ev-band-allday{ border-top:none; min-height:24px; }
.ev-band-empty{ display:block; min-height:8px; }

/* Band label (emoji icon in each column) */
.ev-band-lbl{
  text-align:center;
  font-size:8px;
  line-height:1;
  color:var(--text2);
  padding:1px 0;
  opacity:.6;
}

/* Slightly tinted band backgrounds */
.ev-band-morning  { background:rgba(255,210,100,0.06); }
.ev-band-afternoon{ background:rgba(100,180,255,0.06); }
.ev-band-evening  { background:rgba(80,60,160,0.07);   }

/* ── Month grid ──────────────────────────────────────────────────── */
.ev-month-wrap{
  margin-bottom:8px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.ev-month-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  margin-bottom:8px;
  /* Cells grow to fill available height but still scroll when > viewport */
  min-height:0;
}
.ev-month-dow{
  text-align:center;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text2);
  padding:4px 0 6px;
}
.ev-month-cell{
  background:var(--card);
  border:1px solid var(--blight);
  border-radius:var(--rad);
  min-height:52px;
  padding:4px 3px 3px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .1s;
}
.ev-month-cell:active{ background:var(--card2); }
.ev-month-cell-other{
  background:transparent;
  border-color:transparent;
  pointer-events:none;
}
.ev-month-today{
  border-color:var(--ch-accent,var(--green));
  border-width:2px;
}
.ev-month-has-events{ background:var(--card); }

.ev-month-num{
  text-align:center;
  font-size:13px;
  font-weight:600;
  width:22px;
  height:22px;
  line-height:22px;
  border-radius:50%;
  margin:0 auto 3px;
}
.ev-month-num.today{
  background:var(--ch-accent,var(--green));
  color:#fff;
}
.ev-month-dots{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  justify-content:center;
}
.ev-month-dot{
  width:7px;
  height:7px;
  border-radius:50%;
}
.ev-month-dot.type-allowance  { background:var(--ev-allowance);   }
.ev-month-dot.type-birthday   { background:var(--ev-birthday);    }
.ev-month-dot.type-interest   { background:var(--ev-interest);    }
.ev-month-dot.type-chore      { background:var(--ev-chore);       }
.ev-month-dot.type-meal       { background:var(--ev-meal);        }
.ev-month-dot.type-shopping   { background:var(--ev-shopping);    }
.ev-month-dot.type-savings    { background:var(--ev-savings);     }
.ev-month-dot.type-manual     { background:var(--ev-manual);      }
.ev-month-dot.type-ical       { background:var(--ev-ical);        }
.ev-month-dot.type-anniversary{ background:var(--ev-anniversary); }
.ev-month-dot.type-other      { background:var(--ev-other);       }
.ev-month-more{
  font-size:9px;
  color:var(--text2);
  font-weight:600;
  line-height:1;
  margin-top:1px;
}

/* ── Day detail overlay (month-view tap) ─────────────────────────── */
.ev-day-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--blight);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ev-day-item:last-child{ border-bottom:none; }
.ev-day-item:active{ opacity:.7; }
.ev-day-item-icon{ font-size:24px; flex-shrink:0; }
.ev-day-item-body{ flex:1; min-width:0; }
.ev-day-item-title{ font-size:15px; font-weight:600; }
.ev-day-item-time{ font-size:12px; color:var(--text2); margin-top:2px; }
.ev-day-empty{ text-align:center; padding:24px 0; font-size:15px; color:var(--text2); }

/* ── Coming-up card pulse for very soon events ───────────────────── */
.ev-coming-card.today-soon{
  border-color:var(--ch-accent,var(--green));
  border-width:2px;
  animation:ev-pulse 2s ease-in-out infinite;
}
@keyframes ev-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--ch-accent-rgb,29,158,117),.25); }
  50%     { box-shadow:0 0 0 6px rgba(var(--ch-accent-rgb,29,158,117),0); }
}

/* ── Responsive: on very narrow screens hide band labels ─────────── */
@media (max-width:360px){
  .ev-band-lbl{ display:none; }
  .ev-month-cell{ min-height:42px; }
  /* Tighter tile text on very small screens */
  .ev-tile{ font-size:9px; padding:1px 3px; }
}
/* Month jump overlay */
.ev-jump-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:2000;
}
.ev-jump-box{
  background:var(--card);
  border-radius:var(--radl);
  padding:20px;
  width:min(320px,90vw);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
.ev-jump-title{
  font-size:16px;font-weight:700;margin-bottom:14px;text-align:center;
}
.ev-jump-row{
  display:flex;gap:10px;margin-bottom:14px;
}
.ev-jump-row select{
  flex:1;font-size:15px;padding:8px 10px;border:1px solid var(--blight);
  border-radius:var(--rad);background:var(--card2);color:var(--text);
  -webkit-appearance:auto;
}
.ev-jump-btns{display:flex;gap:8px;justify-content:flex-end;}