:root{
  --brand:#7A3E3E;
  --accent:#FCEEF0;
  --border:#eadede;
  --text:#2b2b2b;

  --ok:#ffffff;            
  --full-dot:#f8d6de;       
  --full-dot-border:#f3c2cf;

  --event:#d81b60;         
  --today:#1a73e8;          

  /* FullCalendar */
  --fc-border-color: var(--border);
  --fc-event-bg-color: var(--event);
  --fc-event-border-color: var(--event);
  --fc-event-text-color:#fff;
  --fc-today-bg-color:transparent; /* we use a pill on number instead */
}

html,body{
  height:100%;
  background:#fff;
}

body{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
  margin:0;
  padding:24px 14px calc(24px + env(safe-area-inset-bottom));
  color:var(--text);
}

.wrap{ max-width:1100px; margin:0 auto; }

/* ===== Header card ===== */
.hc-header{
  position:relative; overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px 18px 18px;
  margin-bottom:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  background:linear-gradient(180deg,#ffe6ec 0%,#fff 100%);
}
.hc-title{ margin:0 0 6px; color:var(--brand); font-weight:800; font-size:22px; }
.hc-sub{   margin:0; color:#7a6c6c; font-size:14px; }

/* Legend */
.legend{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.legend-item{ font-size:14px; color:#594f4f; display:flex; align-items:center; }
.dot{ width:12px; height:12px; border-radius:4px; margin-right:6px; display:inline-block; }
.dot.ok{   background:var(--ok);      border:1.5px solid var(--border); }
.dot.full{ background:var(--full-dot); border:1px solid var(--full-dot-border); }

/* ===== Calendar shell (rounded + airy) ===== */
#calendar{
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 16px 44px rgba(0,0,0,.06);
}

/* Round the internal grid too */
.fc .fc-scrollgrid{
  border:none;
  border-radius:22px;
  overflow:hidden;
}

/* ===== Toolbar (same on desktop & mobile) ===== */
.fc .fc-toolbar.fc-header-toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:6px;

  padding:8px 12px;                 /* tighter than before */
  background:linear-gradient(180deg,#fff8fa 0%,#ffffff 100%);
  border-bottom:1px solid var(--border);
}

/* hide right chunk (no Month/Week), hide native title */
.fc .fc-toolbar-chunk:last-child{ display:none; }
.fc .fc-toolbar-title{ display:none; }

/* chevrons only (no button chrome) */
.fc .fc-button{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--brand);
  padding:4px 6px;
}
.fc .fc-prev-button .fc-icon,
.fc .fc-next-button .fc-icon{
  color:#000 !important;
  font-size:1.25rem !important;
  opacity:1 !important;
}

/* Month + Year right next to arrows (text-like) */
.hc-monthpicker{
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin-left:6px;       
}
.hc-select.textlike{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; background:transparent;
  padding:0; margin:0;
  font-size:18px; font-weight:700; color:#2e2e2e; line-height:1;
  background-image:none; 
}
.hc-select.textlike.caret{
  padding-right:16px;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 6px)  calc(50% - 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

/* ===== Grid ===== */
.fc .fc-col-header-cell-cushion{
  color:#6b5b5b; font-weight:700; text-transform:uppercase; font-size:12px;
}

.fc .fc-daygrid-day{ background:#fff !important; }
.fc .fc-daygrid-day-frame{ padding:8px; }  /* a touch more breathing room */

.fc .fc-daygrid-day-number{
  color:#463b3b;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;               
}

.fc .fc-day-today .fc-daygrid-day-number{
  background:var(--today);
  color:#fff;
}

/* soft grid lines */
.fc-theme-standard td, .fc-theme-standard th{ border-color:var(--border); }

/* Event chips */
.fc .fc-event{
  border-radius:10px;
  padding:2px 8px;
  background:var(--event);
  border-color:var(--event);
  color:#fff !important;
}

/* ===== Mobile tweaks ===== */
@media (max-width:640px){
  .wrap{ padding:0 6px; }

  .hc-select.textlike{ font-size:16px; }
  .fc .fc-daygrid-day-number{ font-size:14px; }
  .fc .fc-daygrid-day-frame{ min-height:56px; }

  /* ensure the rounded body never feels “tight” on small screens */
  #calendar{ border-radius:24px; }
  .fc .fc-scrollgrid{ border-radius:24px; }
}