.select-calendar-users {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Own row under the user picker so disconnecting never sits beside the load action. */
.calendar-logout-row {
    margin-bottom: 10px;
}

.calendar-form-group {
    margin-bottom: 15px;
}

.cal-required {
    color: #e53935;
    margin-left: 2px;
}

    .calendar-form-group label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }

/* Checkbox plus its (i) icon on one line, so the icon reads as belonging to that checkbox. */
.calendar-checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hover/focus target for the explanation of a setting whose label alone doesn't say what it does. */
.calendar-field-info {
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

    .calendar-field-info:hover,
    .calendar-field-info:focus {
        color: #6b7280;
    }

.calendar-input-field {
    width: 100%;
}

.repeat-interval-input {
    width: 100%;
    margin-right: 8px;
    flex-grow: 1;
}

.div-repeat-interval {
    display: flex;
    align-items: center;
}

.calendar-form-group-inline {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

    .calendar-form-group-inline label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }

.calendar-inline-item {
    flex: 1;
}

    .calendar-inline-item label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }

.calendar-banner-messages {
    margin-bottom: 5px;
    align-items: center;
}

.calendar-dialog-text {
    margin-top: 0px !important;
}

.calendar-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.calendar-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: auto;
}

.calendar-div {
    position: relative;
}

.calendar-access-denied-banner {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.calendar-access-denied-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.access-request-link {
    color: #000;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 10px;
}

.access-request-link:hover {
    color: #3730A3;
}

.access-request-sent {
    color: #16a34a;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 10px;
}

/* Incoming in-app access requests (approve/decline) — informational, not an error */
.calendar-access-request-banner {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.calendar-access-request-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: 10px;
    white-space: nowrap;
}

/* Locked colleagues stay in the user dropdown, marked instead of hidden */
.calendar-user-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.calendar-user-locked {
    color: #6c757d;
    font-size: 0.925rem;
    white-space: nowrap;
}

.calendar-request-access-prompts {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 6px 15px;
    margin: 8px 0 10px 0;
}

/* Event editor dialog footer: Syncfusion renders Delete, Save, Cancel in that DOM order with
   theme-teal flat styling. Reorder to match the app's modal convention (destructive far left,
   Cancel, then Save rightmost) and restyle: solid teal Save, neutral Cancel, red Delete.
   Scoped to the schedule's editor dialog — the mini-calendar dialogs put e-schedule-dialog on
   the buttons themselves, so this descendant selector doesn't touch them. */
.e-schedule-dialog .e-footer-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.e-schedule-dialog .e-footer-content .e-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    border: 1.5px solid transparent;
    margin-left: 0;
}

.e-schedule-dialog .e-footer-content .e-event-delete {
    order: 0;
    margin-right: auto;
    background: #fff !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.e-schedule-dialog .e-footer-content .e-event-delete:hover,
.e-schedule-dialog .e-footer-content .e-event-delete:focus {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
}

.e-schedule-dialog .e-footer-content .e-event-cancel {
    order: 1;
    background: #fff !important;
    color: #4b5563 !important;
    border-color: #d1d5db !important;
}

.e-schedule-dialog .e-footer-content .e-event-cancel:hover,
.e-schedule-dialog .e-footer-content .e-event-cancel:focus {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

.e-schedule-dialog .e-footer-content .e-event-save {
    order: 2;
    background: #00afb5 !important;
    color: #fff !important;
    border-color: #00afb5 !important;
}

.e-schedule-dialog .e-footer-content .e-event-save:hover,
.e-schedule-dialog .e-footer-content .e-event-save:focus {
    background: #009aa0 !important;
    border-color: #009aa0 !important;
}

/* Quick-info popup for an existing event: Syncfusion renders a static "Edit Event" title in the
   header's top-left, above the subject. It isn't a control — the real action is the Edit button —
   so it reads as a dead link.
   Note the selector has no .e-popup-header step: that wrapper only exists in the Blazor Schedule's
   "more events" popup (e-multiple-event-popup). The single-event popup puts
   .e-popup-header-title-text directly under .e-event-popup, so requiring .e-popup-header here
   matches nothing. Scoping to .e-event-popup leaves the cell popup ("New Event") title alone. */
.e-quick-popup-wrapper .e-event-popup .e-popup-header-title-text {
    display: none;
}

/* Per-event template — adds an "owner" label when multiple calendars are loaded.
   Sized to the boxes Syncfusion gives an appointment (AB#102): a 30-minute slot in the day/week
   views is 36px tall, and a month-view or all-day box is 26px. The old two-line template needed
   ~40px in every view, so the second line was clipped in the week view and both lines were
   squashed into a 26px month box. Day/week keep two tighter lines that fit a 30-minute slot;
   the 26px boxes switch to one line with the owner trailing the subject. */
.cal-event-template {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    height: 100%;
    min-width: 0;
    padding: 1px 4px;
    overflow: hidden;
    line-height: 1.2;
}

.cal-event-subject {
    font-weight: 600;
    font-size: 0.875rem;
    color: inherit;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-event-owner {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-event-owner i {
    font-size: 0.8125rem;
    flex: 0 0 auto;
}

.cal-event-owner span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The vendor's details wrapper sizes itself to its content, so a long subject could push the
   owner past the box's clipped edge; pin the wrapper to the box so the template's own
   truncation is what happens. */
.e-schedule .e-appointment .e-appointment-details:has(.cal-event-template) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* One line for the 26px boxes: month view and the all-day row of the day/week views. The subject
   takes the room first; the owner trails it and truncates before the subject does. */
.e-schedule .e-month-view .cal-event-template,
.e-schedule .e-all-day-appointment-wrapper .cal-event-template {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.e-schedule .e-month-view .cal-event-subject,
.e-schedule .e-all-day-appointment-wrapper .cal-event-subject {
    flex: 1 1 auto;
    font-size: 0.8125rem;
}

/* The owner keeps its natural width (capped) and the SUBJECT is what truncates: a task's
   owner must stay readable without clicking into it (AB#18), even behind a long subject. */
.e-schedule .e-month-view .cal-event-owner,
.e-schedule .e-all-day-appointment-wrapper .cal-event-owner {
    flex: 0 0 auto;
    max-width: 45%;
}

/* Tasks shown alongside events (AB#18). A task carries its owner's colour exactly like an event,
   so the checkbox icon here plus the dashed border applied in OnEventRendered are what say
   "task, not appointment" at a glance. */
.cal-task-icon {
    margin-right: 3px;
    font-size: 0.875rem;
    opacity: 0.9;
}

/* The "Tasks" toggle, sitting between the calendar picker and the Load Calendar button. */
.cal-show-tasks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0.75rem;
    font-size: 0.925rem;
    white-space: nowrap;
    cursor: pointer;
}

/* Agenda view gives more room — show the owner badge as a pill */
.e-schedule .e-agenda-view .cal-event-owner {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.25);
    padding: 1px 8px;
    border-radius: 999px;
    margin-top: 2px;
    align-self: flex-start;
}


.calendar-advanced-section {
    margin-top: 8px;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}

.calendar-advanced-section > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 6px 0;
    user-select: none;
}

.calendar-advanced-section[open] > summary {
    margin-bottom: 8px;
}

.calendar-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.calendar-meet-link {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.975rem;
    color: #1a73e8;
    text-decoration: underline;
    word-break: break-all;
}

/* Who-is-who legend when viewing multiple people's calendars (Calendar + GoogleCalendar pages).
   Each chip's dot matches the tint OnEventRendered applies to that person's events. */
.cal-owner-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
}

.cal-owner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.cal-owner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}