/* ================================================
   일정 입력 컴포넌트 스타일
   ================================================ */

.popup-input-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.popup-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    height: 50px;
}

.popup-input-container[data-confirm-schedule-container] {
    --schedule-type-column-width: 88px;
    --schedule-date-column-min: 150px;
    --schedule-action-column-width: 50px;
}

.popup-input-container[data-confirm-schedule-container] .popup-input-wrapper {
    display: grid;
    grid-template-columns:
        var(--schedule-type-column-width)
        minmax(var(--schedule-date-column-min), 1fr)
        max-content
        var(--schedule-action-column-width);
    column-gap: 4px;
}

.popup-input-container[data-confirm-schedule-container] [data-confirm-schedule-type],
.popup-input-container[data-confirm-schedule-container] [data-confirm-schedule-date],
.popup-input-container[data-confirm-schedule-container] .schedule-time-group {
    min-width: 0;
}

.schedule-time-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    height: 100%;
}

.schedule-input {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    height: 50px;
}

.schedule-input--date.schedule-input--has-icon {
    width: 136px;
}

.popup-input-container[data-confirm-schedule-container] .schedule-input--date.schedule-input--has-icon {
    width: 100%;
    min-width: var(--schedule-date-column-min);
}

.schedule-input--date.schedule-input--no-icon {
    width: 115px;
}

.schedule-input--time.schedule-input--has-icon {
    width: 88px;
}

.schedule-input--time.schedule-input--no-icon {
    width: 68px;
}

/* 날짜/시간 선택 버튼 — 값이 없으면 placeholder 색상(--gray-300) 표시 */
.schedule-input__button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 16px 11px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background-color: #fff;
    font-size: 16px;
    color: var(--gray-300);
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--ease-default), box-shadow var(--ease-default), color var(--ease-default);
}

/* 포커스 링 — 디자인 시스템 action-blue 기준 */
.schedule-input__button:focus-visible {
    border-color: var(--action-blue);
    box-shadow: 0 0 0 3px rgba(7, 68, 145, 0.15);
}

.schedule-input__text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 아이콘 SVG 변수 — 다크모드에서 색상 토큰에 맞춰 재정의 */
:root {
    --schedule-date-icon-image: url("/images/components/schedule/calendar-today.svg");
    --schedule-time-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='10' cy='10' r='7'/%3e%3cpath d='M10 5.5v4.2l3 2'/%3e%3c/svg%3e");
}

.schedule-input__icon {
    margin-left: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    flex-shrink: 0;
}

.schedule-input__icon--date {
    width: 20px;
    height: 20px;
    background-image: var(--schedule-date-icon-image);
}

.schedule-input__icon--time {
    width: 20px;
    height: 20px;
    background-image: var(--schedule-time-icon-image);
}

/* 값이 채워진 상태 — text-sub 색상으로 가독성 확보 */
.schedule-input--filled .schedule-input__button {
    color: var(--text-sub);
}

/* 채워진 상태 아이콘 — 약간 어둡게 조정 */
.schedule-input--filled .schedule-input__icon {
    filter: brightness(0.85);
}

.schedule-input__native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
}

