/* =============================================================================
   DEX CRM - Calendar
   A modern, soft, minimal month / week / day / list calendar.
   ============================================================================= */

.calendar-surface { overflow: hidden; }

/* ---- toolbar ------------------------------------------------------------- */
.cal-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--gutter);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}
.cal-toolbar__left, .cal-toolbar__right { display: flex; align-items: center; gap: 8px; }
.cal-toolbar__label {
    font-size: 16px; font-weight: 650; color: var(--text-primary);
    letter-spacing: -0.01em; margin-left: 4px; white-space: nowrap;
}

.cal-icon-button {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--border-default, #e3e7eb);
    border-radius: var(--radius-button);
    background: var(--surface-panel, #fff);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cal-icon-button:hover { background: var(--surface-hover, #f5f7f9); color: var(--text-primary); }
.cal-icon-button--tiny { width: 26px; height: 26px; border: none; background: transparent; }

.cal-viewswitch {
    display: inline-flex;
    background: var(--surface-sunken, #f1f3f5);
    border-radius: var(--radius-medium);
    padding: 3px;
    gap: 2px;
}
.cal-viewswitch__button {
    border: none; background: transparent;
    padding: 5px 12px; border-radius: var(--radius-button);
    font: inherit; font-size: 13px; font-weight: 550;
    color: var(--text-muted); cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.cal-viewswitch__button:hover { color: var(--text-primary); }
.cal-viewswitch__button--active {
    background: var(--surface-panel, #fff); color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
.cal-search { max-width: 220px; }

/* ---- body: sidebar + main ------------------------------------------------ */
.cal-body { display: flex; flex: 1; min-height: 0; }

.cal-sidebar {
    flex: none; width: 224px;
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    padding: 14px 12px 24px;
    background: var(--surface-panel, #fff);
}
.cal-sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-muted);
    padding: 0 6px 8px;
}
.cal-sidebar__group {
    font-size: 11px; font-weight: 650; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.03em;
    padding: 12px 6px 4px;
}

/* A heading that carries a control. The padding above is asymmetric, so the
   button is nudged back down to sit on the text rather than above it. */
.cal-sidebar__group--with-action {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cal-sidebar__group--with-action .cal-icon-button {
    margin-top: -4px;
}

.cal-cal-row {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 6px; border-radius: var(--radius-button); cursor: pointer;
    transition: background 120ms ease;
}
.cal-cal-row:hover { background: var(--surface-hover, #f5f7f9); }
.cal-cal-row__check { position: relative; display: inline-flex; flex: 0 0 auto; }
.cal-cal-row__check input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.cal-cal-row__box {
    width: 16px; height: 16px; border-radius: 5px;
    background: var(--cal-colour); border: 1px solid var(--cal-colour);
    display: inline-block; position: relative;
    transition: opacity 120ms ease;
}
.cal-cal-row__check input:checked + .cal-cal-row__box::after {
    content: ''; position: absolute; left: 4.5px; top: 1.5px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cal-cal-row--off .cal-cal-row__box { opacity: 0.28; }
.cal-cal-row__name {
    flex: 1; font-size: 13px; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-cal-row--off .cal-cal-row__name { color: var(--text-muted); }
.cal-cal-row__manage {
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; opacity: 0; padding: 2px; display: grid; place-items: center;
    transition: opacity 120ms ease;
}
.cal-cal-row:hover .cal-cal-row__manage { opacity: 0.7; }
.cal-cal-row__manage:hover { opacity: 1; color: var(--text-primary); }

.cal-main { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; }


/* ---- MONTH --------------------------------------------------------------- */
.cal-month { display: flex; flex-direction: column; flex: 1; min-height: 520px; }
.cal-month__weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-subtle);
}
.cal-month__weekday {
    padding: 8px 10px; font-size: 11px; font-weight: 650;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted);
    text-align: right;
}
.cal-month__grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr; flex: 1;
}
.cal-month__cell {
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 4px 5px 6px; min-height: 92px;
    display: flex; flex-direction: column; gap: 3px;
    cursor: pointer; overflow: hidden;
    transition: background 100ms ease;
}
.cal-month__cell:nth-child(7n) { border-right: none; }
.cal-month__cell:hover { background: var(--surface-hover, #f7f8fa); }
.cal-month__cell--muted { background: var(--surface-sunken, #fafbfc); }
.cal-month__cell--muted .cal-month__date { color: var(--text-disabled, #b6bdc7); }
.cal-month__cell--drop { background: rgba(99, 102, 241, 0.1); box-shadow: inset 0 0 0 2px var(--accent, #6366f1); }
.cal-month__date { font-size: 12.5px; font-weight: 550; color: var(--text-secondary, #475467); text-align: right; padding: 1px 3px; }
.cal-month__cell--today .cal-month__date span {
    background: var(--accent, #6366f1); color: #fff;
    border-radius: 999px; padding: 1px 7px; display: inline-block;
}
.cal-month__items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-month__more {
    border: none; background: transparent; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 1px 4px;
}
.cal-month__more:hover { color: var(--accent, #6366f1); }

/* ---- chips (month) ------------------------------------------------------- */
.cal-chip {
    display: flex; align-items: center; gap: 5px;
    width: 100%; border: none; text-align: left; cursor: pointer;
    padding: 2px 6px; border-radius: var(--radius-button);
    background: color-mix(in srgb, var(--chip) 14%, transparent);
    color: var(--text-primary);
    font-size: 11.5px; line-height: 1.35;
    overflow: hidden; white-space: nowrap;
}
.cal-chip:hover { background: color-mix(in srgb, var(--chip) 24%, transparent); }
.cal-chip__time { color: var(--chip); font-weight: 650; flex: none; }
.cal-chip__title { overflow: hidden; text-overflow: ellipsis; }
.cal-chip::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--chip); flex: none;
}
.cal-chip--cancelled { text-decoration: line-through; opacity: 0.55; }
.cal-chip--dragging, .cal-block--dragging { opacity: 0.4; }

/* ---- TIME GRID (week / day) --------------------------------------------- */
.cal-time { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cal-time__header { display: flex; border-bottom: 1px solid var(--border-subtle); flex: none; }
.cal-time__gutter-head { width: 56px; flex: none; }
.cal-time__dayhead {
    flex: 1; border-left: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 4px; background: transparent; border-top: none; border-right: none; border-bottom: none;
    cursor: pointer;
}
.cal-time__dayhead:hover { background: var(--surface-hover, #f7f8fa); }
.cal-time__dayname { font-size: 11px; font-weight: 650; text-transform: uppercase; color: var(--text-muted); }
.cal-time__daynum { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.cal-time__dayhead--today .cal-time__daynum {
    background: var(--accent, #6366f1); color: #fff; border-radius: 999px;
    width: 30px; height: 30px; display: grid; place-items: center;
}
/* The all-day band, between the day headers and the hours.

   Tasks are due on a day, leave covers days, and a DEX event can be all-day.
   None of those belong anywhere in a grid of hours, so they sit here. The
   56px label column lines up with the hour gutter below, so a chip sits over
   the day it belongs to. */
.cal-time__allday {
    display: flex; flex: none;
    border-bottom: 1px solid var(--border-default);
    max-height: 132px; overflow-y: auto;
}
.cal-time__allday-label {
    width: 56px; flex: none;
    padding: 6px 8px 6px 0; text-align: right;
    font-size: 10.5px; font-weight: 600; color: var(--text-muted);
}
.cal-time__allday-cell {
    flex: 1; min-width: 0;
    border-left: 1px solid var(--border-subtle);
    padding: 4px; display: flex; flex-direction: column; gap: 3px;
}
.cal-time__allday-cell--today { background: rgba(99, 102, 241, 0.04); }
/* Still drawn when there is nothing in it, so the hours below do not shift up
   and down as you page from one week to the next. */
.cal-time__allday--empty .cal-time__allday-cell { min-height: 20px; }

.cal-time__scroll { display: flex; flex: 1; overflow-y: auto; min-height: 0; }
.cal-time__gutter { width: 56px; flex: none; }
.cal-time__hour { position: relative; border-bottom: 1px solid var(--border-subtle); }
.cal-time__hour span {
    position: absolute; top: -8px; right: 8px; font-size: 10.5px; color: var(--text-muted); background: var(--surface-panel, #fff); padding: 0 2px;
}
.cal-time__col { position: relative; flex: 1; border-left: 1px solid var(--border-subtle); }
.cal-time__slot { border-bottom: 1px solid var(--border-subtle); }
.cal-time__col:hover { background: rgba(99, 102, 241, 0.015); }

.cal-block {
    position: absolute; box-sizing: border-box;
    border-radius: var(--radius-button); padding: 3px 7px; cursor: grab; overflow: hidden;
    background: color-mix(in srgb, var(--chip) 16%, var(--surface-panel, #fff));
    border-left: 3px solid var(--chip);
    color: var(--text-primary); font-size: 11.5px; line-height: 1.3;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: box-shadow 120ms ease;
    user-select: none;
}
.cal-block:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.14); z-index: 4; }
.cal-block__time { display: block; font-weight: 650; color: var(--chip); font-size: 10.5px; }
.cal-block__title { display: block; overflow: hidden; text-overflow: ellipsis; }
.cal-block--cancelled { text-decoration: line-through; opacity: 0.6; }
/* An overlay block is somebody else's record shown here, not an event you can
   drag. The cursor says so before you try. */
.cal-block--overlay { cursor: pointer; }
/* A shift is the canvas for somebody's day, not an appointment on it, so it is
   drawn full width behind the real events: an 11am meeting inside a 10-to-6
   shift sits ON the shift rather than in a lane beside it.
   pointer-events are off deliberately. Without that, a full-width backdrop
   would swallow every click across the busiest eight hours of the day and
   "click an empty slot to add an event" would quietly stop working there.
   Nothing is lost: a shift has no click-through by design, and leave is an
   all-day item, so it stays clickable in the all-day band above. */
.cal-block--behind {
    z-index: 0; pointer-events: none; cursor: default; box-shadow: none;
    background: color-mix(in srgb, var(--chip) 10%, var(--surface-panel, #fff));
}
.cal-block__resize {
    position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
    cursor: ns-resize; border-radius: 0 0 5px 5px;
}
.cal-block__resize::after {
    content: ''; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 2px;
    transform: translateX(-50%); border-radius: 2px;
    background: var(--chip); opacity: 0; transition: opacity 120ms ease;
}
.cal-block:hover .cal-block__resize::after { opacity: 0.5; }
.cal-block--dragging {
    z-index: 20; cursor: grabbing; opacity: 0.92;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.22);
}
body.cal-dragging { cursor: grabbing; user-select: none; }
body.cal-dragging * { cursor: grabbing !important; }
.cal-cal-row--drop {
    background: color-mix(in srgb, var(--cal-colour, #6366f1) 18%, transparent);
    outline: 2px dashed color-mix(in srgb, var(--cal-colour, #6366f1) 55%, transparent);
    outline-offset: -2px; border-radius: var(--radius-button);
}


/* ---- AGENDA / LIST ------------------------------------------------------- */
.cal-agenda { padding: 8px var(--gutter) 32px; display: flex; flex-direction: column; gap: 4px; }
.cal-agenda__group { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.cal-agenda__group:last-child { border-bottom: none; }
.cal-agenda__date { flex: 0 0 64px; display: flex; flex-direction: column; align-items: flex-start; }
.cal-agenda__daynum { font-size: 22px; font-weight: 650; color: var(--text-primary); line-height: 1; }
.cal-agenda__daymeta { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 2px; }
.cal-agenda__date--today .cal-agenda__daynum { color: var(--accent, #6366f1); }
.cal-agenda__rows { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-agenda__row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: none; background: transparent; text-align: left;
    padding: 8px 10px; border-radius: var(--radius-button); cursor: pointer;
    transition: background 120ms ease;
}
.cal-agenda__row:hover { background: var(--surface-hover, #f5f7f9); }
.cal-agenda__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cal-agenda__when { flex: 0 0 130px; font-size: 12.5px; color: var(--text-secondary, #475467); font-weight: 550; }
.cal-agenda__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-agenda__title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.cal-agenda__meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

/* ---- EVENT FORM (slide-over) --------------------------------------------- */
.cal-event-form { display: flex; flex-direction: column; gap: 4px; }
.cal-form-section { padding: 6px 0 14px; border-bottom: 1px solid var(--border-subtle); }
.cal-form-section:last-child { border-bottom: none; }
.cal-form-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 4px 0 10px; }
.cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cal-event-form .form-field { margin-bottom: 12px; }
.cal-event-form .form-field__label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary, #475467); margin-bottom: 5px; }
.cal-event-form textarea.form-field__control { resize: vertical; min-height: 68px; }
.cal-form-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; margin: 2px 0 12px; }
.cal-form-check input { width: 16px; height: 16px; accent-color: var(--accent, #6366f1); }

/* ---- responsive / mobile ------------------------------------------------- */
@media (max-width: 900px) {
    .cal-sidebar {
        position: absolute; left: 0; top: 0; bottom: 0; z-index: 20;
        transform: translateX(-100%); transition: transform 200ms ease;
        box-shadow: 4px 0 20px rgba(16, 24, 40, 0.12);
    }
    .cal-sidebar--open { transform: translateX(0); }
    .cal-body { position: relative; }
    .cal-search { max-width: 150px; }
    .cal-month__cell { min-height: 68px; }
    .cal-chip__time { display: none; }
    .cal-agenda__when { flex-basis: 92px; }
    .cal-form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 901px) {
    .cal-sidebar-toggle { display: none; }
}


/* ---- SETTINGS PANEL ------------------------------------------------------ */
.cal-settings { display: flex; flex-direction: column; gap: 16px; }
.cal-settings__tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle);
    position: sticky; top: 0; background: var(--surface-panel, #fff); z-index: 1;
}
.cal-settings__tab {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cal-settings__tab:hover { color: var(--text-primary); }
.cal-settings__tab--active { color: var(--accent, #6366f1); border-bottom-color: var(--accent, #6366f1); }
.cal-settings__content { display: flex; flex-direction: column; gap: 14px; }
.cal-settings__hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.cal-settings__form { display: flex; flex-direction: column; gap: 12px; }

.cal-type-list { display: flex; flex-direction: column; gap: 6px; }
.cal-type-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-button); background: var(--surface-panel, #fff);
}
.cal-type-row--off { opacity: 0.55; }
.cal-type-row__swatch {
    flex: none; width: 30px; height: 30px; border-radius: var(--radius-button); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: var(--sw, #6366f1);
}
.cal-type-row__name { flex: 1; min-width: 0; }
.cal-type-row__toggle { position: relative; flex: none; width: 34px; height: 20px; cursor: pointer; }
.cal-type-row__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-type-row__toggle span {
    position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background 140ms ease;
}
.cal-type-row__toggle span::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform 140ms ease;
}
.cal-type-row__toggle input:checked + span { background: var(--accent, #6366f1); }
.cal-type-row__toggle input:checked + span::after { transform: translateX(14px); }
.cal-type-row__del { color: #ef4444; }
.cal-type-add { margin-top: 6px; }

.cal-perm-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-perm-row { display: flex; gap: 10px; align-items: baseline; }
.cal-perm-row__key {
    flex: none; font-size: 12px; background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
    color: var(--accent, #6366f1); padding: 2px 7px; border-radius: var(--radius-button); font-family: ui-monospace, monospace;
}
.cal-perm-row__desc { font-size: 13px; color: var(--text-primary); }

.cal-integration { display: flex; flex-direction: column; gap: 8px; }
.cal-integration__row {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-button);
}
.cal-integration__icon {
    flex: none; width: 34px; height: 34px; border-radius: var(--radius-button); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.cal-integration__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-integration__title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.cal-integration__desc { font-size: 12px; color: var(--text-muted); }
.cal-integration__status {
    flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-button);
}
.cal-integration__status--on { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.cal-integration__status--soon { background: rgba(100, 116, 139, 0.14); color: #64748b; }

/* Compact density: tighten the month cells and time grid. */
.calendar-surface--compact .cal-month__cell { min-height: 78px; }
.calendar-surface--compact .cal-chip { padding: 1px 6px; font-size: 10.5px; }
.calendar-surface--compact .cal-block { font-size: 10.5px; padding: 2px 6px; }


/* ==== v3 - modern event panel + polish ==================================== */

/* Event panel: sectioned cards with an icon-led heading. */
.cal-event-form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.cal-form-section {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-button);
    padding: 14px 14px 4px; background: var(--surface-panel, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.cal-form-heading {
    display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
}
.cal-form-heading__icon {
    width: 26px; height: 26px; border-radius: var(--radius-button); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
    color: var(--accent, #6366f1);
}
.cal-event-form .form-field { margin-bottom: 12px; }
.cal-event-form .form-field__label {
    display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px;
}
.cal-title-input { font-size: 15px; font-weight: 600; }
.cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* all-day switch */
.cal-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 12px; }
.cal-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-switch__track {
    position: relative; width: 38px; height: 22px; border-radius: 999px;
    background: #cbd5e1; transition: background 140ms ease; flex: none;
}
.cal-switch__track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 140ms ease;
}
.cal-switch input:checked + .cal-switch__track { background: var(--accent, #6366f1); }
.cal-switch input:checked + .cal-switch__track::after { transform: translateX(16px); }
.cal-switch__text { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* colour swatch picker */
.cal-colour-picker { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 2px; }
.cal-swatch {
    width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--sw, #6366f1); position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
    transition: transform 100ms ease;
}
.cal-swatch:hover { transform: scale(1.12); }
.cal-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--surface-panel, #fff), 0 0 0 4px var(--sw, #6366f1);
}
.cal-swatch--auto {
    background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% / 10px 10px;
}
.cal-swatch--auto .cal-swatch__auto {
    position: absolute; inset: 5px; border-radius: 50%; background: #6366f1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.cal-swatch--auto.is-selected {
    box-shadow: 0 0 0 2px var(--surface-panel, #fff), 0 0 0 4px var(--accent, #6366f1);
}

/* completed / cancelled events read as crossed-out across every view */
.cal-chip--done { opacity: 0.62; }
.cal-chip--done .cal-chip__title { text-decoration: line-through; }
.cal-block--done { opacity: 0.62; }
.cal-block--done .cal-block__title { text-decoration: line-through; }
.cal-agenda__row--done, .cal-agenda__row--cancelled { opacity: 0.55; }
.cal-agenda__row--done .cal-agenda__title,
.cal-agenda__row--cancelled .cal-agenda__title { text-decoration: line-through; }

/* ---- people picker (staff + contacts) ---- */
.cal-emp-picker { display: flex; flex-direction: column; gap: 8px; }
.cal-emp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-emp-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px;
    border-radius: var(--radius-button); font-size: 12.5px; font-weight: 550; color: var(--text-primary);
    background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
}
.cal-emp-chip__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--text-muted);
}
.cal-emp-chip__x:hover { background: rgba(0, 0, 0, 0.08); color: var(--text-primary); }
.cal-emp-add { font-size: 13px; }
/* Marks a chip whose person is a CRM contact rather than a member of staff. */
.cal-emp-chip__kind {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 2px 5px; border-radius: 4px; color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted, #8b93a7) 16%, transparent);
}

/* The type-ahead: an input with the matches dropped beneath it. */
.cal-people-box { position: relative; }
.cal-people-search { font-size: 13px; width: 100%; }
.cal-people-results {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 264px; overflow-y: auto; padding: 4px;
    background: var(--surface-raised, #fff);
    border: 1px solid var(--border-subtle, #eceef3);
    border-radius: var(--radius-card, 10px);
    box-shadow: 0 10px 28px rgba(16, 20, 32, 0.14);
}
.cal-people-results[hidden] { display: none; }
.cal-people-row {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
    border: none; border-radius: 8px; background: transparent; cursor: pointer;
    text-align: left; color: var(--text-primary);
}
.cal-people-row:hover, .cal-people-row.is-active {
    background: color-mix(in srgb, var(--accent, #6366f1) 10%, transparent);
}
/* A face is one disc holding either the photo or the monogram. The wrapper has
   to state the size: .avatar-photo fills 100% of it, so an unsized wrapper lets
   a full-resolution portrait through at its natural size. */
.cal-emp-chip__face,
.cal-people-row__face {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; overflow: hidden; border-radius: 50%;
    background: var(--accent, #6366f1); color: #fff;
    font-weight: 700; letter-spacing: 0.02em;
}
.cal-emp-chip__face { width: 20px; height: 20px; font-size: 9px; }
.cal-people-row__face { width: 26px; height: 26px; font-size: 10px; }
.cal-people-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cal-people-row__name {
    font-size: 13px; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-people-row__meta {
    font-size: 11px; color: var(--text-muted); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-people-row__kind {
    flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
    color: var(--accent, #6366f1);
    background: color-mix(in srgb, var(--accent, #6366f1) 13%, transparent);
}
.cal-people-row__kind--contact {
    color: #0f8a5f;
    background: color-mix(in srgb, #0f8a5f 13%, transparent);
}
.cal-people-empty {
    margin: 0; padding: 10px 8px; font-size: 12.5px; color: var(--text-muted);
}

/* ---- event notes: the ticket comment thread, inside the event card ---- */
.cal-notes .task-composer { margin-bottom: 12px; }
.cal-notes .cal-note-delete {
    margin-left: auto; display: inline-flex; align-items: center;
    padding: 2px; border: none; background: none; cursor: pointer;
    color: var(--text-muted); opacity: 0; transition: opacity 0.12s ease;
}
.cal-notes .task-comment:hover .cal-note-delete,
.cal-notes .cal-note-delete:focus-visible { opacity: 1; }
.cal-notes .cal-note-delete:hover { color: var(--danger, #d64545); }

/* ---- VIEW card (existing event) ---- */
.cal-event-card { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.cal-card { display: flex; flex-direction: column; gap: 14px; }
.cal-card__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 4px 2px 14px; border-bottom: 1px solid var(--border-subtle);
}
.cal-card__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--chip, #6366f1); flex: none; }
.cal-card-row--title { flex: 1; min-width: 0; padding: 0; }
.cal-card-row--title .cal-card-row__value {
    font-size: 18px; font-weight: 650; color: var(--text-primary);
}
.cal-card-status {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-button); flex: none;
}
.cal-card-status--live { background: rgba(99, 102, 241, 0.14); color: #4f46e5; }
.cal-card-status--done { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.cal-card-status--cancelled { background: rgba(100, 116, 139, 0.16); color: #64748b; }

.cal-card-section {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-button); padding: 12px 14px;
    background: var(--surface-panel, #fff); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.cal-card-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px; margin: 0 -8px;
    border-radius: var(--radius-button); cursor: pointer; transition: background 100ms ease;
}
.cal-card-section .cal-card-row + .cal-card-row { border-top: 1px solid var(--border-subtle); }
.cal-card-row:hover { background: color-mix(in srgb, var(--accent, #6366f1) 5%, transparent); }
.cal-card-row__label {
    flex: 0 0 118px; font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.cal-card-row__value {
    flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-primary);
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.cal-card-row__edit {
    flex: none; color: var(--text-disabled, #b6bdc7); opacity: 0; transition: opacity 100ms ease;
}
.cal-card-row:hover .cal-card-row__edit { opacity: 0.8; }
.cal-card-row[data-editing] { background: none; cursor: default; }
.cal-card-row[data-editing] .cal-card-row__value { display: block; }
.cal-card-swatch {
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cal-when-editor { display: flex; flex-direction: column; gap: 8px; }
.cal-when-editor .button--small, .cal-card-row .button--small { align-self: flex-start; }
.button--small { padding: 5px 10px; font-size: 12.5px; }

/* --- calendar surface polish (less plain) --- */
.cal-month__weekdays { background: var(--surface-sunken, #fafbfc); }
.cal-month__cell--today {
    background: color-mix(in srgb, var(--accent, #6366f1) 5%, transparent);
}
.cal-chip {
    font-weight: 550; padding-left: 9px;
    box-shadow: inset 3px 0 0 var(--chip);
    transition: transform 100ms ease, background 120ms ease;
}
.cal-chip::before { display: none; }
.cal-chip:hover { transform: translateX(1px); }
.cal-time__dayhead--today .cal-time__dayname { color: var(--accent, #6366f1); }

/* VIEW overlays (tasks / leave / shifts) read as lighter, tagged chips */
.cal-chip--overlay {
    background: color-mix(in srgb, var(--chip) 9%, transparent);
    box-shadow: inset 3px 0 0 var(--chip);
}
.cal-chip--overlay .cal-chip__title { font-weight: 500; }
.cal-chip--overlay .cal-chip__time { color: var(--chip); }
/* Shifts are display-only - don't invite a click. */
.cal-chip--ov-shift { cursor: default; }
.cal-chip--ov-shift:hover { transform: none; }
.cal-agenda__row--ov-shift { cursor: default; }
.cal-agenda__row--overlay .cal-agenda__meta { color: var(--chip, var(--text-muted)); font-weight: 600; }