/* Shared Calendar Component Styles */

.calendar-primary-button, .calendar-secondary-button, .calendar-danger-button, .calendar-icon-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 2.5rem; border-radius: .75rem; padding: .55rem .9rem;
    border: 1px solid rgb(255 255 255 / .1); font-size: .875rem; font-weight: 500;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.calendar-primary-button { border-color: rgb(129 140 248 / .4); background: rgb(99 102 241); color: white; }
.calendar-primary-button:hover:not(:disabled) { background: rgb(129 140 248); cursor: pointer; }
.calendar-primary-button:disabled { opacity: .5; cursor: not-allowed; }

.calendar-secondary-button { background: rgb(255 255 255 / .035); color: rgb(226 232 240); }
.calendar-secondary-button:hover { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .07); cursor: pointer; }

.calendar-danger-button { border-color: rgb(248 113 113 / .25); background: rgb(239 68 68 / .08); color: rgb(254 202 202); }
.calendar-danger-button:hover { background: rgb(239 68 68 / .16); cursor: pointer; }

.calendar-icon-button { width: 2.5rem; padding: 0; background: rgb(255 255 255 / .035); color: rgb(203 213 225); font-size: 1.25rem; }
.calendar-icon-button:hover { background: rgb(255 255 255 / .08); cursor: pointer; }

.calendar-label { display: block; margin-bottom: .45rem; color: rgb(148 163 184); font-size: .75rem; font-weight: 500; }

.calendar-input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: .75rem;
    background: rgb(15 23 42 / .4);
    color: white;
    outline: none;
    padding: .65rem .85rem;
}

.calendar-input:focus {
    border-color: rgb(129 140 248 / .7);
    box-shadow: 0 0 0 3px rgb(99 102 241 / .12);
}

.calendar-editor-dialog {
    background: #020617 !important;
}

.calendar-editor-readonly :is(input, select, textarea, button) {
    cursor: not-allowed !important;
}

/* Custom Select Styling */
.calendar-select { color-scheme: dark; }
.calendar-select option { background: #111827; color: rgb(226 232 240); }

.calendar-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}

.calendar-select-menu {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + .35rem);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: .75rem;
    background: #1e293b;
    padding: .3rem;
    box-shadow: 0 18px 40px rgb(2 6 23 / .45);
}

.calendar-select-menu-up {
    top: auto !important;
    bottom: calc(100% + .35rem);
    z-index: 60;
    max-height: 14rem;
    overflow-y: auto;
}

.calendar-select-option {
    display: block;
    width: 100%;
    border-radius: .55rem;
    padding: .65rem .75rem;
    text-align: left;
    color: rgb(226 232 240);
    cursor: pointer;
}

.calendar-select-option:hover, .calendar-select-option-active {
    background: rgb(99 102 241 / .25);
    color: white;
}

.calendar-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgb(203 213 225);
    font-size: .875rem;
}

.calendar-check input {
    width: 1rem;
    height: 1rem;
    accent-color: rgb(99 102 241);
}