.fc {
    --fc-small-font-size:              var(--bsd-text-xs);
    --fc-page-bg-color:                transparent;

    --fc-neutral-bg-color:             var(--bsd-surface-2);
    --fc-neutral-text-color:           var(--bsd-text-muted);

    --fc-border-color:                 var(--bsd-border);

    --fc-button-text-color:            var(--bsd-text-2);
    --fc-button-bg-color:              var(--bsd-surface);
    --fc-button-border-color:          var(--bsd-border-2);
    --fc-button-hover-bg-color:        var(--bsd-surface-3);
    --fc-button-hover-border-color:    var(--bsd-border-2);
    --fc-button-active-bg-color:       var(--bsd-primary);
    --fc-button-active-border-color:   var(--bsd-primary);

    --fc-event-bg-color:               var(--bsd-primary-bg);
    --fc-event-border-color:           var(--bsd-brand-300);
    --fc-event-text-color:             var(--bsd-brand-700);
    --fc-event-selected-overlay-color: rgb(0 0 0 / 0.12);

    --fc-more-link-bg-color:           var(--bsd-surface-3);
    --fc-more-link-text-color:         var(--bsd-text-2);

    --fc-event-resizer-thickness:      6px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;

    --fc-non-business-color:           rgb(148 163 184 / 0.08);
    --fc-bg-event-color:               var(--bsd-emerald-400);
    --fc-bg-event-opacity:             0.3;
    --fc-highlight-color:              var(--bsd-primary-bg);
    --fc-today-bg-color:               var(--bsd-primary-bg);
    --fc-now-indicator-color:          var(--bsd-danger);

    font-family: var(--bsd-font);
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text);
}

/* Daygrid + list-specific variables (also part of FullCalendar's API) */
.fc-daygrid-event-dot,
.fc .fc-daygrid-event-dot {
    border-width: 4px;
}
.fc {
    --fc-daygrid-event-dot-width:      8px;
    --fc-list-event-hover-bg-color:    var(--bsd-surface-2);
    --fc-list-event-dot-width:         10px;
}


/* ── 2. ROOT / SCROLLGRID ─────────────────────────────────── */
.fc {
    background: var(--bsd-surface);
    border-radius: var(--bsd-r-md);
}

.fc .fc-scrollgrid {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    overflow: hidden;
}

.fc .fc-scrollgrid,
.fc .fc-scrollgrid table {
    border-collapse: separate;
}

.fc .fc-scrollgrid-section > * {
    border: none;
}

.fc theme,
.fc table {
    font-size: var(--bsd-text-sm);
}


/* ── 3. TOOLBAR ───────────────────────────────────────────── */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: var(--bsd-gap);
    gap: var(--bsd-gap-sm);
    flex-wrap: wrap;
}

.fc .fc-toolbar-title {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bsd-text);
}

.fc .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ── 4. BUTTONS ───────────────────────────────────────────── */
.fc .fc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--bsd-font);
    font-size: var(--bsd-text-xs);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--bsd-r-sm);
    box-shadow: none;
    text-transform: capitalize;
    transition: var(--bsd-t-fast);
}

.fc .fc-button:hover {
    color: var(--bsd-text);
}

.fc .fc-button:focus,
.fc .fc-button-primary:focus {
    box-shadow: var(--bsd-shadow-focus);
    outline: none;
}

.fc .fc-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    color: #fff;
    box-shadow: none;
}

/* Today / prev / next cluster reads as one .bsd-btn-group-like unit */
.fc .fc-button-group {
    gap: 0;
}

.fc .fc-button-group > .fc-button {
    border-radius: 0;
}

.fc .fc-button-group > .fc-button:first-child {
    border-top-left-radius: var(--bsd-r-sm);
    border-bottom-left-radius: var(--bsd-r-sm);
}

.fc .fc-button-group > .fc-button:last-child {
    border-top-right-radius: var(--bsd-r-sm);
    border-bottom-right-radius: var(--bsd-r-sm);
}

.fc .fc-button-group > .fc-button:not(:first-child) {
    margin-left: -1px;
}

.fc .fc-today-button {
    font-weight: 600;
}

