/* ── Nepali Date Picker ──────────────────────────────────────── */
.ndp-wrapper,
.ndp-range-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
    /* must NOT have overflow:hidden — popup escapes via position:fixed */
    overflow: visible;
}

.ndp-field {
    cursor: pointer !important;
}

    .ndp-field input {
        cursor: pointer !important;
    }

/* ── Segmented date input (MudDatePicker-style) ──────────────────────────── */
.ndp-input {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ndp-label {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    margin-bottom: 4px;
    font-weight: 500;
}

.ndp-input-body {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 4px 0 10px;
    height: 40px;
    min-width: 190px;
    border: 1px solid var(--mud-palette-lines-default, #d1d5db);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    cursor: text;
    user-select: none;
}

/* Range single-line combined input */
.ndp-range-single-body {
    min-width: 260px;
    gap: 6px;
    cursor: pointer;
}

.ndp-range-text {
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, #111827);
    white-space: nowrap;
}

.ndp-range-text.empty {
    color: var(--mud-palette-text-disabled, #9ca3af);
    font-style: italic;
}

.ndp-range-arrow {
    color: var(--mud-palette-text-secondary, #6b7280);
    font-size: .85rem;
    flex-shrink: 0;
}

    .ndp-input-body.focused,
    .ndp-input.focused .ndp-input-body {
        border-color: var(--mud-palette-primary, #6366f1);
        box-shadow: 0 0 0 1px var(--mud-palette-primary, #6366f1);
    }

.ndp-input.error .ndp-input-body {
    border-color: var(--mud-palette-error, #ef4444);
}

.ndp-input.disabled .ndp-input-body {
    background: var(--mud-palette-background-grey, #f3f4f6);
    opacity: .65;
    cursor: not-allowed;
}

/* Each year/month/day segment. The .active class shows the "selected" highlight. */
.ndp-seg {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: .9rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary, #111827);
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .1s ease, color .1s ease;
    min-width: 1.4ch;
    text-align: center;
}

@keyframes ndp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Backdrop — covers viewport, behind popup, above everything else */
.ndp-backdrop {
    position: fixed !important;
    inset: 0;
    z-index: 9998 !important;
    background: transparent;
}

/* Popup — floats above ALL MudBlazor layers (dialogs=1300, overlays=1200) */
.ndp-popup {
    position: fixed !important;
    z-index: 9999 !important;
    padding: 12px;
    border-radius: 12px !important;
    min-width: 280px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    overflow: visible;
    /* Explicit background so the popup is never transparent, even when
       rendered inside a transformed or isolated stacking context. */
    background: var(--mud-palette-surface, #ffffff);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06);
    animation: ndp-popup-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ndp-popup-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Dark theme adjustments ── */
.mud-dark-theme .ndp-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.mud-dark-theme .ndp-popup {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Range popup (wider) ── */
.ndp-range-popup {
    min-width: 580px;
}

/* ── MudBlazor dialog: remove scale transform so position:fixed works ── */
.mud-dialog {
    transform: none !important;
    animation: vh-dialog-fade 0.15s ease-out !important;
    will-change: opacity;
}

@keyframes vh-dialog-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body:has(.ndp-popup) .mud-dialog-content,
body:has(.ndp-popup) .mud-dialog-scroll-container {
    overflow: visible !important;
}

.ndp-seg:hover:not(.active) {
    background: rgba(99, 102, 241, .08);
}

.ndp-seg.active {
    background: var(--mud-palette-primary, #6366f1);
    color: #fff;
}

.ndp-seg.empty {
    color: var(--mud-palette-text-disabled, #9ca3af);
    font-style: italic;
}

.ndp-seg.active.empty {
    color: #fff;
    font-style: normal;
}

.ndp-cal-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary, #6b7280);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

    .ndp-cal-btn:hover {
        background: rgba(99, 102, 241, .1);
        color: var(--mud-palette-primary, #6366f1);
    }

    .ndp-cal-btn:disabled {
        cursor: not-allowed;
        opacity: .5;
    }

.ndp-error {
    font-size: .72rem;
    color: var(--mud-palette-error, #ef4444);
    margin-top: 3px;
}

.ndp-helper {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    margin-top: 3px;
}

.ndp-panel {
    min-width: 256px;
}

.ndp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-top: 4px;
}

.ndp-cal-header {
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 5px 0;
}

.ndp-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s;
    user-select: none;
    position: relative;
}

    .ndp-cal-day:hover:not(.ndp-disabled):not(.ndp-selected):not(.ndp-range-start):not(.ndp-range-end):not(.ndp-range-single):not(.ndp-in-range) {
        background: var(--mud-palette-action-default-hover, rgba(0,0,0,.06));
        border-radius: 50%;
    }

.ndp-selected {
    background: var(--mud-palette-primary, #6366f1) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 50% !important;
}

.ndp-today:not(.ndp-selected):not(.ndp-range-start):not(.ndp-range-end):not(.ndp-range-single) {
    color: var(--mud-palette-primary, #6366f1);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary, #6366f1);
    border-radius: 50%;
}

.ndp-disabled {
    color: var(--mud-palette-text-disabled, #9ca3af) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.ndp-weekend:not(.ndp-selected):not(.ndp-range-start):not(.ndp-range-end):not(.ndp-range-single):not(.ndp-in-range) {
    color: var(--mud-palette-error, #ef4444);
}

/* ── Range selection bar ──────────────────────────────────────────
   Start: solid primary, left side rounded (pill start)
   End:   solid primary, right side rounded (pill end)
   In-range: lighter tint, flat (connects start → end)
   ─────────────────────────────────────────────────────────────── */
.ndp-range-start {
    background: var(--mud-palette-primary, #6366f1) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 9999px 0 0 9999px !important;
}

.ndp-range-end {
    background: var(--mud-palette-primary, #6366f1) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 0 9999px 9999px 0 !important;
}

/* Single-day range (start == end): full circle */
.ndp-range-single {
    background: var(--mud-palette-primary, #6366f1) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 50% !important;
}

.ndp-in-range {
    background: rgba(99, 102, 241, .18);
    border-radius: 0;
    color: inherit;
}

.ndp-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 4px;
}

.ndp-month-grid-wide {
    grid-template-columns: repeat(4, 1fr);
}

.ndp-month-item {
    text-align: center;
    padding: 10px 4px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .8125rem;
    transition: background .12s;
}

    .ndp-month-item:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .ndp-month-item.selected {
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        font-weight: 600;
    }

    .ndp-month-item.today-month:not(.selected) {
        color: var(--mud-palette-primary);
        font-weight: 700;
        box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
    }

.ndp-year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 8px;
}

.ndp-year-grid-wide {
    grid-template-columns: repeat(5, 1fr);
    max-height: unset;
}

.ndp-year-item {
    text-align: center;
    padding: 8px 2px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .8125rem;
    transition: background .12s;
}

    .ndp-year-item:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .ndp-year-item.selected {
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
        font-weight: 600;
    }

    .ndp-year-item.today-year {
        color: var(--mud-palette-primary);
        font-weight: 700;
    }

.ndp-header-btn {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
    text-transform: none !important;
}

.ndp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 8px;
    margin-top: 8px;
}

.ndp-range-divider {
    width: 1px;
    background: var(--mud-palette-divider);
    margin: 0 8px;
    align-self: stretch;
}

@media (max-width: 640px) {
    .ndp-range-popup {
        min-width: unset;
    }

        .ndp-range-popup .d-flex.gap-0 {
            flex-direction: column;
        }

    .ndp-range-divider {
        width: 100%;
        height: 1px;
        margin: 8px 0;
    }
}

/* ── DatePicker AD/BS combined component ──────────────────────── */
.dp-shell {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: fit-content;
}

/* Toggle + picker on the same horizontal line */
.dp-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* align to bottom so toggle sits next to input-body even when a label is present */
    gap: 8px;
}

.dp-picker-wrap {
    flex: 1;
    min-width: 0;
}

.dp-toggle {
    display: inline-flex;
    align-items: stretch;
    height: 40px; /* match .ndp-input-body height */
    border: 1.5px solid var(--mud-palette-divider, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

    .dp-toggle button {
        background: none;
        border: none;
        padding: 0 12px;
        font-size: 12px;
        font-family: monospace;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary, #6b7280);
        cursor: pointer;
        transition: background .15s, color .15s;
        display: flex;
        align-items: center;
    }

        .dp-toggle button + button {
            border-left: 1.5px solid var(--mud-palette-divider, #e5e7eb);
        }

        .dp-toggle button.dp-on {
            background: var(--mud-palette-primary, #6366f1);
            color: #fff;
        }

/* Small variant used inside the popup footer */
.dp-toggle-sm {
    height: 26px;
    border-radius: 5px;
}

    .dp-toggle-sm button {
        padding: 0 9px;
        font-size: 11px;
    }

/* Secondary (converted) date shown below the input row */
.dp-secondary {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #6b7280);
    font-family: monospace;
    padding-left: 2px;
}

/* Keep .dp-hint as alias for backward compatibility */
.dp-hint {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #6b7280);
    font-family: monospace;
}

/* Stacked AD/BS range trigger */
.dp-range-trigger {
    cursor: pointer;
    gap: 8px;
    height: auto;
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    align-items: center;
}

.dp-range-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 90px;
}

.dp-range-sub {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* ── CalendarView ────────────────────────────────────────────────── */
.cal-shell {
    position: relative;
    width: 100%;
    min-height: 450px;
    /* Cap growth so a day with many events/birthdays scrolls internally (via
       .cal-day-panel / .cal-event-list-body below) instead of expanding the
       whole widget — and the page around it — taller. */
    max-height: min(720px, 80vh);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-divider, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
    font-size: .875rem;
}

.cal-fullscreen {
    position: fixed !important;
    inset: 0;
    /* Above MudAppBar (1300) — otherwise a fixed app bar (the mobile app, small screens) covers the
       top bar and its Exit button — and below MudDialog (1400) so modals still open on top. */
    z-index: 1350;
    border-radius: 0 !important;
    overflow: auto;
    max-height: none !important;
}

/* Full view: keep the top bar (with Exit) pinned and clear of the phone status bar / notch. */
.cal-fullscreen .cal-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface, #fff);
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
/* Menus opened from the full view (e.g. today's birthdays) render in the body-level popover layer. */
body:has(.cal-fullscreen) .mud-popover { z-index: 1360; }
.cal-fullscreen .cal-fs-exit { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); border-color: var(--mud-palette-primary); font-weight: 600; }

/* ── Topbar ── */
.cal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-divider, #e5e7eb);
    flex-wrap: wrap;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary, #6b7280);
    transition: background .15s, color .15s;
}

    .cal-nav-btn:hover {
        background: rgba(99,102,241,.1);
        color: var(--mud-palette-primary, #6366f1);
    }

.cal-title {
    font-weight: 700;
    font-size: 1rem;
    min-width: 140px;
    text-align: center;
    color: var(--mud-palette-text-primary, #111827);
}

.cal-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cal-action-btn {
    border: 1px solid var(--mud-palette-divider, #e5e7eb);
    background: var(--mud-palette-surface, #fff);
    border-radius: 7px;
    padding: 5px 12px;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    color: var(--mud-palette-text-primary, #111827);
}

    .cal-action-btn:hover {
        background: rgba(99,102,241,.08);
        border-color: var(--mud-palette-primary, #6366f1);
        color: var(--mud-palette-primary, #6366f1);
    }

.cal-bday-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cal-bday-menu-hdr {
    padding: 6px 16px 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary, #6b7280);
}

.cal-cell-top-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px 4px;
    min-width: 0;
}

.cal-bday-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    color: #db2777;
    border-radius: 999px;
    padding: 0 5px;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    flex-shrink: 0;
}
.cal-bday-badge:hover { background: #fce7f3; }
.cal-bday-count { font-variant-numeric: tabular-nums; }

.cal-add-btn {
    background: var(--mud-palette-primary, #6366f1);
    color: #fff !important;
    border-color: var(--mud-palette-primary, #6366f1) !important;
}

    .cal-add-btn:hover {
        background: #4f46e5 !important;
        color: #fff !important;
    }

.cal-fs-btn span {
    font-size: .75rem;
    margin-left: 3px;
}

.cal-mode-toggle {
    display: inline-flex;
    border: 1.5px solid var(--mud-palette-divider, #e5e7eb);
    border-radius: 7px;
    overflow: hidden;
}

    .cal-mode-toggle button {
        background: none;
        border: none;
        padding: 5px 12px;
        font-size: .78rem;
        font-weight: 600;
        font-family: monospace;
        letter-spacing: .05em;
        cursor: pointer;
        color: var(--mud-palette-text-secondary, #6b7280);
        transition: background .15s, color .15s;
    }

        .cal-mode-toggle button + button {
            border-left: 1.5px solid var(--mud-palette-divider, #e5e7eb);
        }

        .cal-mode-toggle button.cal-mode-on {
            background: var(--mud-palette-primary, #6366f1);
            color: #fff;
        }

/* ── Body layout ── */
/* Embedded: capped by .cal-shell's max-height, so the day panel / all-events
   list scroll internally (via their own overflow-y:auto) instead of growing
   the whole widget taller when a day has many events/birthdays.
   Fullscreen: fill remaining viewport height with inner scroll. */
.cal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.cal-fullscreen .cal-body {
    flex: 1;
    overflow: hidden;
}

.cal-body-split .cal-main {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--mud-palette-divider, #e5e7eb);
}

/* ── Calendar main area ── */
.cal-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.cal-fullscreen .cal-main {
    overflow: auto;
}

.cal-day-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--mud-palette-divider, #e5e7eb);
}

.cal-day-header {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    padding: 6px 0;
    color: var(--mud-palette-text-secondary, #6b7280);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cal-weekend-hdr {
    color: var(--mud-palette-error, #ef4444);
}

/* ── Grid ── */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal-fullscreen .cal-grid {
    flex: 1;
}

.cal-cell {
    border-right: 1px solid var(--mud-palette-divider, #e5e7eb);
    border-bottom: 1px solid var(--mud-palette-divider, #e5e7eb);
    padding: 4px 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 72px;
    box-sizing: border-box;
    transition: background .12s;
}

    .cal-cell:hover:not(.cal-other-month):not(.cal-cell-empty) {
        background: rgba(99,102,241,.05);
    }

    .cal-cell:nth-child(7n) {
        border-right: none;
    }

.cal-cell-empty {
    background: var(--mud-palette-background-grey, #f9fafb);
    cursor: default;
}

.cal-other-month .cal-day-num {
    color: var(--mud-palette-text-disabled, #9ca3af);
}

.cal-cell-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
    min-width: 0;
    overflow: hidden;
}

.cal-day-num {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #111827);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.cal-day-sec {
    font-size: .65rem;
    color: var(--mud-palette-text-disabled, #9ca3af);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cal-day-sec-month {
    font-size: .6rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #6b7280);
    letter-spacing: .02em;
}

.cal-today .cal-day-num {
    background: var(--mud-palette-primary, #6366f1);
    color: #fff;
}

.cal-selected {
    background: rgba(99,102,241,.08) !important;
}

.cal-holiday {
    background: rgba(239,68,68,.06);
}

.cal-weekend-cell .cal-day-num {
    color: var(--mud-palette-error, #ef4444);
}

.cal-today.cal-weekend-cell .cal-day-num {
    color: #fff;
}

/* ── Event chips / bars in cell ── */
/* MudTooltip injects a root span with its own display:inline-block (see MudBlazor's
   .mud-tooltip-root.mud-tooltip-inline rule, same specificity as this one) — !important
   guarantees it stays transparent to flex layout regardless of stylesheet load order,
   so multi-day bar chips can still bleed/span across sibling day cells correctly. */
.cal-cell-events > .mud-tooltip-root {
    display: contents !important;
}

.cal-cell-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    /* Must be visible so bar-mid/start/end can bleed past cell padding */
    overflow: visible;
}

/* Day number must sit above bar overflows from adjacent cells */
.cal-cell-top { position: relative; z-index: 1; }

.cal-event-chip {
    font-size: .62rem;
    line-height: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 9999px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Invisible spacer for a lane not used by this specific day — keeps every day's
   events vertically aligned to the same lane across the whole week row, so a
   multi-day event bar doesn't visually jump position when other events appear. */
.cal-event-chip-empty {
    background: transparent !important;
    pointer-events: none;
    visibility: hidden;
}

/* ── Seamless multi-day event bars ──────────────────────────────
   Cell padding is 5px left/right. Negative margin of -6px extends
   the chip 1px past the cell border, covering the gap between cells.
   Only the start and single positions show the event title text.
   ─────────────────────────────────────────────────────────────── */
.cal-event-chip.bar-start {
    border-radius: 9999px 0 0 9999px;
    margin-right: -6px;
    padding-right: 0;
    /* Text bleeds past this cell's own box below (see .cal-event-chip-title) — this chip
       must not clip it, and needs its own stacking context so the bled text paints above
       the (textless) bar-mid/bar-end segments of the following days in this row. */
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Every segment of a multi-day bar (start/mid/end — NOT single-day chips) draws
   its own centered horizontal line across its own cell width. Segments already
   sit edge-to-edge (see the -6px margins below), so these independent per-cell
   lines join into one continuous line across the whole bar without depending
   on any cross-cell width math — so it can't come out partial. */
.cal-event-chip.bar-start,
.cal-event-chip.bar-mid,
.cal-event-chip.bar-end {
    position: relative;
}

.cal-event-chip.bar-start::after,
.cal-event-chip.bar-mid::after,
.cal-event-chip.bar-end::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, .8);
}

/* Anchored to bar-start's own top-left, sized to span the full merged bar (see
   CalendarView.GetBarSpan) so the title centers in the whole multi-day bar. Its
   own background matches the bar color so it masks/interrupts the ::after line
   right where the text sits, giving a "title punched into the line" look. */
.cal-event-chip-title {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16px;
    line-height: 16px;
}

/* Single-day events: sized to just this one chip instead of bleeding across cells. */
.cal-event-chip-title.cal-event-chip-title-inline {
    position: static;
}

.cal-event-chip-title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    letter-spacing: .05em;
    /* --event-color is set inline on .cal-event-chip (two levels up) — a custom
       property so it reaches here without needing every intermediate element to
       re-declare it, masking the ::after line right behind the text. */
    background: var(--event-color);
    padding: 0 8px;
}

.cal-event-chip.bar-mid {
    border-radius: 0;
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 0;
    padding-right: 0;
}

.cal-event-chip.bar-end {
    border-radius: 0 9999px 9999px 0;
    margin-left: -6px;
    padding-left: 0;
}

/* ── Event list view ── */
.cal-event-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.cal-event-list-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.cal-event-list-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    transition: all .15s;
}

    .cal-event-list-back:hover {
        background: rgba(128, 128, 128, 0.1);
        color: var(--mud-palette-text-primary);
        border-color: var(--mud-palette-text-secondary);
    }

.cal-event-list-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    flex: 1;
}

/* Action buttons in list rows */
.cal-list-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: center;
    flex-shrink: 0;
}

.cal-list-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.cal-list-del-btn {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

    .cal-list-del-btn:hover {
        background: rgba(239, 68, 68, 0.18);
        border-color: #ef4444;
    }

.cal-list-link-btn {
    background: rgba(59, 130, 246, 0.08);
    color: var(--mud-palette-primary);
    border-color: rgba(59, 130, 246, 0.3);
}

    .cal-list-link-btn:hover {
        background: rgba(59, 130, 246, 0.18);
        border-color: var(--mud-palette-primary);
    }

/* ── Right-click context menu ── */
.cal-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1260;
}

.cal-ctx-menu {
    position: fixed;
    z-index: 1261;
    min-width: 160px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    padding: 4px 0;
}

.cal-ctx-date {
    padding: 6px 14px 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 2px;
}

.cal-ctx-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    text-align: left;
    transition: background .12s;
}

    .cal-ctx-item:hover { background: rgba(128, 128, 128, 0.1); }

.cal-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    transition: all .15s;
}

    .cal-chip:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
    .cal-chip.cal-chip-on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #fff; }

.cal-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.cal-event-list-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-event-list-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.07);
    border: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: background .15s;
}

    .cal-event-list-row:hover { background: rgba(128, 128, 128, 0.14); }

.cal-event-more {
    font-size: .6rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    padding-left: 2px;
    position: relative;
    z-index: 1;
}

/* ── Day panel (right side) ── */
.cal-day-panel {
    width: 280px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 14px;
    overflow-y: auto;
    background: var(--mud-palette-surface, #fff);
    border-left: 1px solid var(--mud-palette-divider, #e5e7eb);
    position: relative;
    z-index: 2;
}

/* In fullscreen, panel fills the allocated height; scrolls if events overflow */
.cal-fullscreen .cal-day-panel {
    align-self: stretch;
}

.cal-day-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.cal-day-panel-primary {
    font-weight: 700;
    font-size: .875rem;
    color: var(--mud-palette-text-primary, #111827);
}

.cal-day-panel-secondary {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    margin-top: 2px;
}

.cal-day-panel-empty {
    font-size: .8125rem;
    color: var(--mud-palette-text-disabled, #9ca3af);
    font-style: italic;
    padding: 8px 0;
}

.cal-day-panel-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cal-day-event-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid var(--mud-palette-divider);
}

.cal-day-event-clickable {
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}

    .cal-day-event-clickable:hover {
        background: rgba(128, 128, 128, 0.15);
        box-shadow: 0 1px 4px rgba(0,0,0,.12);
    }

.cal-day-event-time {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.cal-day-event-bar {
    width: 4px;
    min-height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
}

.cal-day-event-info {
    flex: 1;
    min-width: 0;
}

.cal-day-event-title {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-holiday-label::after {
    content: " 🔴";
    font-size: .75em;
}

.cal-day-event-desc {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    margin-top: 2px;
}

.cal-day-event-recur {
    font-size: .7rem;
    color: var(--mud-palette-primary, #6366f1);
    margin-top: 2px;
}

.cal-day-event-link {
    display: inline-block;
    font-size: .72rem;
    color: var(--mud-palette-primary, #6366f1);
    text-decoration: none;
    margin-top: 4px;
    font-weight: 500;
}
.cal-day-event-link:hover { text-decoration: underline; }

.cal-day-event-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--mud-palette-text-secondary, #9ca3af);
    padding: 0 2px;
    border-radius: 4px;
    transition: color .12s, background .12s;
    line-height: 1;
    flex-shrink: 0;
}

    .cal-day-event-del:hover {
        color: var(--mud-palette-error, #ef4444);
        background: rgba(239,68,68,.1);
    }

/* ── Add Event Dialog ── */
/* Backdrop sits just below ndp-backdrop (9998) so the date picker popup
   can escape the dialog and appear on top. */
.cal-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9000;
}

/* IMPORTANT: no transform here. transform creates a new containing block for
   position:fixed children, which would trap the NDP popup inside the dialog.
   Use inset:0 + margin:auto to center without transform. */
.cal-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 9001;
    width: min(420px, calc(100vw - 24px));
    height: fit-content;
    background: var(--mud-palette-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: visible;
}

.cal-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-divider, #e5e7eb);
    font-weight: 700;
    font-size: 1rem;
}

.cal-dialog-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--mud-palette-text-secondary, #6b7280);
    padding: 0 4px;
    border-radius: 50%;
    transition: background .12s;
}

    .cal-dialog-close:hover { background: rgba(0,0,0,.07); }

.cal-dialog-body {
    padding: 14px 18px;
    overflow-y: auto;
    overflow-x: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.cal-dialog-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--mud-palette-divider, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cal-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-form-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.cal-form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #6b7280);
}

.cal-form-input {
    border: 1px solid var(--mud-palette-lines-default, #d1d5db);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: .875rem;
    font-family: inherit;
    outline: none;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #111827);
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

    .cal-form-input:focus {
        border-color: var(--mud-palette-primary, #6366f1);
        box-shadow: 0 0 0 2px rgba(99,102,241,.15);
    }

.cal-form-textarea {
    min-height: 60px;
    resize: vertical;
}

.cal-color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cal-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform .12s, border-color .12s;
    box-sizing: border-box;
}

    .cal-color-swatch:hover { transform: scale(1.15); }

    .cal-color-swatch.cal-color-selected {
        border-color: #111827;
        transform: scale(1.1);
    }

.cal-btn-cancel {
    border: 1px solid var(--mud-palette-divider, #e5e7eb);
    background: none;
    padding: 7px 18px;
    border-radius: 7px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #6b7280);
    transition: background .15s;
}

    .cal-btn-cancel:hover { background: rgba(0,0,0,.05); }

.cal-btn-save {
    background: var(--mud-palette-primary, #6366f1);
    color: #fff;
    border: none;
    padding: 7px 22px;
    border-radius: 7px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    transition: background .15s;
}

    .cal-btn-save:hover { background: #4f46e5; }

/* ── Event type chips (dialog) ── */
.cal-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cal-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: var(--mud-palette-background-grey, #f3f4f6);
    color: var(--mud-palette-text-primary, #111827);
    transition: border-color .15s, background .15s;
}

    .cal-type-chip:hover {
        border-color: var(--type-color, #6366f1);
    }

    .cal-type-chip.cal-type-selected {
        border-color: var(--type-color, #6366f1);
        background: color-mix(in srgb, var(--type-color, #6366f1) 12%, transparent);
    }

.cal-type-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Manage Types dialog ── */
.cal-dialog-wide { width: min(500px, calc(100vw - 24px)); }

.cal-types-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.cal-type-row-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    background: var(--mud-palette-background-grey, #f9fafb);
}

.cal-type-name {
    flex: 1;
    font-size: .875rem;
}

.cal-type-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .12s, background .12s;
}

    .cal-type-action:hover { background: rgba(0,0,0,.06); }

.cal-type-del:hover { color: var(--mud-palette-error, #ef4444) !important; }

.cal-type-edit-row,
.cal-type-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.cal-type-edit-input { flex: 1; }

.cal-color-input {
    width: 36px;
    height: 36px;
    border: 1px solid var(--mud-palette-divider, #e5e7eb);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

.cal-btn-sm {
    padding: 5px 10px !important;
    font-size: .78rem !important;
}

/* ── Day panel extras ── */
.cal-day-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cal-back-btn {
    background: none !important;
    color: var(--mud-palette-text-secondary, #6b7280) !important;
}

.cal-day-event-type {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 1px;
}

.cal-day-event-range {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    margin-top: 1px;
}

.cal-form-hint {
    font-weight: 400;
    font-size: .72rem;
    color: var(--mud-palette-text-disabled, #9ca3af);
}

/* Day panel as a bottom sheet (CalendarView DayPanelAsSheet — the mobile app). */
.cal-day-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290; /* over the app bar / bottom tabs, under MudDialog (~1300) and the event-detail modal (2000) */
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: cal-sheet-fade .15s ease-out;
}
.cal-day-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 75vh;
    display: flex;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
    padding-bottom: env(safe-area-inset-bottom);
    animation: cal-sheet-up .2s ease-out;
}
.cal-day-sheet .cal-day-panel {
    width: 100%;
    min-width: 0;
    border-left: 0;
    max-height: 75vh;
}
@keyframes cal-sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes cal-sheet-fade { from { opacity: 0; } to { opacity: 1; } }