/* ===== Dashboard calendar tab (v0.39.0) — removable: drop 'make_dashtab' from hook_callbacks::STATIC_SHEETS and
   STATIC_SCRIPTS + delete style/make_dashtab.css and javascript/make_dashtab.js. Without it the calendar is the old card.
   Wide screens (≥ 992px): the calendar folds into a slim tab on the hero's right edge; the arrow slides it fully open
   over the page (nothing below moves). Event days are circled in their colour; under the month, the details of its
   events — click a day to see just that day. */
@media (min-width: 768px) {
  .make-dash-hasside.make-dashtab > *:not(.make-hero-strip):not(.make-dashcal) { max-width: none !important; }
  .make-dash-hasside.make-dashtab > .make-hero-strip { position: relative; z-index: 2; width: calc(100% - 46px) !important; max-width: calc(100% - 46px) !important; margin-right: auto !important; }

  .make-dash-hasside.make-dashtab > .make-dashcal { position: absolute !important; top: var(--tab-top, 0) !important; right: 0 !important; left: auto !important; bottom: auto !important;
    z-index: 1; width: 92px; min-height: var(--tab-h, 320px); display: flex; border-radius: 0 28px 28px 0;
    background: var(--make-paper, #fffaf2); box-shadow: inset 0 0 0 1px rgba(31,37,43,.12);
    transition: width .5s cubic-bezier(.2,.8,.2,1), border-radius .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
  .make-dashtab > .make-dashcal.is-open { z-index: 30; width: 400px; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(31,37,43,.1), 0 28px 60px -24px rgba(31,37,43,.45); }

  /* Handle: the visible 46px strip */
  .make-dashtab__handle { position: absolute; top: 0; right: 0; bottom: 0; width: 46px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0;
    border: 0; background: transparent; color: var(--make-ink, #1f252b); cursor: pointer; z-index: 2; }
  .make-dashtab__arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--make-blue, #1439f5); color: #fff;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), background-color .2s; }
  .make-dashtab__arrow svg { width: 14px; height: 14px; }
  .make-dashtab__handle:hover .make-dashtab__arrow { background: var(--make-ink, #1f252b); }
  .make-dashcal.is-open .make-dashtab__arrow { transform: rotate(180deg); }
  .make-dashtab__label { writing-mode: vertical-rl; font: 800 14px/1 var(--make-display); letter-spacing: .02em; }
  .make-dashtab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff27e1; color: #fff; font: 800 11px/1 var(--make-sans); }
  .make-dashtab__handle:focus-visible { outline: 3px solid var(--make-blue, #1439f5); outline-offset: -3px; border-radius: 0 28px 28px 0; }

  /* Calendar body: hidden while folded, slides in when open */
  .make-dashtab > .make-dashcal .make-dashcal__card { position: static !important; flex: 1 1 auto; min-width: 0; margin-right: 46px; border: 0 !important; background: transparent !important;
    padding: 22px 6px 20px 22px !important; display: none; }
  .make-dashtab > .make-dashcal.is-open .make-dashcal__card { display: block; animation: make-dashtab-card .45s cubic-bezier(.2,.8,.2,1) .1s backwards; }
  @keyframes make-dashtab-card { from { opacity: 0; transform: translateX(18px); } }
  .make-dashtab > .make-dashcal .make-dashcal__upcoming { display: none !important; }

  /* Important dates: a ring in the event's colour; selected day filled */
  .make-dashtab .make-dashcal__day { cursor: pointer; }
  .make-dashtab .make-dashcal__day.has-events span { border: 0; box-shadow: 0 0 0 2.5px var(--dot, var(--make-ink)); }
  .make-dashtab .make-dashcal__day.is-picked span { background: var(--dot, var(--make-ink)); color: #fff; box-shadow: none; }
  .make-dashtab .make-dashcal__day.is-today span { background: var(--make-blue, #1439f5); color: #fff; }

  /* Details under the month */
  .make-dashtab__details { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(31,37,43,.12); }
  .make-dashtab__dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .make-dashtab__dhead .make-dashcal__label { margin: 0 !important; }
  .make-dashtab__clear { border: 0; background: none; padding: 0; color: var(--make-blue, #1439f5); font: 700 12px/1 var(--make-sans); cursor: pointer; }
  .make-dashtab__list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: min(320px, 38vh); overflow-y: auto; scrollbar-width: none; }
  .make-dashtab__list::-webkit-scrollbar { display: none; }
  .make-dashtab__item a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; color: var(--make-ink, #1f252b) !important; text-decoration: none !important;
    background: rgba(31,37,43,.035); transition: background-color .15s, transform .2s cubic-bezier(.2,.8,.2,1); }
  .make-dashtab__item a:hover { background: rgba(31,37,43,.07); transform: translateX(2px); }
  .make-dashtab__date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--c); color: var(--ci, #fff); }
  .make-dashtab__date b { font: 800 17px/1 var(--make-display); }
  .make-dashtab__date small { font: 700 9.5px/1 var(--make-sans); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
  .make-dashtab__name { display: block; font: 700 13.5px/1.25 var(--make-sans); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .make-dashtab__meta { display: block; margin-top: 2px; font-size: 12px; color: rgba(31,37,43,.62); }
  .make-dashtab__empty { padding: 10px 2px; font-size: 13.5px; color: rgba(31,37,43,.62); }
  .make-dashtab__item { animation: make-dashtab-in .34s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes make-dashtab-in { from { opacity: 0; transform: translateY(6px); } }
  .make-dashtab .make-dashcal-pop { display: none !important; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .make-dash-hasside.make-dashtab > .make-dashcal, .make-dashtab > .make-dashcal.is-open .make-dashcal__card, .make-dashtab__arrow, .make-dashtab__item { transition: none !important; animation: none !important; }
}

/* v0.39.1: the tab sits OUTSIDE the centred column (deliberately off-centre) — the hero keeps the full column width so it
   lines up with every section below. Only when there's no room beside the column does it fall back to inside. */
@media (min-width: 768px) {
  .make-dash-hasside.make-dashtab.make-dashtab--out > .make-hero-strip { width: 100% !important; max-width: 100% !important; }
  .make-dash-hasside.make-dashtab.make-dashtab--out > .make-dashcal { right: -46px !important; }
}

/* v0.39.2: opening slides the calendar out to the RIGHT of the column, and the whole dashboard column glides left by half
   the panel's width so column + calendar stay centred together (JS sets --dashtab-shift; clamped to the free space). */
@media (min-width: 768px) {
  .make-dash-hasside.make-dashtab { transition: translate .55s cubic-bezier(.2,.8,.2,1); }
  .make-dash-hasside.make-dashtab.make-dashtab--shift { translate: calc(-1 * var(--dashtab-shift, 0px)) 0; }
  .make-dash-hasside.make-dashtab.make-dashtab--out > .make-dashcal.is-open { right: auto !important; left: calc(100% + 14px) !important; width: 380px; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) { .make-dash-hasside.make-dashtab { transition: none; } }

/* v0.39.3: closing animation. Folded and open now share a LEFT anchor (left + width animate together, so the panel
   glides back into the tab instead of jumping), and while closing the calendar content slides/fades out first. */
@media (min-width: 768px) {
  .make-dash-hasside.make-dashtab.make-dashtab--out > .make-dashcal { right: auto !important; left: calc(100% - 46px) !important;
    transition: width .5s cubic-bezier(.2,.8,.2,1), left .5s cubic-bezier(.2,.8,.2,1), border-radius .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
  .make-dash-hasside.make-dashtab.make-dashtab--out > .make-dashcal.is-open { left: calc(100% + 14px) !important; }
  .make-dashtab > .make-dashcal.is-closing .make-dashcal__card { display: block; animation: make-dashtab-cardout .24s cubic-bezier(.4,0,1,1) forwards; }
  .make-dashtab > .make-dashcal.is-closing .make-dashtab__item { animation: none; }
  @keyframes make-dashtab-cardout { to { opacity: 0; transform: translateX(22px); } }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) { .make-dashtab > .make-dashcal.is-closing .make-dashcal__card { animation: none; display: none; } }

/* v0.39.4: small windows / phones (< 768px): the tab becomes a full-width "Calendar" bar under the hero that opens the
   calendar downward (accordion) — same circled dates + details list. (Before, 768–991px showed the raw, unstyled tab.) */
body.pagelayout-mydashboard #page { overflow-x: clip; }
@media (max-width: 767.98px) {
  .make-dash-hasside > .make-dashcal.make-dashcal--placed { position: static !important; width: 100% !important; max-width: none !important; margin: 4px 0 28px !important;
    border-radius: 22px; background: var(--make-paper, #fffaf2); box-shadow: inset 0 0 0 1px rgba(31,37,43,.12); overflow: hidden; }
  .make-dashtab__handle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 18px; border: 0; background: transparent; color: var(--make-ink, #1f252b); cursor: pointer; text-align: left; }
  .make-dashtab__label { flex: 1; font: 800 16px/1 var(--make-display); }
  .make-dashtab__arrow { order: 3; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--make-blue, #1439f5); color: #fff;
    transform: rotate(-90deg); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
  .make-dashtab__arrow svg { width: 14px; height: 14px; }
  .make-dashcal.is-open .make-dashtab__arrow { transform: rotate(90deg); }
  .make-dashtab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff27e1; color: #fff; font: 800 11px/1 var(--make-sans); }
  .make-dashcal--placed .make-dashcal__card { display: none; position: static !important; border: 0 !important; border-top: 1px solid rgba(31,37,43,.1) !important; border-radius: 0 !important; background: transparent !important; }
  .make-dashcal--placed.is-open .make-dashcal__card { display: block; animation: make-dashtab-down .4s cubic-bezier(.2,.8,.2,1) backwards; }
  .make-dashcal--placed.is-closing .make-dashcal__card { display: block; animation: make-dashtab-up .22s ease forwards; }
  @keyframes make-dashtab-down { from { opacity: 0; transform: translateY(-10px); } }
  @keyframes make-dashtab-up { to { opacity: 0; transform: translateY(-8px); } }
  .make-dashcal--placed .make-dashcal__upcoming { display: none !important; }
  .make-dashcal--placed .make-dashcal__day.has-events span { border: 0; box-shadow: 0 0 0 2.5px var(--dot, var(--make-ink)); }
  .make-dashcal--placed .make-dashcal__day.is-picked span { background: var(--dot, var(--make-ink)); color: #fff; box-shadow: none; }
  .make-dashtab__details { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(31,37,43,.12); }
  .make-dashtab__dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .make-dashtab__dhead .make-dashcal__label { margin: 0 !important; }
  .make-dashtab__clear { border: 0; background: none; padding: 0; color: var(--make-blue, #1439f5); font: 700 12px/1 var(--make-sans); cursor: pointer; }
  .make-dashtab__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .make-dashtab__item a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: rgba(31,37,43,.035); color: var(--make-ink, #1f252b) !important; text-decoration: none !important; }
  .make-dashtab__date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--c); color: var(--ci, #fff); }
  .make-dashtab__date b { font: 800 17px/1 var(--make-display); }
  .make-dashtab__date small { font: 700 9.5px/1 var(--make-sans); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
  .make-dashtab__name { display: block; font: 700 13.5px/1.25 var(--make-sans); }
  .make-dashtab__meta { display: block; margin-top: 2px; font-size: 12px; color: rgba(31,37,43,.62); }
  .make-dashtab__empty { padding: 6px 2px; font-size: 13.5px; color: rgba(31,37,43,.62); }
  .make-dashcal-pop { display: none !important; }
}

/* v0.39.6: tab aligned to the hero's real box (JS measures it with getBoundingClientRect: --tab-top/-h/-left), not to
   offsetTop / the column's edge — the hero sits a few px off both, so the tab was lower and wider than the card. */
@media (min-width: 768px) {
  .make-dash-hasside.make-dashtab > .make-dashcal.make-dashcal { right: auto !important; left: var(--tab-left, calc(100% - 92px)) !important; }
  .make-dash-hasside.make-dashtab > .make-dashcal.make-dashcal.is-open { left: calc(var(--tab-left, calc(100% - 92px)) + 92px - 400px) !important; }
  .make-dash-hasside.make-dashtab.make-dashtab--out > .make-dashcal.make-dashcal.is-open { left: calc(var(--tab-left, calc(100% - 46px)) + 60px) !important; }
}

/* v0.39.7: the old card's small-screen rule (make.css, < 992px) gives it margin: 8px 0 28px — that 8px pushed the tab down. */
@media (min-width: 768px) {
  .make-dash-hasside.make-dashtab > .make-dashcal.make-dashcal { margin: 0 !important; max-width: none !important; }
}

/* v0.40.5: month-count badge — a round dot that pops in once the tab is placed */
.make-dashtab__badge { border-radius: 50% !important; min-width: 24px !important; height: 24px !important; padding: 0 !important; box-shadow: 0 0 0 3px var(--make-paper, #fffaf2);
  animation: make-dashtab-badge .5s cubic-bezier(.34,1.56,.64,1) .5s backwards; }
@keyframes make-dashtab-badge { from { transform: scale(0); } }
.make-dashcal.is-open .make-dashtab__badge { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s; }

/* v0.40.14: "Today" tag on events happening today */
.make-dashtab__now { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 999px; background: var(--make-magenta, #ff27e1); color: #fff; font: 800 10px/1.3 var(--make-display, inherit); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }