/**
 * 预约管理专用样式。
 * 每个日期分组拥有独立表头、展开状态和横向滚动区；列表单元格只做垂直居中，
 * 不强制改变系统原有左右对齐。修改列时须同步 appointment-form-v2.js 的
 * colgroup/colspan/sticky 序号，并在桌面与 390px 窄屏检查固定列。
 */
#appointments > .intro { align-items: center; }
.appointment-form-v2 [hidden], .appointment-day-card [hidden] { display: none !important; }
.appointment-v2-drawer:not(.open) { visibility: hidden; pointer-events: none; }
#appointments > .card > .appointment-days-viewport { height: 562px; padding: 12px; background: #f5f8f7; overflow-x: auto; }
.appointment-day-list { display: grid; gap: 16px; }
.appointment-day-card { min-width: 0; background: #fff; border: 1px solid #dce6e2; border-radius: 10px; box-shadow: 0 2px 4px #163e3510; }
.appointment-day-card.is-today { border: 2px solid #72aaa0; box-shadow: 0 0 0 2px #e0f0e9; }
/* 日期分组标题与单日/全部展开收起控制。 */
.appointment-day-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; background: #f1f6f4; border-radius: 9px 9px 0 0; }
.is-today > .appointment-day-header { background: #e4f3ec; }
.appointment-day-heading { display: flex; align-items: center; gap: 9px; flex: none; }
.appointment-day-toggle { border: 0; background: none; color: var(--teal); padding: 4px 0; font: inherit; font-weight: 800; cursor: pointer; }
.appointment-day-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.appointment-day-count { color: var(--muted); font-size: 12px; }
.appointment-today-badge { border-radius: 4px; padding: 2px 6px; background: #257b69; color: #fff; font-size: 11px; white-space: nowrap; }
.appointment-note-editor { display: grid; grid-template-columns: minmax(160px, 1fr) auto; align-items: start; gap: 0 8px; flex: 1 1 320px; min-width: 0; }
.appointment-note-editor textarea { width: 100%; min-height: 36px; max-height: 116px; margin: 0; border: 1px solid #d1dfd9; border-radius: 6px; padding: 7px 10px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; line-height: 20px; resize: vertical; overflow-wrap: anywhere; }
.appointment-note-editor textarea:focus { outline: 2px solid #a5cebf; border-color: var(--teal); }
.appointment-note-buttons { display: flex; gap: 4px; align-items: center; }
.appointment-note-buttons .btn { font-size: 12px; padding: 8px 9px; }
.appointment-note-feedback { grid-column: 1 / -1; color: var(--muted); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.appointment-note-feedback:not(:empty) { padding-top: 4px; }
.appointment-note-feedback.is-error, .appointment-note-unavailable { color: #a34a36; }
.appointment-note-unavailable { flex: 1 1 280px; font-size: 12px; overflow-wrap: anywhere; }
.appointment-day-note-readonly { flex: 1 1 240px; display: flex; gap: 9px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.appointment-day-note-readonly small { flex: none; color: var(--muted); }
.appointment-note-editor .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.appointment-day-scroll { --time-width: 110px; --staff-width: 170px; --status-width: 108px; --actions-width: 186px; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 0 0 9px 9px; }
.appointment-day-scroll:focus-visible { outline: 2px solid #72aaa0; outline-offset: -2px; }
#appointments .appointment-day-card .appointment-v2-table { table-layout: fixed; width: 1734px; min-width: 1734px; border-collapse: separate; border-spacing: 0; }
#appointments .appointment-day-card .appointment-v2-table.without-number-column { width: 1634px; min-width: 1634px; }
#appointments .appointment-col-time { width: var(--time-width); }
#appointments .appointment-col-staff { width: var(--staff-width); }
#appointments .appointment-col-customer { width: 165px; }
#appointments .appointment-col-product { width: 225px; }
#appointments .appointment-col-term { width: 90px; }
#appointments .appointment-col-amount { width: 135px; }
#appointments .appointment-col-client-type { width: 90px; }
#appointments .appointment-col-remarks { width: 245px; }
#appointments .appointment-col-user { width: 110px; }
#appointments .appointment-col-number { width: 100px; }
#appointments .appointment-payment-details { margin-top: 4px; }
#appointments .appointment-col-status { width: var(--status-width); }
#appointments .appointment-col-actions { width: var(--actions-width); }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table tr { height: auto; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table th,
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table td { height: auto; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; vertical-align: middle; background: #fff; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table th { position: static; background: #f8faf9; border-top: 1px solid #e0e9e4; font-size: 14px; color: #334b4b; font-weight: 700; opacity: 1; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table :is(th,td):first-child:not([colspan]) { position: sticky; left: 0; z-index: 2; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table :is(th,td):nth-child(2) { position: sticky; left: var(--time-width); z-index: 2; box-shadow: 5px 0 6px #153a3210; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table.has-number-column :is(th,td):nth-child(11),
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table.without-number-column :is(th,td):nth-child(10) { position: sticky; right: var(--actions-width); z-index: 2; box-shadow: -5px 0 6px #153a3210; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table.has-number-column :is(th,td):nth-child(12),
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table.without-number-column :is(th,td):nth-child(11) { position: sticky; right: 0; z-index: 2; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table .row-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
#appointments .appointment-day-card .appointment-day-scroll .appointment-v2-table .row-actions button { flex: 0 0 auto; }
#appointments .appointment-day-card .appointment-v2-table :is(.name,.small) { white-space: normal; overflow: visible; text-overflow: clip; }
#appointments .appointment-staff { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; }
#appointments .appointment-staff > div { min-width: 0; }
#appointments .appointment-staff small { color: var(--muted); }
#appointments .appointment-staff .mini-avatar { flex-shrink: 0; }
#appointments .appointment-companion { align-items: center; }
#appointments .appointment-companion-label { width: 24px; flex: 0 0 24px; display: grid; place-items: center; font-size: 10px; line-height: 1; white-space: nowrap; }
#appointments .appointment-no-companion { margin-top: 6px; }
#appointments .appointment-month-filter { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
#appointments #appointment-month-search { width: 150px; min-width: 140px; }
#appointments .appointment-filter-group { display: flex; gap: 8px; align-items: center; flex: none; }
#appointments .appointment-filter-group .filter-label { flex: none; }
#appointments .appointment-filter-group select { width: 128px; min-width: 118px; }
@media (max-width: 900px) {
  #appointments > .card > .appointment-days-viewport { height: min(562px, calc(100dvh - 300px)); }
  .appointment-day-header { padding: 10px; }
  .appointment-note-editor { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .appointment-day-card { min-width: 520px; }
}
/* 预约与新单共用向导的导航和底部操作视觉，保留预约原有字段网格。 */
#drawer.appointment-intake-drawer{height:100dvh;max-height:100dvh;width:min(900px,96vw);padding:0;display:flex;flex-direction:column;overflow:hidden}
#drawer.appointment-intake-drawer>.drawer-head{flex:none;margin:0;padding:14px 20px;border-bottom:1px solid var(--line)}
#drawer.appointment-intake-drawer>#drawer-body{flex:1;min-height:0;padding:0;overflow:hidden}
.appointment-intake-drawer .appointment-form-v2{height:100%;min-height:0;padding:0;overflow:hidden}
.appointment-intake-layout{display:grid;grid-template-columns:180px minmax(0,1fr);height:100%;min-height:0;background:#fff}
.appointment-intake-nav{min-height:0;overflow:auto}
.appointment-intake-step{white-space:normal}
.appointment-field-search{margin:14px 0 0;padding-top:14px;border-top:1px solid #dce6e2}
.appointment-field-search>label{display:block;margin-bottom:6px;color:#355d57;font-size:12px;font-weight:700}
.appointment-field-search>input{display:block;width:100%;min-width:0;box-sizing:border-box;padding:8px 9px;border:1px solid #c8d9d4;border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:12px}
.appointment-field-search>input:focus{outline:2px solid rgba(25,113,104,.22);border-color:var(--teal)}
.appointment-field-search-results{margin-top:7px;max-height:260px;overflow:auto;border:1px solid #d9e6e1;border-radius:9px;background:#fff;box-shadow:0 6px 14px #153a3214}
.appointment-field-search-results[hidden]{display:none}
.appointment-field-search-results button{display:block;width:100%;padding:8px 9px;border:0;border-bottom:1px solid #edf2ef;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.appointment-field-search-results button:last-child{border-bottom:0}
.appointment-field-search-results button:hover,.appointment-field-search-results button:focus{background:#eef8f4;outline:0}
.appointment-field-search-results :is(strong,small,em){display:block;line-height:1.35}
.appointment-field-search-results strong{font-size:12px}
.appointment-field-search-results small{margin-top:2px;color:#667b75;font-size:11px}
.appointment-field-search-results em{margin-top:3px;color:#986d23;font-size:11px;font-style:normal}
.appointment-field-search-results p{margin:0;padding:9px;color:#667b75;font-size:11px;line-height:1.4}
.appointment-intake-page .appointment-field-search-hit{outline:2px solid #d9982e;outline-offset:5px;border-radius:5px;transition:outline-color .3s}
.appointment-intake-content{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:0}
.appointment-intake-page{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px 28px 28px!important;margin:0!important;border:0!important;box-shadow:none!important}
.appointment-intake-page[hidden]{display:none!important}
.appointment-intake-page .appointment-v2-section-title{font-size:21px;margin-bottom:18px}
/* Excel 補充欄位與原預約欄位共用字體、標籤及輸入框尺寸。 */
.appointment-intake-drawer .appointment-form-v2{font-family:Inter,"Noto Sans TC","PingFang TC",sans-serif;font-size:14px}
.appointment-intake-page .appointment-v2-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.appointment-intake-pair{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.appointment-discount-row.appointment-discount-with-prepay-term{grid-template-columns:repeat(3,minmax(0,1fr))}
.appointment-intake-pair[data-appointment-prepay-pair].appointment-prepay-single,.appointment-intake-pair[data-status-prepay-pair].appointment-prepay-single{grid-column:auto;grid-template-columns:minmax(0,1fr)}
#appointment-status-turn-form [data-status-prepay-pair][hidden],#appointment-status-turn-form [data-status-prepay-term][hidden]{display:none!important}
.appointment-intake-subheading{grid-column:1/-1;margin:10px 0 0;padding:10px 0 4px;border-top:1px solid #dce6e2;color:var(--teal);font-size:15px;font-weight:700}
.appointment-signing-subheading{margin-top:26px;padding-top:16px;border-top-color:#b9d4cc}
.appointment-intake-page .appointment-v2-grid > .field,.appointment-intake-pair > .field{min-width:0}
.appointment-intake-page .appointment-v2-grid > .field > label,.appointment-intake-pair > .field > label{font-family:inherit;font-size:12px;font-weight:700;line-height:1.4}
.appointment-intake-page .appointment-v2-grid > .field > :is(input,select,textarea),.appointment-intake-pair > .field > :is(input,select,textarea){display:block;width:100%;min-width:0;box-sizing:border-box;font-family:inherit;font-size:14px;line-height:20px}
.appointment-intake-page .appointment-v2-grid > .field > :is(input,select),.appointment-intake-pair > .field > :is(input,select){min-height:43px}
.appointment-field-hint{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}
.appointment-excel-import{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:14px 16px;margin:0 0 20px;border:1px solid #cfe4df;border-radius:12px;background:#f1faf7}
.appointment-excel-import strong,.appointment-excel-import span{display:block}.appointment-excel-import span{font-size:12px;color:#607875;margin-top:3px}
.appointment-import-status{grid-column:1/-1;padding:8px 10px;border-radius:8px;background:#e2f4ef;color:#176e64;font-size:12px}
.appointment-import-status.has-warning{background:#fff4df;color:#8b6114}
.appointment-form-v2 .appointment-import-needs-manual{border-color:#cf3f46!important;box-shadow:0 0 0 2px rgba(207,63,70,.12)}
.appointment-form-v2 .appointment-import-needs-manual:focus{outline:2px solid #cf3f46;outline-offset:1px}
.appointment-form-v2 .appointment-v2-time-picker:has(.appointment-import-needs-manual) .appointment-v2-time-trigger{border-color:#cf3f46!important;box-shadow:0 0 0 2px rgba(207,63,70,.12)}
.appointment-intake-content>.form-footer{flex:none;align-items:center;gap:8px;margin:0;padding:12px 20px;background:#fff;box-shadow:0 -4px 12px #153a320a}
.appointment-intake-content>.form-footer{flex-wrap:wrap}
.appointment-wizard-left{display:flex;align-items:center;gap:8px;margin-right:auto}
.appointment-intake-content>.form-footer [hidden]{display:none!important}
.appointment-draft-notice{margin:-8px 0 16px;padding:10px;border:1px solid #cfe4df;border-radius:9px;background:#f1faf7;font-size:12px;line-height:1.5}
.appointment-draft-notice strong,.appointment-draft-notice small{display:block}
.appointment-draft-notice small{color:var(--muted)}
.appointment-draft-notice>div{display:flex;gap:8px;margin-top:7px}
.appointment-draft-notice button{padding:4px 7px;border:1px solid #b9d4cc;border-radius:6px;background:#fff;color:var(--teal);font:inherit;cursor:pointer}
.appointment-intake-page [data-intake-beneficiary-table] .table-wrap{max-width:100%;overflow-x:auto}.appointment-beneficiary-table{width:max-content;min-width:1320px;table-layout:auto}.appointment-beneficiary-table :is(th,td){padding:10px 12px;white-space:nowrap;overflow:visible}.appointment-beneficiary-table :is(input,select){width:100%;min-height:43px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:10px 11px;background:#fff;color:var(--ink);font-family:inherit;font-size:14px}.appointment-beneficiary-table td input:not([inputmode=decimal]){field-sizing:content;width:auto;min-width:100%;max-width:none}.appointment-beneficiary-table :is(th,td):nth-child(1){width:125px;min-width:125px;max-width:125px}.appointment-beneficiary-table :is(th,td):nth-child(2){min-width:150px}.appointment-beneficiary-table :is(th,td):nth-child(3){min-width:190px}.appointment-beneficiary-table :is(th,td):nth-child(4){width:100px;min-width:100px;max-width:100px}.appointment-beneficiary-table :is(th,td):nth-child(5){width:150px;min-width:150px;max-width:150px}.appointment-beneficiary-table :is(th,td):nth-child(6){min-width:245px}.appointment-beneficiary-table :is(th,td):nth-child(7){width:95px;min-width:95px;max-width:95px}
.appointment-original-review>p{margin:0 0 18px;color:#486262;font-size:13px;line-height:1.6}
.appointment-review-group+ .appointment-review-group{margin-top:22px}
.appointment-review-group h3{margin:0 0 10px;color:#245c55;font-size:15px}
.appointment-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.appointment-review-field{display:grid;gap:4px;min-width:0;padding:9px 11px;border:1px solid #e0eae6;border-radius:8px;background:#fbfdfc}
.appointment-review-field span{color:#516967;font-size:12px}.appointment-review-field strong{color:#273d3b;font-size:14px;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:600px){.appointment-review-grid{grid-template-columns:1fr}}
@media (max-width:900px){#drawer.appointment-intake-drawer{width:100vw}.appointment-intake-layout{grid-template-columns:132px minmax(0,1fr)}.appointment-intake-nav{padding:14px 8px}.appointment-intake-step{padding:9px 6px;gap:6px}.appointment-intake-page{padding:12px!important}.appointment-intake-content>.form-footer{padding:10px 12px;gap:6px}.appointment-intake-content>.form-footer .btn{padding:9px 10px;font-size:12px}}
@media (max-width:700px){.appointment-intake-page .appointment-v2-grid{grid-template-columns:1fr;gap:14px}}
@media (max-width:700px){.appointment-intake-pair{grid-template-columns:1fr;gap:14px}}
@media (max-width:700px){.appointment-discount-row.appointment-discount-with-prepay-term{grid-template-columns:1fr}}
@media (max-width:480px){.appointment-intake-layout{grid-template-columns:112px minmax(0,1fr)}.appointment-intake-nav h2{font-size:13px}.appointment-intake-step{font-size:12px}.appointment-intake-step .step-no{display:none}}