@charset "utf-8";

/* 파트너 대시보드 전용 - partner/index.php, 동작 partner/js/dashboard.js
   요약 카드(.stat-list · .stat-card)는 예약 페이지와 같이 쓰여서 common.css 로 옮겼다 */

/* 페이지 머리 */
.dash-head .dash-date {display: flex; align-items: center; column-gap: 12px; margin-bottom: 16px; color: var(--color-gray6);}
.dash-head .dash-desc {margin-top: 12px; color: var(--color-gray8);}

/* 패널 배치 - 6칸 그리드. 1행 오늘의 예약 4 : 변경내역 2, 2행 정산 3 : 프로그램 3 */
.dash-grid {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 24px;}
.dash-grid .dash-today {grid-column: span 4;}
.dash-grid .dash-history {grid-column: span 2;}
.dash-grid .dash-settle, .dash-grid .dash-program {grid-column: span 3;}

/* 오늘의 예약 - 표 자체는 common.css .data-table. 상세보기 버튼만 시안 폭에 맞춘다 */
.dash-today .detail-btn {min-width: 104px;}

/* 최근 예약 변경 및 취소 내역 */
.log-item {display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 16px; padding: 16px 12px; border-bottom: 1px solid var(--color-gray3);}
.log-item:first-child {padding-top: 4px;}
.log-item:last-child {border-bottom: 0;}
.log-when {display: flex; flex-direction: column; row-gap: 4px;}
.log-when .log-date {color: var(--color-gray8);}
.log-when .log-time {color: var(--color-gray6);}
.log-cont .log-tit {color: var(--color-gray9);}
.log-cont .log-desc {margin-top: 4px; color: var(--color-gray6);}

/* 정산 현황 추이 - 선 그래프
   .chart-plot 이 플롯 영역(눈금 0 ~ 최댓값)이고, 모든 좌표는 이 상자 기준 % 다.
   왼쪽 여백은 y 축 금액, 아래 여백은 x 축 날짜, 오른쪽 여백은 마지막 날짜 글자가 넘치지 않게 둔 자리 */
.line-chart {padding-top: 24px;}
.chart-canvas {padding: 12px 20px 32px 76px; border-radius: 4px;}
.chart-plot {position: relative; height: 280px; border-bottom: 1px solid var(--color-gray5);}
.chart-svg {position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible;}
.chart-svg .chart-grid {stroke: var(--color-gray3); stroke-width: 1;}
.chart-svg .chart-line {fill: none; stroke: var(--color-static1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;}
.chart-label {position: absolute; color: var(--color-gray6); white-space: nowrap;}
.chart-y .chart-label {right: calc(100% + 12px); transform: translateY(-50%);}
.chart-x .chart-label {top: calc(100% + 8px); transform: translateX(-50%);}
.chart-x .chart-label::before {content: ''; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 5px; margin-bottom: 3px; background-color: var(--color-gray5);}
.chart-dot {position: absolute; z-index: 1; width: 8px; height: 8px; border: 2px solid var(--color-white); border-radius: 50%; background-color: var(--color-static1); transform: translate(-50%, -50%); transition: transform 0.2s;}
.chart-dot.active {transform: translate(-50%, -50%) scale(1.5);}
.chart-cross {position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--color-gray4); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.chart-cross.active {opacity: 1;}
/* 툴팁 - 점 바로 위 가운데. 양 끝 점에서는 패널 밖으로 넘치지 않게 .is-start(왼쪽 정렬) / .is-end(오른쪽 정렬) */
.chart-tooltip {position: absolute; z-index: 2; padding: 8px 12px; border: 1px solid var(--color-gray3); border-radius: 6px; background-color: var(--color-white); box-shadow: var(--box-shadow); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none;}
.chart-tooltip.is-start {transform: translate(-12px, calc(-100% - 12px));}
.chart-tooltip.is-end {transform: translate(calc(-100% + 12px), calc(-100% - 12px));}
.chart-tooltip[hidden] {display: none;}
.chart-tooltip .chart-tooltip-date {color: var(--color-gray6);}
.chart-tooltip .chart-tooltip-val {font-weight: 600; color: var(--color-gray9);}

/* 프로그램별 예약 현황 - 막대 */
.bar-list {display: flex; flex-direction: column; row-gap: 20px; padding-top: 24px;}
.bar-head {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.bar-head .bar-name {color: var(--color-gray8);}
.bar-head .bar-count {flex: none; color: var(--color-gray9);}
.bar-track {overflow: hidden; display: block; height: 6px; margin-top: 12px; border-radius: 999px; background-color: var(--color-gray2);}
.bar-fill {display: block; height: 100%; border-radius: inherit; background-color: var(--color-static1);}


@media screen and (max-width: 1280px) {
    .dash-grid .dash-today, .dash-grid .dash-history {grid-column: span 6;}
}

@media screen and (max-width: 1024px) {
    .dash-grid .dash-settle, .dash-grid .dash-program {grid-column: span 6;}
}

@media screen and (max-width: 768px) {
    .chart-plot {height: 240px;}
}

@media screen and (max-width: 480px) {
    .chart-canvas {padding-left: 64px; padding-right: 16px;}
    .chart-plot {height: 200px;}
    .log-item {grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-inline: 0;}
    .log-when {flex-direction: row; column-gap: 8px;}
}