/* ============================================================
   motiva-calendar.css — shared Motiva calendar grid styles

   Moved from MentorCalendarPage.razor.css so the Mentor and
   Lecturer calendars can use the same mcal-* rules without
   duplication. Global (non-scoped) so Blazor CSS isolation
   cannot restrict these selectors to one component tree.

   The five ::deep rules that override child-component styles
   (MCard, MPageHeader, MEmptyState, MentorPersonalTaskModal)
   live in each page's own scoped .razor.css file because
   specificity requires the scoped attribute selector to win.
   ============================================================ */

/* ── Shell layout ────────────────────────────────────────────
   The title is now the shared white Core page-header (MPageHeaderCard),
   a sibling ABOVE .mcal-body; the old `.mcal-header-bleed` shell-edge
   bleed that used to host the compact header is gone from both the
   Mentor and Lecturer calendars.
   .mcal-body: viewport-height flex column; contain:size is
   load-bearing — without it the shell measures the grid's
   natural height and flex:1 has nothing to shrink into. */

.mcal-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    contain: size;
}

/* ── Focus rings ─────────────────────────────────────────────
   Applied to the month chip and the "+N" button — the two
   keyboard-reachable controls that live inside a grid cell. */

.mcal-item:focus-visible,
.mcal-more:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Type dots ───────────────────────────────────────────────
   CATEGORICAL, not status: they say what kind of entry this is,
   never whether it is healthy or late. */

.mcal-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: var(--motiva-radius-full);
    display: inline-block;
}

.mcal-dot-meeting      { background: var(--motiva-color-violet); }
.mcal-dot-personaltask { background: var(--motiva-color-blue); }
.mcal-dot-milestone    { background: var(--motiva-text-secondary); }
.mcal-dot-submission   { background: var(--motiva-color-rose-ink, var(--motiva-color-rose)); }
.mcal-dot-review       { background: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }

/* ── Month grid ──────────────────────────────────────────── */

.mcal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto repeat(6, minmax(0, 1fr));
    flex: 1;
    min-height: 0;
}

