/*
 * 웹 날짜·월 선택기 표준 — TBM 목록 조회조건의 조회연월 선택기 디자인으로 두 선택기를 맞춘다.
 *   월 선택기   bootstrap-monthpicker (css/shared/monthpicker.css)
 *   날짜 달력   flatpickr             (css/lib/flatpickr.min.css + css/lib-overrides/flatpickr.css)
 * 두 파일 위에 얹으므로 웹 head.jsp 에서 그 다음에 로드한다. 모바일은 이 파일을 읽지 않는다.
 *
 * 예전에는 월 선택기 머리가 화면마다 달랐다 — common.css 의 .mp-title{#37649e !important} 가 기본이고
 * .tableStyleCustom(TBM 목록 등) 화면만 #006df9·굵은 글씨였다. 그 두 규칙을 이 파일 하나로 옮겼다.
 */

/* ===== 월 선택기 ===== */
/* 입력칸 오른쪽 끝에 맞춰 연다 (right 는 common.css 에서 옮김).
   폭은 고정한다 — 원본은 fit-content 라 입력칸 폭을 따라 한 줄에 2칸(대시보드)·3칸(TBM 목록)으로 갈렸다. 168px = 한 줄 3칸 */
.mp-dialog {
    right: 0;
    width: 168px;
    border-color: var(--color-border-picker);
    box-shadow: 3px 3px 10px var(--color-shadow-picker);
}
/* 카드 머리에 둔 월 선택기가 아래 카드 머리에 가려지지 않게 한다. 테마(web/theme.css)가 .card .card-header 마다
   position:relative · z-index:3 을 주어 머리마다 쌓임 맥락이 생기고, 같은 3 이면 뒤 카드의 머리가 위에 그려진다
   (문자 발송 내역 — 조회연월 상자 위로 "발송 한도 현황" 카드가 겹쳤다) */
.card .card-header:has(.mp-monthpicker) {
    z-index: 4;
}
.mp-title {
    line-height: 35px;
    background: var(--color-bg-picker-head);
    color: var(--color-text-inverse);
    font-weight: 600;
}
.mp-monthpicker .mp-content li {
    float: none;
    width: 35px;
    height: 34px;
    line-height: 34px;
    border-color: var(--color-border-picker);
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
}
.mp-monthpicker .mp-content li:hover,
.mp-monthpicker .mp-content li.active {
    background: var(--color-bg-picker-active);
    border-color: var(--color-bg-picker-active);
    color: var(--color-text-inverse);
}

/* ===== 날짜 달력(flatpickr) ===== */
/* 상자 — 월 선택기와 같은 테두리·그림자 */
.flatpickr-calendar {
    border: 1px solid var(--color-border-picker);
    border-radius: 5px;
    box-shadow: 3px 3px 10px var(--color-shadow-picker);
}
/* 입력칸을 가리키는 꼭지 — 위로 열리면 머리 색, 아래로 열리면 흰 바탕에 테두리 색 */
.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--color-border-picker); }
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--color-bg-picker-head); }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--color-border-picker); }

/* 머리(연·월) — 월 선택기 .mp-title 과 같은 색·높이·굵기 */
.flatpickr-months .flatpickr-month {
    height: 35px;
    border-radius: 4px 4px 0 0;
    background: var(--color-bg-picker-head);
}
/* 앞뒤 달 화살표 — 머리 높이 가운데 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 10px;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-text-inverse);
    opacity: .7;
}
/* 연·월 — 머리 높이(35px) 가운데에 놓는다. 원본은 위 여백(7.48px)으로 내려 놓아 글자 크기가 바뀌면 어긋난다
   (lib-overrides 의 top:-1px 도 되돌린다) */
.flatpickr-current-month {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    margin: 0;
}
/* 연도 뒤 "년" — lib-overrides 는 위 여백 4px 로 맞췄다. 연도 칸 가운데에 맞춘다(left 는 그대로 두어 가로 위치가 바뀌지 않게) */
.flatpickr-current-month b.custom {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}
/* 연·월 글꼴 — 월 선택기 머리(.mp-title span)와 같은 Poppins 14px 굵게. 원본·lib-overrides 는 Roboto 16px */
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month b.custom {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
/* 연도 칸 폭 — lib-overrides 의 8ch 는 글자 크기를 따라 줄어(16px → 14px) 연도 입력(83px)보다 좁아지고, 뒤의 "년"이 다음 줄로 밀린다 */
.flatpickr-current-month .numInputWrapper {
    width: 84px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--color-bg-picker-head);
}

/* 요일 — 일요일 빨강·토요일 파랑(일일위험성평가 달력과 같은 색) */
span.flatpickr-weekday:first-child { color: var(--color-text-calendar-sunday); }
span.flatpickr-weekday:last-child { color: var(--color-text-calendar-saturday); }

/* 날짜 칸 — 테두리 없는 둥근 네모. 원본은 39×39px 동그라미, 달력 폭 307px.
   간격을 좁히려고 달력 폭을 280px 로 줄이고, 칸은 월 선택기 칸(35×34px)에 가깝게 38×34px 로 한다.
   한 줄 7칸은 칸 폭으로 정해진다(280px 의 1/7 = 40px 칸 자리에 38px 칸. 8칸이 들어가지 않아야 한다).
   한 달만 보여 주는 달력은 JS 가 폭을 넣지 않아 CSS 로 바꿀 수 있다 */
.flatpickr-calendar {
    width: 280px;
}
.flatpickr-days,
.flatpickr-days .dayContainer {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
}
/* 글꼴 — 월 선택기 칸과 같은 Poppins 14px, 본문 글자색(원본은 12px · #393939). 앞뒤 달·고를 수 없는 날은 원본의 흐린 색 그대로 */
.flatpickr-days {
    font-size: 14px;
}
.flatpickr-day {
    max-width: 38px;
    height: 34px;
    line-height: 32px;
    color: inherit;
    border-radius: 4px;
    transition:
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            transform 0.15s ease;
}
/* 오늘 — 테두리·글자만 파랗게 */
.flatpickr-day.today {
    border-color: var(--color-bg-picker-active);
    color: var(--color-bg-picker-active);
    font-weight: 600;
}
/* 고른 날짜 · 마우스를 올린 날짜 — 월 선택기 칸과 같은 파랑, 살짝 떠오른다 */
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
    background: var(--color-bg-picker-active);
    border-color: var(--color-bg-picker-active);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
}
.flatpickr-day.flatpickr-disabled:hover {
    background: transparent;
    transform: none;
}