/**
 * datepicker.css  —  TACSS 포털 날짜 입력 스타일
 *
 * 적용 대상:
 *   - 말풍선 에러 툴팁 (.dp-tooltip)
 *   - 에러 상태 input (.has-err)
 *   - jQuery UI datepicker 비활성 날짜 (.dp-disabled-day)
 */

/* ══════════════════════════════════════════════════════
   말풍선 에러 툴팁
══════════════════════════════════════════════════════ */

.dp-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px); /* 기본: 인풋 위로 */
    left: 0;
    z-index: 9999;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* 아래쪽 꼬리 */
.dp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 14px;
    border: 5px solid transparent;
    border-top-color: #c0392b;
}

.dp-tooltip.show {
    display: block;
    animation: dpTtFadeIn .15s ease;
}

/* 위 공간 없을 때: 아래로 */
.dp-tooltip.below {
    bottom: auto;
    top: calc(100% + 8px);
}
.dp-tooltip.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #c0392b;
}

@keyframes dpTtFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   에러 상태 input
   has-err 는 올바른 값 입력 전까지 유지
══════════════════════════════════════════════════════ */

input.has-err,
input.has-err:focus {
    color: #c0392b !important;          /* 텍스트 빨간색 */
    border-color: #c0392b !important;   /* 테두리 빨간색 */
    background-color: #fff8f8 !important;
}

/* ══════════════════════════════════════════════════════
   jQuery UI datepicker — 비활성 날짜 커스텀 스타일
══════════════════════════════════════════════════════ */

.ui-datepicker td.dp-disabled-day a,
.ui-datepicker td.dp-disabled-day span {
    color: #ccc !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

/* jQuery UI datepicker 너비 고정 */
.ui-datepicker {
    min-width: 270px;
    max-width: 270px;
}

/* 날짜 입력 박스 통합 스타일 */
.dateWrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 달력 아이콘과 input 정렬 */
.dateWrap .date,
.dateWrap .dateFirst {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* 달력 아이콘 레이블 */
.dateWrap label.calendar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}


/* 날짜 input 박스 */
.dateWrap input.date_box {
    box-sizing: border-box;
    height: 32px !important;
    padding-right: 28px !important;
    background: #fff url('../images/common/call_blit.png') 97% center no-repeat !important;
    border: 1px solid #c9c9c9 !important;
    color: #323232 !important;
    flex: 1 1 auto !important;
    vertical-align: middle !important;
}

.dateWrap label.calendar i {
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* input — 수직 정렬 보조 */
.dateWrap input[type="text"] {
    vertical-align: middle !important;
    flex: 1 !important;
}

/* ══════════════════════════════════════════════════════
   접수번호 검색 영역 — select 축소 / input 확장
══════════════════════════════════════════════════════ */

/* flex 컨테이너 */
.srch_input {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
}

/* select: 고정 너비 (접수번호/보험사사고번호 텍스트에 맞춤) */
.srch_input > select[name="inqTnoTyCd"] {
    flex: 0 0 auto !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

/* input: 남은 공간 전부 사용 */
.srch_input > input[name="inqTno"] {
    flex: 1 1 0 !important;
    width: 0 !important;   /* flex 가 너비를 계산하도록 */
    min-width: 0 !important;
}