/* TOP1 — Group Booking (đặt lịch nhóm).
   Màn back-office: danh sách nhóm + composer nhiều participant + validate dry-run.
   Tái dùng tokens & component primitives của app.css / calendar.css. */

/* ── KPI strip ──────────────────────────────────────────────────────── */
.gb-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-bottom:var(--space-5);}
.gb-kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); padding:14px 16px;}
.gb-kpi .k{font-size:var(--text-xs); color:var(--muted); display:flex; align-items:center; gap:7px;}
.gb-kpi .k svg{width:15px; height:15px; color:var(--accent);}
.gb-kpi .v{font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); letter-spacing:-0.02em; margin-top:4px;}
.gb-kpi .v small{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; color:var(--muted); letter-spacing:0;}
@media (max-width:1180px){ .gb-kpis{grid-template-columns:repeat(2,1fr);} }

/* ── Group list (cards) ─────────────────────────────────────────────── */
.gb-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); overflow:hidden;}
.gb-list{display:flex; flex-direction:column;}
.gb-card{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--dur-fast);}
.gb-card:last-child{border-bottom:0;}
.gb-card:hover{background:var(--surface-2);}
.gb-card.is-cancelled{opacity:.66;}
.gb-card.is-cancelled .gb-name{text-decoration:line-through; color:var(--muted);}
.gb-card-main{display:flex; align-items:center; gap:13px; min-width:0;}
.gb-mark{width:42px; height:42px; border-radius:var(--radius-md); display:grid; place-items:center; flex:none; background:var(--primary-soft); color:var(--primary); }
.gb-mark svg{width:21px; height:21px;}
.gb-name{font-family:var(--font-display); font-weight:700; font-size:var(--text-md); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gb-id{font-family:var(--font-mono); font-size:11px; color:var(--subtle); margin-left:8px;}
.gb-meta{font-size:var(--text-xs); color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; margin-top:3px;}
.gb-meta b{color:var(--fg); font-weight:600;}
.gb-meta .num{font-family:var(--font-mono);}
.gb-right{display:flex; align-items:center; gap:16px; justify-self:end;}
.gb-avs{display:flex;}
.gb-avs .avatar{margin-left:-8px; border:2px solid var(--surface);}
.gb-avs .avatar:first-child{margin-left:0;}
.gb-avs .more{margin-left:-8px; width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); background:var(--surface-3); color:var(--muted); font-size:11px; font-weight:600; display:grid; place-items:center;}
.gb-chev{color:var(--subtle);}
.gb-empty{padding:56px var(--space-4); text-align:center; color:var(--muted); font-size:var(--text-sm);}

/* ── Composer: meta nhóm (ngày dùng chung + người đại diện) ─────────── */
.gc-meta-row{display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-4); align-items:end;}
.gc-meta-row .field{gap:6px;}
.gc-meta-row .gc-meta-hint{font-size:11px; line-height:1.4; color:var(--muted); align-self:center; margin:0;}
.gc-meta-row select.input{cursor:pointer;}

