/* See overrides/custom-syncfusion.css for all .e-* Syncfusion overrides. */
.content-area {
    height: 85vh;
}

.calendar-container {
    display: flex;
    align-items: flex-start; /* ✅ items start from the top, listview won't stretch */
    height: 100%; /* ✅ container takes full viewport height */
}

.calendar-main {
    flex: 1;
    align-self: stretch;
    background: var(--ev-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
/* ── Weather icons ── */
.scheduler-cloud-cover-icon {
    width: 42px;
    height: 42px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-right: 8px;
    margin-top: -6px;
    margin-bottom: 4px;
}

.scheduler-small-cover-icon {
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.scheduler-icon-storm {
    background-image: url("images/weather/Storm.png");
}

.scheduler-icon-cloudy {
    background-image: url("images/weather/cloudy.svg");
}

.scheduler-icon-partly-cloudy {
    background-image: url("images/weather/partly-cloudy.svg");
}

.scheduler-icon-sunny {
    background-image: url("images/weather/sunny.svg");
}

/* ── Tooltip icons ── */
.person-icon {
    background-image: url("images/person-white.svg");
}

.phone-icon {
    background-image: url("images/phone-white.svg");
}

.group-white-icon {
    background-image: url("images/group-white.svg");
}

.location-icon {
    background-image: url("images/location-on-white.svg");
}

.arrow-left-icon {
    background-image: url("images/arrow-left-white.svg");
}

.arrow-right-icon {
    background-image: url("images/arrow-right-white.svg");
}

.microsoft-teams-white-icon {
    background-image: url("images/icons8-microsoft-teams.svg");
}

.communication-type {
    padding-top: 0.9rem;
    padding-left: 0.8rem;
}


.icon-edit {
    -webkit-mask: url("../images/icons/scheduler-edit.svg");
    mask: url("../images/icons/scheduler-edit.svg");
}

.icon-add {
    -webkit-mask: url("../images/icons/scheduler-add.svg");
    mask: url("../images/icons/scheduler-add.svg");
}

.icon-close {
    -webkit-mask: url("../images/icons/close.svg");
    mask: url("../images/icons/close.svg");
}

.icon-delete {
    -webkit-mask: url("../images/icons/scheduler-delete.svg");
    mask: url("../images/icons/scheduler-delete.svg");
}

.icon-drag-appointment-btw-resources {
    -webkit-mask: url("../images/icons/scheduler-drag-between-resources.svg");
    mask: url("../images/icons/scheduler-drag-between-resources.svg");
}

.icon-drag-and-sizing {
    -webkit-mask: url("../images/icons/scheduler-drag-and-resize.svg");
    mask: url("../images/icons/scheduler-drag-and-resize.svg");
}

.icon-hamburger {
    -webkit-mask: url("../images/icons/hamburger.svg");
    mask: url("../images/icons/hamburger.svg");
}

.icon-tooltip {
    -webkit-mask: url("../images/icons/scheduler-no-tooltip.svg");
    mask: url("../images/icons/scheduler-no-tooltip.svg");
}

.tabs-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

:not(.dxbl-active) > .tabs-icon {
    opacity: 0.7;
}

.tabs-icon-home {
    mask-image: url("../images/icons/home.svg");
    -webkit-mask-image: url("../images/icons/home.svg");
}

.tabs-icon-support {
    mask-image: url("../images/icons/support.svg");
    -webkit-mask-image: url("../images/icons/support.svg");
}

.tabs-icon-products {
    mask-image: url("../images/icons/products.svg");
    -webkit-mask-image: url("../images/icons/products.svg");
}
/*END OF DX COPY PASTA*/

/* ── Page layout ── */
.cal-page {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    height: 100%;
    min-height: 0;
}

@media (max-width: 1024px) {
    .cal-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
}

/* ── Agenda sidebar ── */
.agenda-sidebar {
    background: var(--ev-white);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    height: 100%;
    flex: 0 0 30%; /* fixed 30% width */
}

.agenda-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ev-gray-200);
}

.agenda-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ev-dark);
    margin-bottom: 4px;
}

.agenda-date {
    font-size: 13px;
    color: var(--ev-gray-600);
    font-weight: 500;
}

