/* Core calendar CSS (clean, mobile-friendly) */

:root {
  --rmec-accent: #ff8c42;      /* buttons, month-view dates, headings, default event color */
  --rmec-text: #ffffff;        /* primary text on the calendar */
  --rmec-text-muted: #9aa6b6;  /* secondary text (day names, hour labels, "no events") */
  --rmec-modal-bg: #0f1724;    /* hover-modal background */
  --rmec-event-text: #ffffff;  /* text inside event blocks (title/time) */
}

.rmec-hourly-grid, .rmec-month-grid {
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--rmec-text);
  width: 100%;
  box-sizing: border-box;
}

/* Header */
.rmec-calendar-header-outer {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
  padding-left:10px !important; padding-right:10px !important;
}
.rmec-header-edge-btn { background:var(--rmec-accent) !important; border:1px solid rgba(255,255,255,0.06); color:var(--rmec-text); padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.rmec-header-edge-btn:hover { border-color: rgba(255,255,255,0.12); }
.rmec-header-center { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; }
.rmec-week-date-stack { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:120px; }
.rmec-calendar-week-label-centered { font-weight:700; font-size:16px; color:var(--rmec-text); text-align:center; }
.rmec-view-select { background: rgba(255,255,255,0.02); color:var(--rmec-text); border:1px solid rgba(255,255,255,0.04); padding:6px 8px; border-radius:8px; font-weight:600; }

/* Hour grid */
.rmec-hourly-grid-header { display:flex; gap:8px; align-items:center; margin-bottom:8px; box-sizing:border-box; padding:0 6px; }
.rmec-hour-column-header.empty-header { flex:0 0 80px; max-width:80px; height:36px; box-sizing:border-box; }
.rmec-day-header { flex:1 1 0; min-width:0; background: rgba(255,255,255,0.02); padding:8px 10px; border-radius:8px; text-align:center; font-weight:600; box-sizing:border-box; }
.rmec-day-header .day-name { font-size:13px; color:var(--rmec-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmec-day-header .date-label { font-size:15px; color:var(--rmec-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmec-hourly-grid-body { position:relative; display:block; border-top:1px solid rgba(255,255,255,0.04); }
.rmec-hour-row { display:flex; gap:8px; align-items:flex-start; padding:4px 0; min-height:48px; box-sizing:border-box; border-bottom:1px dashed rgba(255,255,255,0.02); }
.rmec-hour-label { flex:0 0 80px; max-width:80px; color:var(--rmec-text-muted); font-size:12px; padding:6px 8px; box-sizing:border-box; text-align:right; }
.rmec-day-cell { flex:1 1 0; min-width:0; background:transparent; min-height:1px; position:relative; box-sizing:border-box; }
.rmec-day-cell .rmec-cell-content { position:relative; height:100%; width:100%; box-sizing:border-box; }

/* Overlays and events */
.rmec-day-column-overlay { pointer-events:none; top:0; z-index:5; position:absolute; box-sizing:border-box; }
.rmec-event-block { box-sizing:border-box; border-left:4px solid rgba(0,0,0,0.15); border-radius:8px; padding:8px; color:var(--rmec-event-text); font-size:11px; overflow:hidden; display:flex; align-items:flex-start; gap:8px; cursor:pointer; pointer-events:auto; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 2px 10px rgba(0,0,0,0.45); }
.rmec-event-block:hover, .rmec-event-block:focus { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.55); outline:none; }
.rmec-event-title { font-weight:700; font-size:11px; line-height:1.1; }
.rmec-event-time { font-size:12px; color:rgba(255,255,255,0.9); position:absolute; bottom: 0; }
.rmec-event-block.rmec-event-mini { padding:4px 6px; border-left-width:0; border-radius:6px; height:auto; }

.rmec-loading, .rmec-no-events { color:var(--rmec-text-muted); padding:12px; }

#rmec-hover-modal { display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:999999; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.rmec-hover-modal-inner { width:720px; max-width:100%; max-height:calc(100vh - 40px); background:var(--rmec-modal-bg); border-radius:10px; padding:20px; color:var(--rmec-text); position:relative; box-sizing:border-box; overflow-y:auto; }
.rmec-hover-modal-close { position:absolute; right:12px; top:8px; background:transparent; border:none; color:var(--rmec-text); font-size:22px; cursor:pointer; z-index:1; }
.rmec-hover-modal-content { display:flex; flex-direction:row; align-items:flex-start; gap:20px; }
.rmec-hover-modal-left { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; width:180px; }
.rmec-hover-thumb-wrap { flex-shrink:0; }
.rmec-hover-thumb-wrap img { max-width:180px; max-height:180px; width:auto !important; height:auto !important; border-radius:8px; display:block; object-fit:contain; }
.rmec-hover-body { flex:1 1 auto; min-width:0; }
@media screen and (max-width:600px) {
  .rmec-hover-modal-content { flex-direction:column; }
  .rmec-hover-modal-left { width:100%; }
}

/* Month view */
.rmec-month-grid { width:100%; box-sizing: border-box; margin-top:12px; color:var(--rmec-text); }
.rmec-month-grid-header { display:flex; gap:8px; margin-bottom:8px; }
.rmec-month-cell-header { flex:1 1 0; text-align:center; font-weight:700; font-size:13px; color:var(--rmec-text-muted); padding:6px 4px; box-sizing:border-box; }
.rmec-month-grid-body { display:flex; flex-wrap:wrap; gap:8px; box-sizing:border-box; }
.rmec-month-cell { flex: 0 0 calc((100% / 7) - (8px * (6/7))); box-sizing: border-box; display:flex; flex-direction:column; background: rgba(255,255,255,0.02); border-radius:10px; padding:10px; min-height:110px; border:1px solid rgba(255,255,255,0.03); overflow:hidden; }
.rmec-month-cell--muted { opacity:0.45; }
.rmec-month-cell-inner { display:flex; flex-direction:column; gap:8px; height:100%; overflow:hidden; }
.rmec-month-cell-date { font-weight:700; font-size:14px; color:var(--rmec-accent); align-self:flex-start; }
.rmec-month-events { display:flex; flex-direction:column; gap:6px; overflow:auto; max-height: calc(100% - 28px); }
.rmec-month-event { display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; color:var(--rmec-event-text); font-size:13px; }
.rmec-month-event .rmec-month-event-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Responsive tweaks */
@media screen and (max-width:900px) {
  .rmec-hour-label, .rmec-hour-column-header.empty-header { flex:0 0 56px; max-width:56px; text-align:right; }
  .rmec-hour-row { min-height:44px; }
  .rmec-calendar-week-label-centered { font-size:14px; }
  .rmec-month-cell { min-height:88px; padding:8px; }
  .rmec-month-cell-date { font-size:13px; }
}

/* Mobile adjustments */
@media screen and (max-width:768px) {
  .rmec-hourly-grid, .rmec-month-grid, #rmec-calendar-container { padding:0 !important; margin:0 !important; width:100% !important; box-sizing:border-box; }

  /* Reduce hour label width on mobile to give more space to day columns */
  .rmec-hour-label, .rmec-hour-column-header.empty-header { 
    flex:0 0 42px !important; 
    max-width:42px !important; 
    font-size:10px !important;
    padding:4px 2px !important;
  }

  /* Ensure day columns fill remaining space without overflow */
  .rmec-day-cell {
    min-width:0 !important;
  }

  /* Reduce gaps on mobile */
  .rmec-hourly-grid-header { gap:4px !important; padding:0 2px !important; }
  .rmec-hour-row { gap:4px !important; }

  .rmec-month-event .rmec-month-event-label { display:none !important; }
  .rmec-month-event { width:32px !important; height:14px !important; padding:0 !important; }

  /* NEW: Show titles/times in week view on mobile (2-day layout) */
  #rmec-calendar-container.rmec-view-week .rmec-event-block .rmec-event-title,
  #rmec-calendar-container.rmec-view-week .rmec-event-block .rmec-event-time {
    display:block !important; 
    visibility:visible !important; 
    opacity:1 !important; 
    font-size:11px !important; 
    height:auto !important; 
    overflow:visible !important;
    line-height:1.3 !important;
  }

  /* Adjust event block sizing for 2-column week view */
  #rmec-calendar-container.rmec-view-week .rmec-event-block {
    padding: 6px !important;
    font-size: 11px !important;
  }

  #rmec-calendar-container.rmec-view-week .rmec-event-title {
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  #rmec-calendar-container.rmec-view-week .rmec-event-time {
    font-size: 10px !important;
  }

  /* Hide titles/times only in month view on mobile */
  #rmec-calendar-container.rmec-view-month .rmec-event-block .rmec-event-title,
  #rmec-calendar-container.rmec-view-month .rmec-event-block .rmec-event-time {
    display:none !important; visibility:hidden !important; opacity:0 !important; font-size:0 !important; height:0 !important; overflow:hidden !important;
  }

  /* Keep day view text visible as before */
  #rmec-calendar-container.rmec-view-day .rmec-event-block .rmec-event-title,
  #rmec-calendar-container.rmec-view-day .rmec-event-block .rmec-event-time {
    display:block !important; visibility:visible !important; opacity:1 !important; font-size:0.95rem !important; height:auto !important; overflow:visible !important;
  }

  /* Make scroll container use native iOS scroll behavior (momentum) */
  #rmec-calendar-events-container .rmec-hourly-grid,
  #rmec-calendar-events-container,
  #rmec-calendar-events-container .rmec-hourly-grid-body {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}

