.reservation-page {
    padding: 20px;
}

/* customers 페이지도 동일한 여백 사용 */
.customers-page {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.page-header h1 {
    font-size: 28px;
    color: #1f2937;
}

.btn-add {
    padding: 10px 20px;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-add:hover {
    background-color: #1d4ed8;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border-bottom: 4px solid #2563eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
}

.search-filter {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.search-filter input,
.search-filter select {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}

.btn-filter {
    padding: 8px 16px;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-filter:hover {
    background-color: #1d4ed8;
}

.table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-edit, .btn-delete {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-edit {
    background-color: #3b82f6;
    color: white;
}

.btn-edit:hover {
    background-color: #2563eb;
}

.btn-delete {
    background-color: #ef4444;
    color: white;
}

.btn-delete:hover {
    background-color: #dc2626;
}

.no-data {
    text-align: center;
    padding: 40px;
    color: #6b7280;
    font-size: 14px;
}

/* 객실 현황 카드 그리드 */
.room-filters { margin-bottom: 12px; }
.room-filters .filter-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.room-filters .status-filters label { margin-right:10px; font-size:13px; color:var(--text-secondary); }
.room-filters .type-buttons { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.room-filters .type-buttons .type-btn, .room-filters .type-buttons .type-all { padding:6px 12px; border-radius:18px; border:1px solid var(--border-color); background:var(--bg-primary); cursor:pointer; font-size:13px; }
.room-filters .type-buttons .active { background:var(--primary-light); }

.room-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.room-card { background:#fff; border-radius:8px; border:1px solid var(--border-color); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.room-card .card-header { background: linear-gradient(90deg,#7c3aed,#c084fc); color:#fff; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; }
.room-card .room-number { font-weight:700; }
.room-card .room-type { font-weight:600; font-size:13px; opacity:0.95; margin-left:8px; }
.room-card .card-body { padding:12px; flex:1; background: #f0fff4; }
.room-card .price { margin-bottom:8px; color:var(--text-primary); }
.room-card .note { font-size:13px; color:var(--text-secondary); }
.room-card .card-footer { padding:10px 12px; border-top:1px solid var(--border-color); text-align:left; }
.room-card .card-footer .btn-secondary { padding:8px 10px; border-radius:6px; }

@media (max-width: 768px) {
    .room-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== RESPONSIVE - 예약 관리 페이지 ==================== */

/* 태블릿 */
@media screen and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .search-filter {
        flex-wrap: wrap;
    }
    
    .search-filter input,
    .search-filter select {
        flex: 1;
        min-width: 150px;
    }
}

/* 모바일 */
@media screen and (max-width: 768px) {
    .reservation-page {
        padding: 15px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .page-header h1 {
        font-size: 22px;
    }
    
    .btn-add {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .search-filter {
        flex-direction: column;
    }
    
    .search-filter input,
    .search-filter select {
        width: 100%;
    }
    
    .btn-filter {
        width: 100%;
        padding: 10px;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .data-table {
        min-width: 800px;
    }
}

/* 작은 모바일 */
@media screen and (max-width: 480px) {
    .page-header h1 {
        font-size: 18px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 12px;
    }
}

/* 달력 스타일 */
.calendar-container { margin-top: 12px; overflow-x: auto; position:relative; }
.room-calendar { width: 100%; border-collapse: collapse; min-width: unset; table-layout: fixed; }
.room-calendar thead th { background-color: #3b82f6; color:#fff; padding:10px; text-align:center; position:sticky; top:0; z-index:5; }
.room-calendar thead th .weekday{ font-size:11px; color: #ffffff; }
.room-calendar { position:relative; }
.room-calendar td, .room-calendar th { border:1px solid #ddd; vertical-align:middle; background: var(--bg-primary); }
.room-calendar td { padding:0; height:56px; min-width:0; }
.room-calendar .col-type { width:160px; max-width:160px; padding:8px; text-align:center; vertical-align:middle; }
.room-calendar .col-room { width:120px; max-width:140px; padding:8px; text-align:center; vertical-align:middle; }
.cal-cell { padding:0; }
.cal-cell .cell-am, .cal-cell .cell-pm { display:flex; align-items:center; justify-content:center; height:56px; padding:6px 8px; font-size:12px; color:var(--text-secondary); }
.cell-am { border-right: 1px solid rgba(2,6,23,0.04); }
.cell-am.busy { background: #dbeafe; color: #0f172a; font-weight:600; }
.cell-pm.busy { background: #fef3c7; color: #0f172a; font-weight:600; }
.cell-am.busy small, .cell-pm.busy small { font-weight:500; }

.room-calendar td .small { font-size:11px; color:var(--text-secondary); text-align:center; }

/* header AM/PM labels */
.room-calendar thead th .th-am-pm { display:none; }
.room-calendar thead th.half { background-color: #3b82f6 !important; color: #fff; font-size:11px; padding:6px 8px; border-bottom: none !important; }
.room-calendar thead th.date-header { background-color: #3b82f6 !important; color: #fff; border-bottom: none !important; }

@media (max-width: 1024px) {
    .room-calendar { min-width: 900px; }
}

/* 모바일에서는 AM/PM을 다시 세로 스택으로 */
@media (max-width: 600px) {
    .cal-cell { flex-direction: column; }
    .cal-cell .cell-am { border-right: none; border-bottom: 1px solid var(--border-color); }
}

/* responsive: 테이블이 부모너비를 채우도록 하고 필요시 스크롤 허용 */
.calendar-wrap { width:100%; overflow:auto; }
.room-calendar th, .room-calendar td { text-overflow:ellipsis; }

/* 작은 화면에서 타입/객실 칼럼을 고정하고 날짜 칸은 줄이도록 처리 */
@media (max-width: 900px) {
    .room-calendar .col-type { width:140px; }
    .room-calendar .col-room { width:100px; }
}

/* Header blue + rounded wrapper to match 객실 리스트 스타일 */
.calendar-wrap { background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(2,6,23,0.06); }
.room-calendar { border-radius: 10px; overflow: hidden; }
.room-calendar thead th { background-color: #3b82f6; color: #fff; padding:12px; }
.room-calendar thead th.half { background-color: #3b82f6; color:#e6eefc; }

/* 테이블 상단 라운드 처리 (좌우 꼭지점) */
.room-calendar thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.room-calendar thead tr:first-child th:last-child { border-top-right-radius: 10px; }

/* 헤더 아래 경계 강조 */
.room-calendar thead th { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06); }

/* 날짜 컬럼(3번째 컬럼부터) 수직 경계 강화 */
.room-calendar tbody td:nth-child(n+3) {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

/* 각 AM/PM 블록을 구분하는 경계선 추가 */
.cal-cell .cell-am, .cal-cell .cell-pm {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}
.room-calendar td.cal-cell .cell-am { border-right: 1px solid rgba(2,6,23,0.04); }
.room-calendar thead th.half { background-color: #3b82f6; color: #fff; font-size:11px; padding:8px 6px; }
.room-calendar thead th.date-header { background-color: #3b82f6; color: #fff; padding:10px; }
.room-calendar tbody tr + tr td { border-top: 1px solid #ddd; }

/* 헤더와 본문 사이 구분선 강조 */
.room-calendar thead th { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06); }

/* 예약 상세 모달 */
.res-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:2000; }
.res-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.res-modal-dialog { position:relative; background:var(--bg-primary); width:720px; max-width:95%; border-radius:8px; box-shadow:0 12px 40px rgba(2,6,23,0.4); overflow:hidden; z-index:2001; }
.res-modal-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-color); }
.res-modal-body { padding:16px; max-height:60vh; overflow:auto; }
.res-modal-footer { padding:12px 16px; border-top:1px solid var(--border-color); text-align:right; }
.modal-close { background:transparent; border:none; font-size:20px; cursor:pointer; }

/* reservation bar overlay */
.calendar-overlay { position:absolute; left:0; top:0; pointer-events:none; }
.res-bar { box-shadow: 0 2px 6px rgba(2,6,23,0.08); font-size:13px; padding-left:12px; pointer-events:none; }
.res-bar:hover { box-shadow: 0 6px 18px rgba(2,6,23,0.14); }

/* ensure bars don't hide borders: leave small gap around bars */
.res-bar { z-index:1; }