.chat-simple-select {
    width: 88px;
    height: 50px;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single {
    flex: none;
    width: 88px;
    height: 50px;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single .ts-control,
.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single.input-active .ts-control {
    height: 50px;
    min-height: 50px;
    padding: 0 34px 0 12px;
    font-size: 16px;
    line-height: 18px;
    color: var(--text-sub);
    box-sizing: border-box;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single .ts-control .item,
.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single .ts-control input {
    font-size: 16px;
    line-height: 18px;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single .ts-control > input {
    min-width: 0 !important;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single:not(.has-items) .ts-control > input {
    flex: 1 1 auto !important;
    width: 100% !important;
    opacity: 1 !important;
    position: static !important;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single .ts-control .item,
.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single.has-items.input-active .ts-control .item {
    display: block;
    color: var(--text-sub);
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-wrapper.single .ts-control:not(.loading)::after {
    right: 13px;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-dropdown {
    min-width: 104px;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-dropdown .option {
    min-height: 40px;
    padding: 10px 36px 10px 14px;
    border-top: 1px solid var(--gray-200);
    white-space: nowrap;
    word-break: keep-all;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-dropdown .option:first-child {
    border-top: 0;
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-dropdown .option:hover,
.popup-input-wrapper [data-confirm-schedule-type] .ts-dropdown .option.active {
    background-color: var(--gray-100);
}

.popup-input-wrapper [data-confirm-schedule-type] .ts-dropdown .option.selected {
    background-color: rgba(7, 68, 145, 0.08);
}

/* 고정값 레이블 (읽기 전용 표시) */
.schedule-fixed-label {
    display: inline-flex;
    align-items: center;
    height: 50px;
    min-width: 88px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background-color: var(--gray-100);
    font-size: 16px;
    color: var(--text-sub);
    box-sizing: border-box;
}

/* 일정 추가 버튼 */
.plus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 100%;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-desc);
    padding: 7px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    box-sizing: border-box;
    cursor: pointer;
}

/* 고정 일정일 경우 추가 버튼 숨김 */
.popup-input-wrapper[data-schedule-fixed="true"] .plus {
    display: none;
}

/* 물결표(~) 구분자 */
.wave {
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: var(--text-sub);
    padding: 0 2px;
}


/* ================================================
   다크모드 — 일정 입력 컴포넌트
   ================================================ */

/* 시간 아이콘 SVG — 다크 배경에서 --text-desc(#5C6F82)에 맞는 밝은 stroke */
body.theme-dark {
    --schedule-time-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235C6F82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='10' cy='10' r='7'/%3e%3cpath d='M10 5.5v4.2l3 2'/%3e%3c/svg%3e");
}

/* 날짜/시간 선택 버튼 */
body.theme-dark .schedule-input__button {
    border-color: var(--border-default);
    background-color: var(--surface-2);
    color: var(--text-desc);
}

/* 포커스 링 — 다크모드는 --border-focus(#3B82F6) 기준 */
body.theme-dark .schedule-input__button:focus-visible {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 채워진 상태 텍스트 */
body.theme-dark .schedule-input--filled .schedule-input__button {
    color: var(--text-sub);
}

/* 채워진 상태 아이콘 — 다크 배경에서 달력 아이콘 밝기 조정 */
body.theme-dark .schedule-input--filled .schedule-input__icon--date {
    filter: brightness(2);
}

/* 고정값 레이블 */
body.theme-dark .schedule-fixed-label {
    border-color: var(--border-default);
    background-color: var(--surface-1);
    color: var(--text-sub);
}

/* 일정 추가 버튼 */
body.theme-dark .plus {
    color: var(--text-desc);
    border-color: var(--border-default);
}

/* 물결표 구분자 */
body.theme-dark .wave {
    color: var(--text-sub);
}

/* 폰 폭(모달 안쪽 ≈320px)에는 구분·날짜·시간·버튼 네 칸이 한 줄에 못 선다 — 구분+날짜 / 시간+버튼 두 줄로 접는다 */
@media (max-width: 768px) {
    .popup-input-container[data-confirm-schedule-container] {
        --schedule-date-column-min: 0px;
        gap: 14px;
    }

    .popup-input-container[data-confirm-schedule-container] .popup-input-wrapper {
        grid-template-columns: var(--schedule-type-column-width) minmax(0, 1fr) auto;
        row-gap: 4px;
        height: auto;
    }

    .popup-input-container[data-confirm-schedule-container] [data-confirm-schedule-date] {
        grid-column: 2 / -1;
    }

    .popup-input-container[data-confirm-schedule-container] .schedule-time-group {
        grid-column: 1 / 3;
        height: 50px;
    }

    .popup-input-container[data-confirm-schedule-container] [data-schedule-fixed="true"] .schedule-time-group {
        grid-column: 1 / -1;
    }

    .popup-input-container[data-confirm-schedule-container] .schedule-time-group > div {
        flex: 1;
        min-width: 0;
    }

    .popup-input-container[data-confirm-schedule-container] .schedule-time-group .schedule-input--time {
        width: 100%;
    }
}