.calendar-b {
  margin: 20px 27px 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.calendar-b-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding: 27px 30px;
  border: 1px solid #e1eaf1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px #173e620b;
}
.calendar-b-hero > div { max-width: 680px; }
.calendar-b-hero h2 { margin: 7px 0 8px; color: #183047; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.calendar-b-hero p { margin: 0; color: #6d7f90; font-size: 13px; line-height: 1.5; }
.calendar-b-hero .button { padding: 11px 15px; font-size: 12px; }

.calendar-date-nav {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #e1eaf1;
  border-radius: 16px;
  background: #fff;
}
.calendar-date-nav > div { text-align: center; }
.calendar-date-nav strong { display: block; color: #294861; font-size: 13px; }
.calendar-date-nav span { display: block; margin-top: 3px; color: #8a9aa8; font-size: 9px; }
.calendar-date-arrow, .calendar-current-button {
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: #315e8f;
  background: #edf4f9;
  cursor: pointer;
  font: 800 14px/1 Arial, sans-serif;
}
.calendar-date-arrow { width: 36px; padding: 0; }
.calendar-current-button { padding: 0 13px; font-size: 11px; }
.calendar-date-arrow:hover, .calendar-current-button:hover { background: #dfeaf3; }
.calendar-date-arrow:focus-visible, .calendar-current-button:focus-visible { outline: 3px solid #efb95e; outline-offset: 2px; }

.calendar-week-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 110px)) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 15px;
  background: #173e62;
  color: #fff;
}
.calendar-week-pulse > div { padding: 7px 10px; border-radius: 10px; background: #ffffff12; text-align: center; }
.calendar-week-pulse strong { display: block; font-size: 19px; line-height: 1; }
.calendar-week-pulse span { display: block; margin-top: 4px; color: #c4d5e2; font-size: 9px; }
.calendar-week-pulse p { margin: 0; padding: 0 12px; color: #d5e2ec; font-size: 11px; line-height: 1.4; text-align: right; }

.calendar-b-shell {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid #e1eaf1;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 10px 28px #173e620b;
}
.calendar-b-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.calendar-b-toolbar p { margin: 0; color: #7b8b99; font-size: 10px; text-align: right; }
.calendar-b-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.calendar-b-legend span { display: inline-flex; align-items: center; gap: 6px; color: #66798b; font-size: 10px; font-weight: 700; }
.calendar-b-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.calendar-b-legend .action::before { background: #b9daf6; }
.calendar-b-legend .meeting::before { background: #b9dfc8; }

.calendar-b .calendar-scroll { border-color: #e1e8ee; border-radius: 13px; background: #fff; }
.calendar-b .calendar-grid { background: #fff; }
.calendar-b .calendar-corner,
.calendar-b .day-heading,
.calendar-b .all-day-label,
.calendar-b .time-rail { background: #f7f9fb; }
.calendar-b .calendar-corner,
.calendar-b .day-heading { min-height: 50px; border-color: #e4eaf0; }
.calendar-b .day-heading { padding: 10px; }
.calendar-b .day-heading strong { color: #344e65; font-size: 11px; }
.calendar-b .day-heading span { color: #8796a3; font-size: 10px; }
.calendar-b .day-heading.is-today { position: relative; color: #173e62; background: #e6f0f7; }
.calendar-b .day-heading.is-today::after { content: "Idag"; position: absolute; right: 8px; bottom: 4px; color: #315e8f; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.calendar-b .all-day-label, .calendar-b .all-day-cell { border-color: #e4eaf0; }
.calendar-b .calendar-day { border-color: #e4eaf0; background: repeating-linear-gradient(to bottom,#fff 0,#fff 75px,#edf1f4 75px,#edf1f4 76px); }
.calendar-b .time-tick { color: #8796a3; font-size: 9px; }
.calendar-b .calendar-entry { border-radius: 7px; box-shadow: 0 2px 7px #173e6212; }
.calendar-b .calendar-entry.action { color: #234c70; background: #e3f0fa; border-color: #b4d3eb; }
.calendar-b .calendar-entry.interview,
.calendar-b .calendar-entry.meeting { color: #28543b; background: #e2f2e8; border-color: #b8d9c5; }
.calendar-b .calendar-day.drop-target { background-color: #eef5fa; box-shadow: inset 0 0 0 2px #6d9fc5; }

@media (max-width: 1100px) {
  .calendar-b { margin: 18px 15px 0; }
  .calendar-week-pulse { grid-template-columns: repeat(3, minmax(70px, 90px)) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .calendar-week-pulse { grid-template-columns: repeat(3, 1fr); }
  .calendar-week-pulse p { grid-column: 1 / -1; padding: 6px 4px 2px; text-align: left; }
}
@media (max-width: 650px) {
  .calendar-b { margin: 14px 2px 0; }
  .calendar-b-hero { align-items: stretch; flex-direction: column; gap: 18px; padding: 22px 19px; border-radius: 18px; }
  .calendar-b-hero .button { width: 100%; }
  .calendar-date-nav { grid-template-columns: 34px minmax(0, 1fr) 34px; padding: 9px; }
  .calendar-current-button { display: none; }
  .calendar-date-nav strong { font-size: 11px; }
  .calendar-b-shell { padding: 12px; border-radius: 17px; }
  .calendar-b-toolbar { align-items: flex-start; flex-direction: column; }
  .calendar-b-toolbar p { text-align: left; }
}