.fc .fc-icon {
    font-size: 1.05em;
}

/* Prev/next chevrons drawn with FullCalendar's icon font by default;
   thin them out so they read like the rest of BSD's line icons. */
.fc .fc-prev-button .fc-icon,
.fc .fc-next-button .fc-icon {
    font-weight: 700;
}


/* ── 5. COLUMN HEADERS (day-of-week row) ─────────────────── */
.fc .fc-col-header {
    background: var(--bsd-surface-2);
}

.fc .fc-col-header-cell {
    border-color: var(--bsd-border);
    padding: 10px 0;
}

.fc .fc-col-header-cell-cushion {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bsd-text-muted);
    padding: 4px 8px;
    text-decoration: none;
}

.fc .fc-col-header-cell.fc-day-today {
    background: #e2e8f0;
}

.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    color: var(--bsd-primary);
}


/* ── 6. DAY GRID (month view) ─────────────────────────────── */
.fc .fc-daygrid-day {
    border-color: var(--bsd-border);
    transition: var(--bsd-t-fast);
}

.fc .fc-daygrid-day-frame {
    padding: 4px;
    min-height: 100px;
}

.fc .fc-daygrid-day:hover {
    background: var(--bsd-surface-2);
}

.fc .fc-daygrid-day-top {
    flex-direction: row;
    padding: 2px 4px 0;
}

.fc .fc-daygrid-day-number {
    font-size: var(--bsd-text-xs);
    font-weight: 600;
    color: var(--bsd-text-2);
    padding: 4px 6px;
    text-decoration: none;
}

.fc .fc-day-other .fc-daygrid-day-number {
    color: var(--bsd-text-faint);
}

.fc .fc-day-today {
    background: #e2e8f0 !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: var(--bsd-r-full);
    background: #e2e8f0;
    color: var(--bsd-text-2);
    font-weight: 700;
    padding: 0;
}

.fc .fc-daygrid-day-events {
    margin-top: 2px;
}

.fc .fc-daygrid-more-link {
    font-size: var(--bsd-text-2xs);
    font-weight: 600;
    color: var(--bsd-text-muted);
    background: var(--bsd-surface-3);
    border-radius: var(--bsd-r-xs);
    padding: 1px 6px;
}

.fc .fc-daygrid-more-link:hover {
    background: var(--bsd-border-2);
    color: var(--bsd-text);
}

.fc .fc-daygrid-week-number {
    background: var(--bsd-surface-2);
    color: var(--bsd-text-faint);
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 0 0 var(--bsd-r-xs) 0;
}


/* ── 7. EVENTS (shared: daygrid + timegrid + list) ────────── */
.fc .fc-event {
    border-radius: var(--bsd-r-xs);
    border-width: 1px;
    font-size: var(--bsd-text-2xs);
    font-weight: 700;
    color: var(--fc-event-text-color);
    box-shadow: var(--bsd-shadow-xs);
    transition: var(--bsd-t-fast);
    cursor: pointer;
}

.fc .fc-event:hover {
    box-shadow: var(--bsd-shadow-sm);
    filter: brightness(0.97);
}

.fc .fc-event.fc-event-mirror {
    box-shadow: var(--bsd-shadow-md);
    opacity: 0.85;
}

.fc .fc-daygrid-event {
    padding: 2px 6px;
    margin-top: 2px;
}

.fc .fc-daygrid-block-event .fc-event-time,
.fc .fc-daygrid-block-event .fc-event-title {
    padding: 0;
    font-weight: 600;
}

.fc .fc-daygrid-dot-event {
    padding: 2px 6px;
    gap: 5px;
}

.fc .fc-daygrid-dot-event .fc-event-title {
    font-weight: 500;
    color: var(--bsd-text-2);
}

.fc .fc-daygrid-event-dot {
    border-color: var(--bsd-brand-400);
}

.fc-event-title,
.fc-event-time {
    font-family: var(--bsd-font);
}

.fc .fc-h-event .fc-event-main-frame,
.fc .fc-v-event .fc-event-main-frame {
    padding: 1px 2px;
}