/* ── Agenda item cards ── */
.agenda-item {
    background: var(--ev-gray-100);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 4px solid var(--ev-primary);
    cursor: pointer;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

    .agenda-item:hover {
        background: var(--ev-gray-200);
        transform: translateX(4px);
        box-shadow: 0 4px 10px -2px rgba(107, 76, 230, 0.22), 0 1px 4px -1px rgba(107, 76, 230, 0.12);
    }

    .agenda-item.accent-confirmed:hover {
        box-shadow: 0 4px 10px -2px rgba(0, 217, 163, 0.28), 0 1px 4px -1px rgba(0, 217, 163, 0.14);
    }

    .agenda-item.accent-canceled:hover {
        box-shadow: 0 4px 10px -2px rgba(255, 87, 87, 0.28), 0 1px 4px -1px rgba(255, 87, 87, 0.14);
    }

    .agenda-item.accent-pending:hover {
        box-shadow: 0 4px 10px -2px rgba(255, 184, 77, 0.28), 0 1px 4px -1px rgba(255, 184, 77, 0.14);
    }

    .agenda-item.accent-confirmed {
        border-left-color: var(--ev-success);
    }

    .agenda-item.accent-canceled {
        border-left-color: var(--ev-error);
    }

    .agenda-item.accent-pending {
        border-left-color: var(--ev-warning);
    }

    .agenda-item.accent-requested {
        border-left-color: var(--ev-primary);
    }

.agenda-item-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--ev-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.agenda-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ev-gray-900);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ev-gray-600);
    margin-bottom: 8px;
}

.agenda-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    filter: invert(40%) sepia(10%) saturate(500%) hue-rotate(220deg);
}

/* ── Status badges ── */
.agenda-item-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-confirmed {
    background: rgba(0, 217, 163, 0.12);
    color: #00A87E;
}

.status-canceled {
    background: rgba(255, 87, 87, 0.12);
    color: #CC2929;
}

.status-pending {
    background: rgba(255, 184, 77, 0.15);
    color: #C07700;
}

.status-requested {
    background: rgba(107, 76, 230, 0.12);
    color: var(--ev-primary);
}

/* ── Empty state ── */
.agenda-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--ev-gray-600);
    font-size: 14px;
}

.agenda-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

/* ── Sidebar footer count ── */
.agenda-footer {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--ev-gray-200);
    font-size: 13px;
    color: var(--ev-gray-600);
    text-align: center;
}

/* ── Schedule wrapper ── */
.schedule-wrapper {
    height: 100%;
    min-height: 0;
    font-family: 'Work Sans', sans-serif;
}

/* ── Quick info popup layout ── */
.qi-header {
    display: flex;
    align-items: stretch;
    background: var(--ev-white);
}

.qi-header-accent {
    width: 5px;
    background: linear-gradient(180deg, var(--ev-primary), var(--ev-primary-dark));
    flex-shrink: 0;
}

.qi-header-body {
    padding: 14px 16px;
    flex: 1;
}

.qi-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ev-dark);
    margin-bottom: 4px;
}

.qi-duration {
    font-size: 12px;
    color: var(--ev-gray-600);
    font-weight: 500;
}

.qi-content {
    padding: 12px 16px 4px;
    background: var(--ev-white);
}

.qi-field {
    margin-bottom: 10px;
}

.qi-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 0 6px;
    border-top: 1px solid var(--ev-gray-200);
    margin-top: 4px;
}

/* ── Custom editor ── */
.editor-container {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editor-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.editor-field--row {
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
}

.editor-field--row > .editor-field {
    flex: 1;
}

.editor-event-linked {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-event-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ev-dark);
    padding: 4px 0;
}

.editor-event-unlink {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ev-gray-600);
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
}

.editor-event-unlink:hover {
    color: var(--ev-error);
    background: rgba(255, 87, 87, 0.08);
}

.editor-event-empty {
    font-size: 13px;
    color: var(--ev-gray-500);
    font-style: italic;
}

.editor-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ev-gray-700, #374151);
}

/* ── Tooltip ── */
.sf-tooltip {
    padding: 10px 12px;
    font-family: 'Work Sans', sans-serif;
    min-width: 180px;
}

.sf-tooltip-subject {
    font-size: 14px;
    font-weight: 700;
    color: var(--ev-gray-700, #374151);
    margin-bottom: 4px;
}

.sf-tooltip-time {
    font-size: 12px;
    color: var(--ev-gray-700, #374151);
    margin-bottom: 6px;
}

.sf-tooltip-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ev-gray-700, #374151);
}

.editor-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}