/* Ensure positioning context */
#rmec-calendar-events-container .rmec-hourly-grid-body { position: relative !important; overflow: visible !important; box-sizing: border-box !important; transform:none !important; }
.rmec-day-column-overlay { position:absolute !important; box-sizing:border-box !important; pointer-events:none !important; }
.rmec-day-column-overlay .rmec-event-block { position:absolute !important; box-sizing:border-box !important; margin:0 !important; padding:8px !important; pointer-events:auto !important; }

/* Small gutter */
@media (max-width:768px) {
  #rmec-calendar-container, .rmec-calendar-wrapper { margin-left:4px !important; margin-right:4px !important; }
  
  /* Force grid to exactly fit container width */
  .rmec-hourly-grid { 
    width:100% !important; 
    max-width:100% !important; 
    overflow-x:hidden !important;
  }
  
  .rmec-hourly-grid-body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

/* FIX: Prevent image cropping in hover modal */
.rmec-event-block {
    overflow: visible !important;   /* was: hidden */
}

.rmec-hover-thumb-wrap img {
    object-fit: contain !important;
    max-width: 180px;
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 8px;
    margin-bottom: 12px;
}

h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700 !important;           /* bold */
  font-size: 24px !important;
  color: var(--rmec-accent) !important;
  margin-bottom: 1.25rem;     /* mb-5 → 20px (1.25rem) */
}