/* Event color presets — used by assigning eventClassNames in JS,
   e.g. classNames: ['fc-event--success']. Muted tint + a darker,
   legible text color rather than a saturated fill with white text
   — same recipe as .bsd-alert (tint bg, ~700-weight text, 400-tone
   border), so events stay easy to read at small sizes. */
.fc .fc-event--primary { background: var(--bsd-primary-bg); color: var(--bsd-brand-700);  border-color: var(--bsd-brand-300); }
.fc .fc-event--success { background: var(--bsd-success-bg); color: #047857;               border-color: var(--bsd-emerald-400); }
.fc .fc-event--warning { background: var(--bsd-warning-bg); color: #92400e;               border-color: var(--bsd-amber-400); }
.fc .fc-event--danger  { background: var(--bsd-danger-bg);  color: #be123c;               border-color: var(--bsd-rose-400); }
.fc .fc-event--info    { background: var(--bsd-info-bg);    color: #0e7490;               border-color: var(--bsd-cyan-400); }
.fc .fc-event--violet  { background: var(--bsd-violet-100); color: #6d28d9;               border-color: var(--bsd-violet-400); }

/* Kept as aliases so existing markup using the old "soft-" names
   still resolves to the same muted look. */
.fc .fc-event--soft-primary { background: var(--bsd-primary-bg); color: var(--bsd-brand-700); border-color: var(--bsd-brand-300); }
.fc .fc-event--soft-success { background: var(--bsd-success-bg); color: #047857;              border-color: var(--bsd-emerald-400); }
.fc .fc-event--soft-warning { background: var(--bsd-warning-bg); color: #92400e;              border-color: var(--bsd-amber-400); }
.fc .fc-event--soft-danger  { background: var(--bsd-danger-bg);  color: #be123c;              border-color: var(--bsd-rose-400); }

.fc .fc-event--primary .fc-event-title,
.fc .fc-event--success .fc-event-title,
.fc .fc-event--warning .fc-event-title,
.fc .fc-event--danger  .fc-event-title,
.fc .fc-event--info    .fc-event-title,
.fc .fc-event--violet  .fc-event-title,
.fc .fc-event--soft-primary .fc-event-title,
.fc .fc-event--soft-success .fc-event-title,
.fc .fc-event--soft-warning .fc-event-title,
.fc .fc-event--soft-danger  .fc-event-title {
    color: inherit;
}

.fc .fc-event-resizer {
    background: rgba(0,0,0,0.3);
    border-radius: var(--bsd-r-full);
}


/* ── 8. TIME GRID (week/day view) ─────────────────────────── */
.fc .fc-timegrid-axis {
    font-size: var(--bsd-text-2xs);
    color: var(--bsd-text-faint);
}

.fc .fc-timegrid-axis-cushion {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc .fc-timegrid-slot {
    height: 2.6em;
    border-color: var(--bsd-border);
}

.fc .fc-timegrid-slot-label-cushion {
    font-size: var(--bsd-text-2xs);
    color: var(--bsd-text-faint);
    padding: 0 8px;
}

.fc .fc-timegrid-slot.fc-timegrid-slot-minor {
    border-top-style: dashed;
    border-top-color: var(--bsd-border);
}

.fc .fc-timegrid-col.fc-day-today {
    background: #e2e8f0 !important;
}

.fc .fc-timegrid-now-indicator-line {
    border-color: var(--bsd-danger);
    border-width: 1.5px 0 0;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--bsd-danger);
    border-width: 5px 3px;
    margin-top: -5px;
}

.fc .fc-timegrid-event {
    border-radius: var(--bsd-r-xs);
    box-shadow: var(--bsd-shadow-xs);
}

.fc .fc-timegrid-event .fc-event-main {
    padding: 4px 6px;
}

.fc .fc-timegrid-event .fc-event-time {
    font-size: var(--bsd-text-2xs);
    opacity: 0.85;
}

.fc .fc-timegrid-more-link {
    background: var(--bsd-surface-3);
    color: var(--bsd-text-2);
    border-radius: var(--bsd-r-xs);
    font-size: var(--bsd-text-2xs);
}

.fc .fc-timegrid-divider {
    background: var(--bsd-surface-2);
    border-color: var(--bsd-border);
}


/* ── 9. LIST VIEW ──────────────────────────────────────────── */
.fc .fc-list {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
}

.fc .fc-list-day-cushion {
    background: var(--bsd-surface-2);
    padding: 10px 16px;
}

.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bsd-text-muted);
    text-decoration: none;
}

.fc .fc-list-table td {
    border-color: var(--bsd-border);
    padding: 10px 16px;
}

.fc .fc-list-event {
    transition: var(--bsd-t-fast);
    cursor: pointer;
}

.fc .fc-list-event:hover td {
    background: var(--bsd-surface-2);
}

.fc .fc-list-event-dot {
    border-color: var(--bsd-brand-400);
}

.fc .fc-list-event-time {
    color: var(--bsd-text-muted);
    font-size: var(--bsd-text-xs);
    white-space: nowrap;
}

.fc .fc-list-event-title {
    font-size: var(--bsd-text-sm);
    color: var(--bsd-text);
    font-weight: 500;
}

.fc .fc-list-empty {
    background: var(--bsd-surface);
    color: var(--bsd-text-muted);
    font-size: var(--bsd-text-sm);
}

.fc .fc-list-empty-cushion {
    padding: 48px 24px;
}


/* ── 10. MULTI-MONTH VIEW ─────────────────────────────────── */
.fc .fc-multimonth {
    border: none;
    gap: var(--bsd-gap);
}

.fc .fc-multimonth-month {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    overflow: hidden;
}

.fc .fc-multimonth-title {
    font-family: var(--bsd-font-display);
    font-size: var(--bsd-text-sm);
    font-weight: 700;
    color: var(--bsd-text);
    padding: 12px 14px 4px;
}


/* ── 11. POPOVER (day "+N more" overflow) ─────────────────── */
.fc .fc-popover {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-r-md);
    box-shadow: var(--bsd-shadow-lg);
    background: var(--bsd-surface);
    overflow: hidden;
}

.fc .fc-popover-header {
    background: var(--bsd-surface-2);
    padding: 8px 12px;
    font-size: var(--bsd-text-xs);
    font-weight: 700;
    color: var(--bsd-text);
}

.fc .fc-popover-close {
    opacity: 0.6;
    transition: var(--bsd-t-fast);
}

.fc .fc-popover-close:hover {
    opacity: 1;
}

.fc .fc-popover-body {
    padding: 6px;
}


/* ── 12. MISC: highlight, non-business, drag/resize ───────── */
.fc .fc-highlight {
    background: var(--bsd-primary-bg);
    opacity: 0.6;
}

.fc .fc-non-business {
    background: var(--fc-non-business-color);
}

.fc .fc-day-disabled {
    background: var(--bsd-surface-2);
}

.fc .fc-event-dragging {
    box-shadow: var(--bsd-shadow-lg);
}

.fc .fc-highlight,
.fc .fc-cell-shaded {
    border-radius: 0;
}

.fc a {
    color: inherit;
}

.fc .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--bsd-border-2) transparent;
}

.fc .fc-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fc .fc-scroller::-webkit-scrollbar-thumb {
    background: var(--bsd-border-2);
    border-radius: var(--bsd-r-full);
}


/* ── 13. DARK THEME ────────────────────────────────────────
   Mirrors BSD-Stylesheet.css's [data-bsd-theme="dark"] switch —
   put that attribute on a shared ancestor and both sheets
   flip together.
   ────────────────────────────────────────────────────────── */
[data-bsd-theme="dark"] .fc {
    --fc-neutral-bg-color: var(--bsd-surface-2);
    --fc-non-business-color: rgb(0 0 0 / 0.15);
}

[data-bsd-theme="dark"] .fc .fc-daygrid-day:hover,
[data-bsd-theme="dark"] .fc .fc-list-event:hover td {
    background: var(--bsd-surface-3);
}

[data-bsd-theme="dark"] .fc .fc-event-resizer {
    background: rgba(0,0,0,0.6);
}


/* ── 14. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 640px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .fc .fc-toolbar-title {
        font-size: var(--bsd-text-lg);
        text-align: center;
    }
    .fc .fc-daygrid-day-frame {
        min-height: 70px;
    }
}