/* Tab người tham gia: chọn người đang soạn (giống tab trình duyệt). */
.gc-ptabs{display:flex; flex-wrap:wrap; gap:8px;}
.gc-ptab{display:inline-flex; align-items:center; gap:9px; padding:7px 9px 7px 7px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast); max-width:240px;}
.gc-ptab:hover{border-color:var(--border-strong);}
.gc-ptab.active{border-color:transparent; background:var(--primary-soft); box-shadow:inset 0 0 0 1.5px var(--primary);}
.gc-ptab-av{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; font-family:var(--font-mono);}
.gc-ptab-meta{display:flex; flex-direction:column; min-width:0; line-height:1.18;}
.gc-ptab-meta b{font-size:var(--text-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gc-ptab-meta span{font-size:10px; color:var(--muted); font-family:var(--font-mono);}
.gc-ptab.active .gc-ptab-meta b{color:var(--primary-soft-fg);}
.gc-ptab-ok{color:var(--success-fg); display:grid; place-items:center; flex:none;}
.gc-ptab-x{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:var(--subtle); flex:none;}
.gc-ptab-x:hover{background:var(--danger-bg); color:var(--danger-fg);}
.gc-ptab-add{display:inline-flex; align-items:center; gap:6px; padding:0 14px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:transparent; color:var(--primary); font-weight:600; font-size:var(--text-sm); cursor:pointer;}
.gc-ptab-add:hover{background:var(--primary-soft);}

/* Editor 1 người = đúng các khối picker của composer chuẩn. */
.gc-editor{display:flex; flex-direction:column; gap:var(--space-4); margin-top:14px; padding-top:16px; border-top:1px solid var(--border);}
.gc-editor .svc-line .num{margin-left:auto;}

.gc-field-lbl{font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;}
.gc-svc-chips{display:flex; flex-wrap:wrap; gap:6px;}
.gc-svc-chips .chip{height:32px;}
.gc-svc-chips .chip .px{font-family:var(--font-mono); font-size:11px; opacity:.7;}

/* Dịch vụ chia nhóm theo danh mục (Móng / Spa-Mi) — scoped để không đụng booking chuẩn. */
#gc-svc-mount{display:block;}
#gc-svc-mount .gc-svc-cat{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle); margin:12px 0 7px;}
#gc-svc-mount .gc-svc-cat:first-child{margin-top:0;}
#gc-svc-mount .gc-svc-row{display:flex; flex-wrap:wrap; gap:7px;}
#gc-svc-mount .pick-svc{padding:6px 11px; border-radius:var(--radius-full);}
#gc-svc-mount .pick-empty{font-size:var(--text-sm); color:var(--subtle);}

/* ── Right summary: per-participant lines ───────────────────────────── */
.gc-sum-parts{display:flex; flex-direction:column; gap:9px;}
.gc-sum-part{display:flex; align-items:center; gap:10px; font-size:var(--text-sm);}
.gc-sum-part .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.gc-sum-part .gsp-main{min-width:0; flex:1;}
.gc-sum-part .gsp-main b{display:block; font-weight:600; color:var(--fg-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gc-sum-part .gsp-main span{font-size:11px; color:var(--muted);}
.gc-sum-part .gsp-amt{font-family:var(--font-mono); font-weight:600;}
.gc-sum-empty{font-size:var(--text-sm); color:var(--subtle);}

/* ── Right summary: header "Người tham gia (X/N)" ───────────────────── */
.gc-sum-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--fg-strong);}
.gc-sum-count{font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--muted);}

/* ── Mã ưu đãi (hiển thị, chưa nối logic) ───────────────────────────── */
.gc-coupon-block .label{margin-bottom:2px;}
.gc-coupon-row{display:flex; gap:8px;}
.gc-coupon-row .input{flex:1; min-width:0;}
.gc-coupon-row .btn{flex:none;}
.gc-coupon-note{font-size:11px; color:var(--subtle);}

/* ── Footer: ghi chú điều kiện + hành động ──────────────────────────── */
.gc-foot{display:flex; flex-direction:column; gap:10px;}
.gc-foot-note{font-size:var(--text-xs); line-height:1.45; color:var(--muted);}
.gc-foot-btns{display:grid; grid-template-columns:1fr 1.4fr; gap:8px;}
.gc-foot-btns .btn{width:100%;}

/* ── Validate messages (render trong #gc-vres ở footer) ─────────────── */
.vres{display:flex; flex-direction:column; gap:6px;}
.vres-item{display:flex; gap:8px; align-items:flex-start; font-size:var(--text-xs); line-height:1.4; padding:8px 10px; border-radius:var(--radius-md);}
.vres-item svg{width:14px; height:14px; flex:none; margin-top:1px;}
.vres-item.err{background:var(--danger-bg); color:var(--danger-fg);}
.vres-item.warn{background:var(--warning-bg); color:var(--warning-fg);}
.vres-item.ok{background:var(--success-bg); color:var(--success-fg);}

/* ── Detail drawer: participant rows ────────────────────────────────── */
.pd-list{display:flex; flex-direction:column;}
.pd{display:flex; flex-direction:column; gap:9px; padding:13px 0; border-bottom:1px solid var(--border);}
.pd:last-child{border-bottom:0;}
.pd.is-cancelled{opacity:.6;}
.pd.is-cancelled .pd-name{text-decoration:line-through;}
.pd-top{display:flex; align-items:center; gap:10px;}
.pd-name{font-weight:600; font-size:var(--text-sm); color:var(--fg-strong);}
.pd-meta{font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.pd-amt{margin-left:auto; font-family:var(--font-mono); font-weight:600; font-size:var(--text-sm);}
.pd-svcs{display:flex; flex-wrap:wrap; gap:5px; padding-left:36px;}
.pd-svc{font-size:11px; padding:2px 8px; border-radius:var(--radius-full); background:var(--surface-3); color:var(--muted);}
.pd-act{display:flex; gap:7px; padding-left:36px;}

/* ── Toast ──────────────────────────────────────────────────────────── */
.gb-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); background:var(--fg-strong); color:#fff; padding:11px 18px; border-radius:var(--radius-btn); font-size:var(--text-sm); font-weight:500; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:opacity var(--dur-base), transform var(--dur-base); z-index:90; display:flex; align-items:center; gap:9px;}
.gb-toast.show{opacity:1; visibility:visible; transform:translate(-50%,0);}
.gb-toast svg{width:17px; height:17px; color:var(--brand-300);}

@media (max-width:820px){
  .book-grid{grid-template-columns:1fr;}
  .book-summary{border-top:1px solid var(--border);}
  .gb-right .gb-meta{display:none;}
  .gc-meta-row{grid-template-columns:1fr 1fr;}
  .gc-meta-row .gc-meta-hint{grid-column:1 / -1; align-self:start;}
}

/* Trong khung thiết bị mô phỏng, media query theo viewport trình duyệt không
   kích hoạt → ép meta-row xuống hàng theo bề rộng khung. */
.device-phone .gc-meta-row{grid-template-columns:1fr 1fr;}
.device-phone .gc-meta-row .gc-meta-hint{grid-column:1 / -1; align-self:start;}