/* 通用重置 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f5f6fa; color: #333; }

/* 布局 */
.container { display: flex; height: 100vh; }

/* 侧边栏 */
.sidebar { width: 200px; background: #fff; border-right: 1px solid #e1e1e1; padding: 20px; }
.sidebar .logo { font-size: 1.5rem; margin-bottom: 1rem; }
.sidebar ul { list-style: none; }
.sidebar li { margin: 10px 0; }
.sidebar li a { text-decoration: none; color: #555; display: block; padding: 8px; border-radius: 4px; }
.sidebar li.active a, .sidebar li a:hover { background: #e3f2fd; color: #1976d2; }

/* 主内容 */
.main-content { flex: 1; padding: 20px; overflow-y: auto; }

/* 卡片 */
.cards { display: flex; gap: 20px; margin-bottom: 30px; }
.card { flex: 1; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.card p { font-size: 2rem; color: #1976d2; }

/* 表格 */
.table-section h2 { margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
thead th { text-align: left; padding: 12px; background: #fafafa; border-bottom: 1px solid #e1e1e1; }
tbody td { padding: 12px; border-bottom: 1px solid #e1e1e1; }

.status { padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; }

/* 状态下拉（收起时颜色生效关键是 appearance:none） */
.status-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E");
    min-width: 140px;
}
.status-select:focus { outline: none; box-shadow: 0 0 0 2px rgba(25,118,210,0.2); }

.metric-number{
    display:inline-block; font-size:2rem; line-height:1; font-weight:600;
    color:#1a73e8; text-decoration:none;
}
.metric-number:hover{ text-decoration:underline; }

/* 预定/入住等状态配色 */
.status-select.reserved      { background-color:#e8f5e9; color:#388e3c; }  /* 予約済み */
.status-select.checkedin     { background-color:#e3f2fd; color:#1976d2; }  /* 利用中 */
.status-select.not_checkedin { background-color:#fff3e0; color:#f57c00; }  /* 未チェックイン */
.status-select.unconfirmed   { background-color:#fffde7; color:#f9a825; }  /* 超過利用 */
.status-select.uncleaned     { background-color:#ffebee; color:#d32f2f; }  /* 未清掃 */

/* ========= rooms 的编辑弹窗 ========= */
dialog#room-edit {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    margin: 0; width: min(560px, 92vw); max-height: 85vh; overflow: auto;
    background: #fff; border: 0; border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    padding: 20px 22px;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* 所有 dialog 的弹出动效 */
dialog[open]{ animation: dlg-pop .16s ease-out both; }
@keyframes dlg-pop{ from{opacity:0;transform:translate(-50%,-48%) scale(.98)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
dialog#room-edit::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(1.5px); }

/* rooms 弹窗内部 */
#room-edit h3 { margin: 0 0 12px; font-size: 18px; }
#room-edit .form-grid { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; }
@media (max-width: 480px){ #room-edit .form-grid { grid-template-columns: 1fr; } }
#room-edit .form-grid label { align-self: center; color: #555; }
@media (max-width: 480px){ #room-edit .form-grid label { align-self: end; } }
#room-edit input[type="text"], #room-edit input[type="number"]{
    width: 100%; height: 34px; padding: 6px 10px; border: 1px solid #d7d7d7;
    border-radius: 8px; background: #fafafa; transition: border-color .15s, box-shadow .15s, background .15s;
}
#room-edit input:focus-visible{
    outline: none; border-color: #2979ff; background: #fff;
    box-shadow: 0 0 0 3px rgba(41,121,255,.18);
}

/* lost 的 3 个状态颜色 */
.status-select option[value="kept"]      { background:#e3f2fd; color:#1976d2; }
.status-select option[value="returned"]  { background:#e8f5e9; color:#388e3c; }
.status-select option[value="discarded"] { background:#ffebee; color:#d32f2f; }

/* ========= 予約新規作成弹窗（放大 + 住客网格） ========= */
dialog#reservationModal{
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    margin: 0;
    width: min(920px, 96vw);     /* 放大 */
    max-width: 920px;
    max-height: 85vh; overflow: auto;
    background: #fff; border: 0; border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    padding: 20px 24px 18px;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
dialog#reservationModal::backdrop{
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1.5px);
}

/* 预约弹窗内表单样式 */
#reservationModal label{ display:block; margin:10px 0 6px; font-weight:600; color:#555; }
#reservationModal input[type="text"],
#reservationModal input[type="number"],
#reservationModal input[type="datetime-local"],
#reservationModal select{
    width:100%; height:36px; padding:6px 10px; border:1px solid #d7d7d7;
    border-radius:8px; background:#fafafa; transition:border-color .15s, box-shadow .15s, background .15s;
}
#reservationModal input:focus-visible, #reservationModal select:focus-visible{
    outline:none; border-color:#2979ff; background:#fff; box-shadow:0 0 0 3px rgba(41,121,255,.18);
}

/* 住客区域（JS 会创建 .guest-rows / .guest-row） */
#reservationModal .guest-rows{
    display:flex; flex-direction:column; gap:10px; margin-top:6px;
}
#reservationModal .guest-row{
    display:grid;
    grid-template-columns: 140px 140px 120px 140px 150px 1fr auto; /* 姓 / 名 / 性别 / 国籍 / 电话 / 邮箱 / 删除 */
    gap:8px 10px; align-items:center;
}
#reservationModal .guest-row input, #reservationModal .guest-row select{ width:100%; }
#reservationModal .guest-row .btn-remove{ white-space:nowrap; }

/* 通用按钮（含弹窗） */
.btn{ padding:6px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:#1976d2; color:#fff; border-color:#1976d2; }
.btn-primary:hover{ filter:brightness(1.05); }

/* 窄屏自动折行（住客行） */
@media (max-width: 900px){
    dialog#reservationModal{ width:96vw; max-width:96vw; }
    #reservationModal .guest-row{
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(36px, auto);
    }
    #reservationModal .guest-row .btn-remove{ grid-column: 2 / 3; justify-self:end; }
}