.mcal-dayname {
    padding: 5px 8px;
    text-align: center;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.mcal-cell {
    /* Positioning context for .mcal-cell-add, the full-cell create button
       that sits BEHIND everything else in the cell. */
    position: relative;
    min-height: 0;
    padding: 4px 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    border-block-end: 1px solid var(--motiva-border-subtle);
    border-inline-start: 1px solid var(--motiva-border-subtle);
}

.mcal-cell:nth-child(7n + 1) { border-inline-start: 0; }

.mcal-cell-out { background: var(--motiva-surface-secondary); }
.mcal-cell-out .mcal-daynum { color: var(--motiva-text-subtle, var(--motiva-text-muted)); }

.mcal-cell-today { background: var(--motiva-color-brand-bg); }

.mcal-cell-head {
    /* z-index over .mcal-cell-add: the day number and the chips are drawn on
       top of the create button, so a click on a chip reaches the chip. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 4px;
}

.mcal-cell-items {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow: hidden;
}

.mcal-daynum {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.mcal-cell-today .mcal-daynum { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* ── Day chip ────────────────────────────────────────────────
   Tinted in its own type hue — a wash of the hue behind ink
   of the same hue, at radius 7. */

.mcal-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 7px;
    background: var(--mcal-item-bg, var(--motiva-surface-secondary));
    color: var(--mcal-item-ink, var(--motiva-text-primary));
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* One custom property pair per type — chip, dot and week block resolve
   from the same variables and cannot drift. */
.mcal-item-meeting,
.mcal-wk-chip-meeting      { --mcal-item-ink: var(--motiva-color-violet);                             --mcal-item-bg: rgba(109, 40, 245, 0.10); }
.mcal-item-personaltask,
.mcal-wk-chip-personaltask { --mcal-item-ink: var(--motiva-color-blue);                               --mcal-item-bg: rgba(46, 99, 232, 0.10); }
.mcal-item-milestone,
.mcal-wk-chip-milestone    { --mcal-item-ink: var(--motiva-text-secondary);                           --mcal-item-bg: rgba(27, 26, 34, 0.07); }
.mcal-item-submission,
.mcal-wk-chip-submission   { --mcal-item-ink: var(--motiva-color-rose-ink, var(--motiva-color-rose)); --mcal-item-bg: rgba(224, 51, 95, 0.10); }
.mcal-item-review,
.mcal-wk-chip-review       { --mcal-item-ink: var(--motiva-color-teal-ink, var(--motiva-color-teal)); --mcal-item-bg: rgba(15, 168, 194, 0.12); }

.mcal-item .mcal-dot { background: var(--mcal-item-ink, currentColor); }

.mcal-item-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.mcal-item:hover { filter: brightness(0.96); }

.mcal-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcal-more {
    /* Above .mcal-cell-add, like the chips — "+N נוספים" opens the day, it
       never falls through to create. */
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0 5px;
    text-align: start;
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.25;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
}

.mcal-more:hover { text-decoration: underline; }

/* ============================================================
   DAY VIEW — all-day band over an hour grid
   ============================================================ */

.mcal-allday {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: var(--motiva-space-sm);
    padding-block: 12px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.mcal-allday-label {
    padding-block-start: 4px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    text-align: start;
}

.mcal-allday-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mcal-allday-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-allday-item:hover { border-color: var(--motiva-border-strong); }

.mcal-allday-item:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mcal-allday-title {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcal-allday-context {
    min-width: 0;
    flex: 1;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: end;
}

.mcal-allday-empty {
    margin: 0 0 4px;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
}

/* ── The hour grid ───────────────────────────────────────────
   ONE grid with explicit rows — a block spanning 09:00–11:00
   must share a track system with the hour lines. */

.mcal-hours {
    --mcal-row-h: 46px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-auto-rows: var(--mcal-row-h);
    column-gap: var(--motiva-space-sm);
}

.mcal-hour-label {
    grid-column: 1;
    padding-block-start: 6px;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    font-variant-numeric: tabular-nums;
    text-align: start;
}

.mcal-hour-lane {
    grid-column: 2;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.mcal-hour-now { background: var(--motiva-color-brand-bg); }

.mcal-hour-stack {
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding-block: 3px;
    z-index: 1;
}

.mcal-timed {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--motiva-color-teal, var(--motiva-border-strong));
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-timed:hover { background: var(--motiva-surface-hover); }

.mcal-timed:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mcal-timed .mcal-dot { margin-block-start: 5px; }

.mcal-timed-point {
    align-items: center;
    border-color: var(--motiva-border-subtle);
    border-inline-start-width: 3px;
    border-inline-start-color: var(--motiva-color-teal, var(--motiva-color-indigo));
}

.mcal-timed-point .mcal-dot { margin-block-start: 0; }

.mcal-timed-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mcal-timed-title {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcal-timed-range {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* ── Day view compact ────────────────────────────────────────
   A heading plus a list — no geometry, since a single day has
   none left. */

.mcal-day {
    display: flex;
    flex-direction: column;
    padding: var(--motiva-space-md) var(--motiva-space-md) var(--motiva-space-sm);
}

.mcal-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--motiva-space-md);
    flex-wrap: wrap;
    padding-block-end: 10px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.mcal-day-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.mcal-day-name {
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
    line-height: var(--motiva-line-height-heading);
}

.mcal-day-name-today { color: var(--motiva-color-violet, #4F46E5); }

.mcal-day-date {
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
}

.mcal-day-headmeta {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
}

.mcal-day-count {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* ============================================================
   THE ADD ACTION — one button, three views.

   Geometry only lives here; the gradient fill, the brightness
   hover/press and the focus ring come from the shared
   `.motiva-cta` treatment in motiva-base.css.
   ============================================================ */

.mcal-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    line-height: 1;
    border-radius: var(--motiva-radius-sm);
}

.mcal-add svg { width: 15px; height: 15px; }

.mcal-add-lg { width: 34px; height: 34px; }
.mcal-add-lg svg { width: 17px; height: 17px; }

.mcal-add-xs {
    width: 18px;
    height: 18px;
    border-radius: 7px;
}

.mcal-add-xs svg { width: 12px; height: 12px; }

/* ── The month cell's create target ──────────────────────────
   THE WHOLE CELL, not a "+" inside it.

   It used to be an 18px hover-revealed button in the cell head, which asked
   the reader to find a 18x18 target inside a 100x84 one, and only after
   discovering that hovering revealed anything at all. The same gesture the
   student planner already uses is the one here now: a real <button> filling
   the cell BEHIND its content.

   A <button> and not an @onclick on the cell div, because it is then
   focusable, reachable by Tab and operable with Enter/Space for free — all of
   which a clickable div would have to re-implement. The chips, the day number
   and "+N נוספים" are all raised to z-index 1 above it, so clicking an
   existing entry opens that entry and never creates.

   Hover tints the cell rather than revealing a control: the affordance is the
   cell itself, so that is what has to respond. */
.mcal-cell-add {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-cell-add:hover { background: var(--motiva-surface-hover); }

.mcal-cell-add:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* The week view's day-head "+" is unchanged: a column header is not a date
   cell, and it is that view's only create affordance. */
.mcal-wk-add {
    opacity: 0;
    transition: opacity var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-wk-dayhead:hover .mcal-wk-add,
.mcal-wk-col-sel .mcal-wk-add,
.mcal-wk-add:focus-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mcal-cell-add { transition: none; }
    .mcal-wk-add   { transition: none; }
}

/* ============================================================
   WEEK VIEW — seven day columns on one shared time axis.
   ============================================================ */

.mcal-wk {
    --mcal-wk-gutter: 68px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.mcal-wk-row {
    display: grid;
    grid-template-columns: var(--mcal-wk-gutter) repeat(7, minmax(0, 1fr));
}

.mcal-wk-row > * + * { border-inline-start: 1px solid var(--motiva-border-subtle); }

.mcal-wk-gutter {
    padding-inline: 8px;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    text-align: start;
}

.mcal-wk-headrow { border-block-end: 1px solid var(--motiva-border-subtle); }

.mcal-wk-dayhead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 4px;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-wk-dayname {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.mcal-wk-daynum {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
    font-variant-numeric: tabular-nums;
}

.mcal-wk-alldayrow { border-block-end: 1px solid var(--motiva-border-subtle); }

.mcal-wk-alldaylabel {
    align-self: start;
    padding-block: 8px;
    font-weight: var(--motiva-font-weight-semibold);
}

.mcal-wk-alldaycell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: 5px 4px;
    cursor: pointer;
}

/* ── Hour rows ────────────────────────────────────────────────
   ONE grid for the whole band — a block spanning two hours
   must share a track system with the hour lines. */

.mcal-wk-hours {
    --mcal-wk-row-h: 34px;
    display: grid;
    grid-template-columns: var(--mcal-wk-gutter) repeat(7, minmax(0, 1fr));
    grid-auto-rows: var(--mcal-wk-row-h);
}

.mcal-wk-hourlabel {
    grid-column: 1;
    padding-block-start: 4px;
    font-variant-numeric: tabular-nums;
}

.mcal-wk-lane {
    border-block-end: 1px solid var(--motiva-border-subtle);
    border-inline-start: 1px solid var(--motiva-border-subtle);
}

.mcal-wk-stack {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 2px 3px;
    z-index: 1;
}

.mcal-wk-chip-timed {
    align-items: flex-start;
    flex: 1;
    padding: 5px 8px;
    border: 0;
    border-inline-start: 3px solid var(--mcal-item-ink, var(--motiva-color-violet));
    border-radius: 10px;
    background: var(--mcal-item-bg, var(--motiva-surface-secondary));
}

.mcal-wk-chip-timed .mcal-dot { margin-block-start: 4px; }

.mcal-wk-chip-point {
    align-items: center;
    border-inline-start-color: var(--mcal-item-ink, var(--motiva-color-violet));
}

.mcal-wk-chip-point .mcal-dot { margin-block-start: 0; }

.mcal-wk-slot-now {
    box-shadow: inset 0 1px 0 var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mcal-wk-col-today { background: var(--motiva-color-brand-bg); }

.mcal-wk-dayhead.mcal-wk-col-today .mcal-wk-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding-inline: 4px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: #fff;
}

.mcal-wk-col-sel,
.mcal-wk-dayhead:hover,
.mcal-wk-alldaycell:hover { background: var(--motiva-surface-hover); }

.mcal-wk-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 3px 6px;
    border: 0;
    border-radius: 7px;
    background: var(--mcal-item-bg, var(--motiva-surface-secondary));
    color: var(--mcal-item-ink, var(--motiva-text-primary));
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-wk-chip:hover { filter: brightness(0.96); }
.mcal-wk-chip .mcal-dot { background: var(--mcal-item-ink, currentColor); }
.mcal-wk-chip:hover { background: var(--motiva-surface-hover); }

.mcal-wk-chip:focus-visible,
.mcal-wk-more:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.mcal-wk-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcal-wk-more {
    border: 0;
    background: transparent;
    padding: 1px 5px;
    text-align: start;
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
}

.mcal-wk-more:hover { text-decoration: underline; }

/* ── Detail facts (day view) ─────────────────────────────── */

.mcal-facts { margin: 0; display: flex; flex-direction: column; }

.mcal-fact {
    display: flex;
    align-items: baseline;
    gap: var(--motiva-space-md);
    padding-block: 9px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.mcal-fact:last-child { border-block-end: 0; }

.mcal-fact dt {
    flex-shrink: 0;
    width: 76px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.mcal-fact dd {
    margin: 0;
    min-width: 0;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    line-height: var(--motiva-line-height-body);
}

.mcal-fact-time {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* ── Loading / empty ─────────────────────────────────────── */

.mcal-empty { padding-block: var(--motiva-space-xl); }

.mcal-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding-block: 64px;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.mcal-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--motiva-border-strong);
    border-top-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: var(--motiva-radius-full);
    animation: mcal-spin 0.7s linear infinite;
}

@keyframes mcal-spin { to { transform: rotate(360deg); } }

/* ── Narrow ──────────────────────────────────────────────── */

@media (max-width: 900px) {
    .mcal-cell { min-height: 84px; }
    .mcal-item-text { display: none; }

    .mcal-wk { --mcal-wk-gutter: 56px; }
    .mcal-wk-chip-text { display: none; }
    .mcal-wk-dayhead { flex-direction: column; gap: 1px; }
}

/* ============================================================
   THE FINALIZED REFERENCE — date navigation + create CTA
   ============================================================ */

/* ── Date unit ────────────────────────────────────────────── */

.mcal-datenav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--motiva-radius-full);
    background: rgba(255, 255, 255, 0.75);
}

.mcal-navbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-navbtn:hover {
    background: rgba(27, 26, 34, 0.05);
    color: var(--motiva-text-primary);
}

.mcal-period {
    min-width: 120px;
    text-align: center;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-text-primary);
}

.mcal-navsep {
    width: 1px;
    height: 16px;
    flex: 0 0 1px;
    background: rgba(27, 26, 34, 0.1);
}

.mcal-today {
    padding: 7px 12px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-muted);
    font-family: inherit;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-today:hover { color: var(--motiva-color-violet); }

.mcal-navbtn:focus-visible,
.mcal-today:focus-visible,
.mcal-create:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Create CTA ──────────────────────────────────────────── */

.mcal-create.motiva-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.mcal-create-plus {
    font-size: var(--motiva-font-size-lg, 15px);
    line-height: 1;
}

/* ── Legend ──────────────────────────────────────────────── */

.mcal-legend {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 8px 0;
}

.mcal-legend-item,
.mcal-legend-sync {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-muted);
}

.mcal-legend-sync {
    margin-inline-start: auto;
    color: var(--motiva-text-subtle);
}

/* ── Detail drawer ───────────────────────────────────────── */

.mcal-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(27, 26, 34, 0.16);
}

.mcal-drawer {
    position: fixed;
    top: 26px;
    bottom: 26px;
    inset-inline-end: 26px;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 52px);
    padding: 26px 28px;
    border-radius: var(--motiva-radius-xl);
    background: var(--motiva-surface-primary, #fff);
    box-shadow:
        0 2px 4px rgba(27, 26, 34, 0.06),
        0 30px 60px -30px rgba(27, 26, 34, 0.5);
    overflow: auto;
    animation: mcal-drawer-in 200ms var(--motiva-motion-easing-entrance) both;
}

@keyframes mcal-drawer-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mcal-drawer { animation: none; }
}

.mcal-drawer-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcal-drawer-type {
    display: inline-flex;
    padding: 6px 13px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
}

.mcal-drawer-type-meeting      { background: rgba(109, 40, 245, 0.10); color: var(--motiva-color-violet); }
.mcal-drawer-type-personaltask { background: rgba(46, 99, 232, 0.10);  color: var(--motiva-color-blue); }
.mcal-drawer-type-milestone    { background: rgba(27, 26, 34, 0.07);   color: var(--motiva-text-secondary); }
.mcal-drawer-type-submission   { background: rgba(224, 51, 95, 0.10);  color: var(--motiva-color-rose-ink, var(--motiva-color-rose)); }
.mcal-drawer-type-review       { background: rgba(15, 168, 194, 0.12); color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }

.mcal-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-subtle);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-drawer-close:hover {
    background: rgba(27, 26, 34, 0.05);
    color: var(--motiva-text-primary);
}

.mcal-drawer-close:focus-visible,
.mcal-drawer-edit:focus-visible,
.mcal-drawer-go:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mcal-drawer-title {
    margin: 16px 0 0;
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.35;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

.mcal-drawer-facts {
    display: flex;
    flex-direction: column;
    margin-block-start: 18px;
}

.mcal-drawer-fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-block: 11px;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
}

.mcal-drawer-fact:last-child { border-block-end: 0; }

.mcal-drawer-k {
    width: 74px;
    flex: 0 0 74px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.mcal-drawer-v {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

.mcal-drawer-v-attn {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.mcal-drawer-sync-on {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

.mcal-drawer-sync-off {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-subtle);
}

.mcal-drawer-note {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.6;
    color: var(--motiva-text-subtle);
}

.mcal-drawer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: auto;
    padding-block-start: 20px;
}

.mcal-drawer-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid rgba(27, 26, 34, 0.12);
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-secondary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mcal-drawer-edit:hover {
    border-color: rgba(27, 26, 34, 0.3);
    color: var(--motiva-text-primary);
}

.mcal-drawer-go.motiva-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

@media (max-width: 720px) {
    .mcal-drawer {
        top: auto;
        bottom: 0;
        inset-inline: 0;
        width: auto;
        max-width: none;
        max-height: 82vh;
        border-radius: var(--motiva-radius-xl) var(--motiva-radius-xl) 0 0;
    }
}