.cal-backdrop { display: none; pointer-events: none; }
.cal-backdrop.open { display: flex; pointer-events: auto; }

.cal{
  width: min(420px, calc(100vw - 28px));
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow: hidden;
}

.cal-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #3e0f0f;
  color:#fff;
}
.cal-top button{
  width: 38px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 22px;
  cursor: pointer;
}
.cal-top .title{ font-size: 16px; font-weight: 600; }

.cal-grid{ padding: 10px; }

.cal-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-size: 12px;
  color:#666;
  margin-bottom: 6px;
  text-align:center;
}

.cal-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-day{
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  cursor:pointer;
  user-select:none;
  font-size: 14px;
  background:#f5f5f5;
  border: 1px solid #eee;
}
.cal-day:hover{ background:#e9e9e9; }
.cal-day.out{ opacity: .35; }
.cal-day.selected{
  outline: 2px solid #193366;
  background:#eaf2ff;
}
.cal-day.weekend{ color:#b03232; }
.cal-day.holiday{ color:#b03232; font-weight: 700; }
.cal-day.vacation{ background:#ece2d6; }

@media (max-width: 420px){
  .cal-day{ height: 34px; }
}

/* ===== Calendar picker dentro do modalCalendar (forçar tamanho dos dias) ===== */
#modalCalendar .modal-content.modal-calendar{
  max-width: 380px !important;
  padding: 10px !important;
  overflow-x: hidden !important;
}

#modalCalendar .cal-top{
  display:flex !important;
  flex-wrap: wrap !important;
  align-items:center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#modalCalendar .cal-title{
  flex: 1 1 180px !important;
  min-width: 160px !important;
  text-align: center !important;
}

/* Botão Fechar retangular e com texto a caber */
#modalCalendar button[data-close="modalCalendar"]{
  border-radius: 10px !important;
  padding: 6px 14px !important;
  min-width: 90px !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* Grelha: 7 colunas, com menos espaço => dias mais estreitos */
#modalCalendar .cal-grid{
  display:grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap:1px !important;
}

/* Dias realmente mais pequenos (altura + padding) */
#modalCalendar .cal-day{
  height: 30px !important;       /* reduz a altura */
  border-radius: 10px !important; /* menos "pill" */
  font-size: 12px !important;
  padding: 0 !important;
}

/* ===== FIX overflow: garantir 7 colunas cabem no modalCalendar ===== */
#modalCalendar,
#modalCalendar *{
  box-sizing: border-box !important;
}

#modalCalendar .modal-content.modal-calendar{
  width: calc(100vw - 16px) !important;  /* cabe sempre no ecrã */
  max-width: 380px !important;
  padding: 10px !important;
  overflow-x: hidden !important;
}

#modalCalendar .cal-grid{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important; /* deixa encolher */
  gap: 3px !important;
}

/* DOW e dias ocupam toda a largura da célula */
#modalCalendar .cal-dow,
#modalCalendar .cal-day{
  width: 100% !important;
}

#modalCalendar .cal-day{
  height: 30px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  padding: 0 !important;
}

.cal-day.selected{
  position: relative;
  font-weight: 800;
}

.cal-day.selected::after{
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid #3f4f8c;
  border-radius: 8px;
  pointer-events: none;
}