/* StayCare 專屬元件：房態日曆、房價格、房務卡片、帳單
   基礎樣式（版面、表單、表格、Modal）沿用 style.css，這裡只加旅館領域特有的畫面。 */

:root {
  --stay-accent: #0f766e;
  --stay-accent-light: #ccfbf1;
}

/* ---- 統計卡 ---- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.stat { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 14px; }
.stat.accent { border-color: var(--stay-accent); background: var(--stay-accent-light); }
.stat.warn { border-color: #f59e0b; background: #fffbeb; }
.stat-label { font-size: 12px; color: #64748b; }
.stat-value { font-size: 24px; font-weight: 700; margin: 4px 0 2px; }
.stat-sub { font-size: 12px; color: #94a3b8; }
.stat-inline { margin-left: auto; font-size: 14px; }
.stat-inline b { font-size: 18px; color: var(--stay-accent); }

/* ---- 長條圖（純 CSS，不引外部圖表庫） ---- */
.bars { display: flex; gap: 4px; align-items: flex-end; overflow-x: auto; padding: 10px 0; }
.bar-col { flex: 1 0 34px; text-align: center; }
.bar-track { height: 110px; display: flex; align-items: flex-end; background: #f1f5f9; border-radius: 4px; }
.bar-fill { width: 100%; background: var(--stay-accent); border-radius: 4px; min-height: 2px; transition: height .2s; }
.bar-fill.full { background: #dc2626; }
.bar-label { font-size: 10px; color: #64748b; margin-top: 4px; }
.bar-value { font-size: 10px; color: #94a3b8; }

/* ---- 房態日曆 ---- */
.cal-wrap { overflow-x: auto; }
table.cal { border-collapse: collapse; width: 100%; font-size: 12px; }
table.cal th, table.cal td { border: 1px solid #e2e8f0; padding: 0; }
table.cal thead th { background: #f8fafc; padding: 4px 2px; text-align: center; font-weight: 600; min-width: 34px; }
table.cal thead th.weekend { background: #fef3c7; }
table.cal thead th.today { background: var(--stay-accent); color: #fff; }
table.cal thead th .wd { font-size: 10px; color: #94a3b8; }
table.cal thead th.today .wd { color: #ccfbf1; }
th.cal-room { background: #f8fafc; text-align: left; padding: 6px 8px; min-width: 110px; position: sticky; left: 0; z-index: 2; }
th.cal-room .rn { font-size: 14px; font-weight: 700; }
th.cal-room .rt { font-size: 11px; color: #94a3b8; }
td.cal-track { position: relative; height: 44px; padding: 0; }
.cal-inner { position: absolute; inset: 2px; z-index: 1; pointer-events: none; }
.cal-bg { width: 100%; height: 100%; border-collapse: collapse; }
.cal-bg td { border-right: 1px solid #f1f5f9; height: 44px; }
.cal-bg td.today { background: #f0fdfa; }
.cal-span {
  position: absolute; top: 0; bottom: 0; margin: 2px 1px;
  background: var(--ch, #2563eb); color: #fff; border-radius: 5px;
  display: flex; align-items: center; padding: 0 6px; gap: 4px;
  font-size: 11px; overflow: hidden; white-space: nowrap;
  cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.cal-span:hover { filter: brightness(1.1); }
.cal-span span { overflow: hidden; text-overflow: ellipsis; }
.cal-span .dot { background: #fbbf24; color: #78350f; border-radius: 3px; padding: 0 3px; font-size: 10px; }
.cal-span.st-tentative { opacity: .65; border: 1px dashed #fff; }
.cal-span.st-checked_in { box-shadow: inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.2); }
.cal-span.st-checked_out { opacity: .45; }
.cal-ooo {
  position: absolute; inset: 0; pointer-events: auto;
  background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 6px, #cbd5e1 6px, #cbd5e1 12px);
  border-radius: 4px;
}

/* ---- 房價日曆 ---- */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 10px 0 20px; }
.rate-cell { border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 6px; text-align: center; background: #fff; }
.rate-cell.special { border-color: var(--stay-accent); background: var(--stay-accent-light); }
.rate-cell.full { border-color: #dc2626; background: #fef2f2; }
.rate-cell.closed { background: #f1f5f9; color: #94a3b8; }
.rc-date { font-size: 11px; color: #64748b; }
.rc-wd { color: #94a3b8; }
.rc-rate { font-size: 15px; font-weight: 700; margin: 2px 0; }
.rc-avail { font-size: 11px; color: #64748b; }
.rc-label { font-size: 10px; color: var(--stay-accent); margin-top: 2px; }

/* ---- 空房查詢卡 ---- */
.avail-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.avail-card.blocked { opacity: .6; background: #f8fafc; }
.ac-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-head .price { font-size: 19px; color: var(--stay-accent); margin-left: 8px; }
.ac-nights { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; font-size: 11px; color: #64748b; }
.ac-nights span { background: #f1f5f9; border-radius: 4px; padding: 2px 6px; }

/* ---- 訂單詳情 ---- */
.res-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; }
.res-guest { font-size: 18px; font-weight: 700; }
.res-status { text-align: right; }
.res-dates { font-size: 13px; color: #64748b; margin-top: 4px; }
.res-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 12px 0; }
.res-money > div { background: #f8fafc; border-radius: 8px; padding: 8px; text-align: center; }
.res-money span { display: block; font-size: 11px; color: #64748b; }
.res-money b { font-size: 15px; }
.res-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

/* ---- 房務卡 ---- */
.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.hk-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; background: #fff; font-size: 12px; }
.hk-card.hk-dirty { border-color: #f59e0b; background: #fffbeb; }
.hk-card.hk-ooo { background: #f1f5f9; color: #64748b; }
.hk-card.urgent { box-shadow: 0 0 0 2px #fca5a5; }
.hk-head { display: flex; justify-content: space-between; align-items: center; }
.hk-head b { font-size: 17px; }
.hk-type { color: #94a3b8; }
.hk-sit { margin: 5px 0; font-weight: 600; }
.hk-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

/* ---- 權限勾選 ---- */
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.perm-group { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; }
.perm-title { font-size: 12px; font-weight: 700; color: var(--stay-accent); margin-bottom: 5px; }

/* ---- 分頁籤 ---- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e2e8f0; margin: 12px 0; }
.tab { border: 0; background: none; padding: 8px 14px; cursor: pointer; font-size: 14px;
  color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab.active { color: var(--stay-accent); border-bottom-color: var(--stay-accent); font-weight: 700; }

/* ---- 帳單 ---- */
.bill { background: #fff; padding: 20px; font-size: 13px; }
.bill h2 { margin: 0 0 4px; text-align: center; }
.bill-sub { text-align: center; color: #64748b; margin-bottom: 14px; }
.bill-meta { width: 100%; margin-bottom: 12px; }
.bill-meta td { padding: 3px 6px; }
.bill-meta td:nth-child(odd) { color: #64748b; width: 70px; }
.bill-total { width: 100%; margin-top: 12px; }
.bill-total td { padding: 4px 6px; }
.bill-total td:last-child { text-align: right; }
.bill-total tr.big td { font-size: 17px; font-weight: 700; border-top: 2px solid #333; padding-top: 8px; }
.bill-foot { text-align: center; color: #94a3b8; margin-top: 18px; font-size: 12px; }
.print-body { background: #fff; margin: 0; }
@media print { .print-body .bill { padding: 0; } }

/* ---- 雜項 ---- */
.ch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
tr.voided { opacity: .5; text-decoration: line-through; }
.tag.muted-tag { background: #e2e8f0; color: #64748b; }
.page-actions { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
h4 { margin: 16px 0 6px; font-size: 14px; color: #475569; }