/* 露琺意店務系統 — 共用樣式（後台 + 客人預約頁）*/
:root {
  --bg: #faf7f5;
  --card: #ffffff;
  --ink: #3d3436;
  --muted: #9b8e90;
  --primary: #b56576;
  --primary-dark: #94505f;
  --primary-soft: #f3e4e6;
  --accent: #e6c9c0;
  --line: #ece5e2;
  --ok: #6a994e;
  --warn: #ca8a04;
  --danger: #bc4749;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(90, 60, 65, .06), 0 1px 3px rgba(90, 60, 65, .05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.hidden { display: none !important; }

/* 版面 */
.app-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.app-header .brand { font-weight: 800; color: var(--primary-dark); font-size: 1.05rem; letter-spacing: .5px; }
.tabs { display: flex; gap: 4px; background: var(--primary-soft); padding: 4px; border-radius: 999px; }
.tabs button {
  border: 0; background: transparent; color: var(--primary-dark);
  padding: 7px 16px; border-radius: 999px; font-size: .92rem; cursor: pointer; font-weight: 600;
}
.tabs button.active { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.container { max-width: 880px; margin: 0 auto; padding: 18px 16px 80px; }

/* 卡片 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h2 { font-size: 1.05rem; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat .num { font-size: 1.6rem; font-weight: 800; color: var(--primary-dark); }
.stat .label { font-size: .8rem; color: var(--muted); }
@media (max-width: 620px) { .grid-stats { grid-template-columns: repeat(2, 1fr); } }

/* 表單 */
label { display: block; font-size: .85rem; color: var(--muted); margin: 8px 0 4px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
textarea { resize: vertical; min-height: 60px; }

/* 按鈕 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 10px; padding: 11px 18px; font-size: .95rem; font-weight: 700;
  cursor: pointer; background: var(--primary); color: #fff; transition: filter .15s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.ghost { background: var(--primary-soft); color: var(--primary-dark); }
.btn.outline { background: #fff; color: var(--primary-dark); border: 1px solid var(--line); }
.btn.sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 清單 */
.list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: #fcfaf9; }
.list-item .title { font-weight: 700; }
.list-item .sub { font-size: .82rem; color: var(--muted); }

/* 標籤/狀態 */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge.booked { background: #eef2ff; color: #4356b0; }
.badge.arrived { background: #e8f5e9; color: #2e7d32; }
.badge.done { background: #e0f2f1; color: #00695c; }
.badge.cancelled { background: #f5f5f5; color: #888; }
.badge.noshow { background: #fdecea; color: var(--danger); }
.badge.tag { background: var(--primary-soft); color: var(--primary-dark); }

/* 時段格 */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.slot { padding: 10px 4px; text-align: center; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; background: #fff; }
.slot.taken { background: #f6f2f1; color: #c9bcbc; cursor: not-allowed; text-decoration: line-through; }
.slot.sel { background: var(--primary); color: #fff; border-color: var(--primary); }
.slot.offsch { background: #fff; color: #cbbfc1; border-style: dashed; }   /* 班表外，仍可點 */

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(60,40,45,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto; padding: 20px 18px 32px; }
@media (min-width: 621px) { .modal-bg { align-items: center; } .modal { border-radius: 20px; } }
.modal h2 { display: flex; justify-content: space-between; align-items: center; }
.modal .close { background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--muted); }

/* 消費項目列 */
.item-row { display: grid; grid-template-columns: 1fr 54px 90px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.item-row input { padding: 8px; }

.nick { font-weight: 600; color: var(--primary-dark); background: var(--primary-soft);
  padding: 1px 8px; border-radius: 999px; font-size: .8em; letter-spacing: .02em; }

.warn-band { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: .84rem; line-height: 1.6;
  background: #fdf6e7; border: 1px solid #e8d5a3; color: #7a5c14; }

/* 月曆（一週一排）*/
.cal-head { display: flex; align-items: center; gap: 8px; }
.cal-head b { flex: 1; text-align: center; font-size: 1.05rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: .78rem; color: var(--muted); font-weight: 700; padding: 2px 0; }
.cal-cell {
  position: relative; min-height: 96px; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 5px; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.blank { border: 0; background: transparent; cursor: default; }
.cal-cell.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-cell.closed { background: #f7f4f3; }
.cal-cell.past { opacity: .55; }
.cal-d { font-weight: 800; font-size: .9rem; }
.cal-hours { font-size: .67rem; line-height: 1.3; color: var(--primary-dark); }
.cal-cell.closed .cal-hours { color: var(--muted); }
.cal-n { margin-top: auto; align-self: flex-start; font-size: .67rem; font-weight: 700;
  color: #fff; background: var(--primary); border-radius: 999px; padding: 1px 7px; }
.cal-cell.custom::after { content: ''; position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
@media (max-width: 620px) {
  .cal-cell { min-height: 64px; padding: 3px 4px; }
  .cal-hours { font-size: .58rem; }
  .cal-d { font-size: .82rem; }
}

.cal-ev { font-size:.62rem; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-radius:4px; padding:1px 4px; background:var(--primary-soft); color:var(--primary-dark); }
.cal-ev b { font-weight:700; margin-right:3px; }
.cal-ev i { font-style:normal; opacity:.7; margin-left:3px; }
.cal-ev.no-staff { background:#f4f0ef; color:#8b7c80; }
.cal-more { font-size:.6rem; color:var(--muted); padding-left:4px; }

/* ── 人員配色 ──────────────────────────────────────────────
   顏色 = 誰　／　樣式 = 什麼（實心＝預約、虛線＝休假）
   兩個維度分開編碼，才不會「顏色」同時要表達兩件事。
   刻意避開琥珀與黃：那兩色已經有意義（原本的休假色、個別調整黃點）。 */
.sc-0 { --sc:#a8475c; --scbg:#f8e6ea; }   /* 玫瑰（品牌色系）*/
.sc-1 { --sc:#1f6f6a; --scbg:#dcefec; }   /* 墨綠 */
.sc-2 { --sc:#5b4b9a; --scbg:#e8e5f4; }   /* 紫 */
.sc-3 { --sc:#4a7a3a; --scbg:#e6f0e1; }   /* 草綠 */
.sc-4 { --sc:#8a5a2b; --scbg:#f3e8dc; }   /* 褐 */
.no-staff { --sc:#8b7c80; --scbg:#f2efee; }

/* 預約＝實心，左側粗邊界是主要辨識點（色盲也分得出來）*/
.cal-ev { background:var(--scbg, var(--primary-soft)); color:var(--sc, var(--primary-dark));
  border-left:3px solid var(--sc, var(--primary)); }
.cal-ev.no-staff { border-left-style:dotted; }

/* 休假＝虛線外框、無底色。跟預約在形狀上就分得開,不必靠顏色 */
.cal-off { font-size:.62rem; line-height:1.35; font-weight:700; border-radius:4px;
  padding:0 4px; background:transparent; color:var(--sc, #9a6413);
  border:1px dashed var(--sc, #f0d8ae);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 上方對照列：一行同時說明「誰是什麼顏色」與「誰這個月休哪幾天」*/
.off-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:8px 10px; margin-bottom:10px; border-radius:10px;
  background:#fbfaf9; border:1px solid var(--line); font-size:.84rem; }
.off-who { display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:3px 11px; font-weight:700; color:var(--sc); }
.off-who em { width:9px; height:9px; border-radius:50%; background:var(--sc); flex:none; }
.off-who i { font-style:normal; font-weight:600; color:var(--muted); }
.off-who i.none { font-weight:500; opacity:.6; }

@media (max-width: 620px) {
  .cal-off { font-size:.56rem; }
  .off-bar { font-size:.78rem; gap:6px; padding:7px 8px; }
  .off-who { padding:2px 9px; }
}
.day-col { margin-bottom:10px; }
/* 單日視窗的人員分組標題吃同一套 --sc/--scbg，跟月曆的顏色對得起來。
   沒有 sc-* class 時 fallback 回原本的品牌色，行為不變。 */
.day-col-h { font-size:.78rem; font-weight:700; color:var(--sc, var(--primary-dark));
  background:var(--scbg, var(--primary-soft)); border-radius:6px; padding:4px 8px; }
.day-col.unassigned .day-col-h { background:#f4efe9; color:var(--warn); }

.offdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.offday { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 0; font-size: .9rem;
  font-weight: 700; color: var(--ink); cursor: pointer; background: #fff; }
.offday.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.offday input { width: auto; margin: 0; accent-color: var(--primary); }

/* 班表編輯 */
.sch-day { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.sch-day.on { background: #fdfbfa; border-color: var(--accent); }
.sch-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sch-check { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink); }
.sch-check input { width: auto; }
.sch-seg { display: grid; grid-template-columns: 1fr 12px 1fr 34px; gap: 6px; align-items: center; margin-top: 6px; }
.sch-seg input { padding: 7px 8px; font-size: .92rem; }
.sch-seg .muted { text-align: center; }

/* 登入 */
.login-wrap { max-width: 360px; margin: 12vh auto; padding: 0 20px; text-align: center; }
.login-wrap .logo { font-size: 1.8rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 4px; }

/* toast */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: .9rem; z-index: 100; opacity: 0; transition: opacity .25s; pointer-events: none; box-shadow: var(--shadow); }
#toast.show { opacity: .96; }

.empty { text-align: center; color: var(--muted); padding: 28px 10px; }
.spinner { text-align: center; padding: 30px; color: var(--muted); }

/* 加到主畫面後以全螢幕執行：沒有瀏覽器列，要自己閃開瀏海與底部橫條 */
@media (display-mode: standalone) {
  .app-header { padding-top: calc(12px + env(safe-area-inset-top)); }
  .container  { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .login-wrap { margin-top: calc(12vh + env(safe-area-inset-top)); }
}