.productivity-panel { border:1px solid #dbe6f8; border-radius:14px; padding:16px; margin:14px 0; background:#f4f8ff; color:#173565; font-size:14px; line-height:1.6; }
.productivity-panel h3,.productivity-panel h4 { margin:0 0 8px; font-size:17px; }
.productivity-panel p { margin:6px 0; }
.productivity-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
.productivity-change { padding:10px 0; border-bottom:1px solid #dbe6f8; }
.productivity-change label { display:flex; gap:8px; align-items:center; font-weight:600; }
.productivity-change input[type=checkbox] { width:18px; height:18px; }
.productivity-change input:not([type=checkbox]),.productivity-panel select,.productivity-panel textarea { width:100%; margin:6px 0; font-size:14px; }
.productivity-change input:not([type=checkbox]),.appointment-filters input,.appointment-editor input,.productivity-panel select { box-sizing:border-box; min-height:40px; padding:8px 10px; border:1px solid #b9cdec; border-radius:8px; background:#fff; color:#173565; }
.productivity-evidence { color:#52698c; font-size:14px; overflow-wrap:anywhere; }
.productivity-warning { color:#9a5b12; }
.productivity-error { color:#b42318; }
.productivity-summary { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.productivity-summary section { min-width:0; border-bottom:1px solid #dbe6f8; padding-bottom:8px; }
.productivity-summary button { color:#235fd4; font-size:14px; text-align:left; text-decoration:underline; border:0; padding:0; background:transparent; }
.productivity-summary li { margin:6px 0; }
.productivity-summary ul { padding-left:19px; }
.productivity-source-focus { outline:2px solid #235fd4; outline-offset:2px; }
.appointment-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:18px 0; }
.appointment-filters label { display:flex; flex-direction:column; gap:5px; font-size:14px; }
.appointment-row { display:grid; grid-template-columns:145px 1fr auto; align-items:start; gap:18px; padding:18px 0; border-bottom:1px solid #dbe6f8; font-size:15px; }
.appointment-row strong { display:block; font-size:16px; }
.appointment-row p { margin:4px 0; color:#52698c; }
.appointment-editor { max-width:650px; }
.appointment-editor label { display:block; margin:10px 0; }
.appointment-editor input,.appointment-editor select { display:block; width:100%; font-size:15px; margin-top:5px; }
@media(max-width:700px) { .productivity-summary {grid-template-columns:1fr;} .appointment-row { grid-template-columns:1fr; gap:8px;} .appointment-filters label{flex:1;min-width:130px;} }
.productivity-panel[hidden], [data-productivity-calendar][hidden], #sales-add-appointment[hidden] { display:none !important; }
.productivity-demo { margin:10px 0 14px; font-size:14px; }
.productivity-demo > summary { width:fit-content; color:#235fd4; cursor:pointer; font-weight:600; padding:5px 0; }
.productivity-demo > summary:focus-visible { outline:2px solid #235fd4; outline-offset:3px; border-radius:3px; }
.productivity-demo-content { border-left:3px solid #b9cdec; padding:12px 14px; margin-top:6px; background:#fff; line-height:1.65; overflow-wrap:anywhere; }
.productivity-demo-content h4 { margin-bottom:6px; font-size:16px; }
.productivity-demo-quote { color:#173565; font-weight:600; }
.productivity-demo dl { margin:10px 0; }
.productivity-demo dl > div { display:grid; grid-template-columns:112px 1fr; gap:10px; padding:5px 0; border-bottom:1px solid #dbe6f8; }
.productivity-demo dt { color:#52698c; }
.productivity-demo dd { margin:0; color:#173565; }
.productivity-demo-note { color:#52698c; }
@media(max-width:420px) { .productivity-demo dl > div { grid-template-columns:1fr; gap:2px; } }

/* The calendar is a reception timetable, not a vertical feed. */
#view-appointments { color:#172b4d; --calendar-blue:#306cff; --calendar-line:#dde6f2; }
#view-appointments button,#view-appointments input,#view-appointments select { font-family:inherit; }
.appointment-page-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 16px; }
.appointment-page-head h2 { margin:0 0 7px; font-size:28px; line-height:1.25; letter-spacing:0; }
.appointment-page-head p { margin:0; font-size:15px; color:#60718e; }
.appointment-page-head .productivity-actions { margin:0; }
.appointment-scope-label { padding:9px 14px; color:#426089; font-size:14px; background:#edf3ff; border-radius:7px; }
.appointment-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 18px; background:#fff; border:1px solid var(--calendar-line); border-radius:14px 14px 0 0; }
.appointment-period { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.appointment-period > strong { font-size:19px; font-variant-numeric:tabular-nums; }
.appointment-period-arrows { display:flex; gap:5px; }
.appointment-period-arrows button { width:34px; height:34px; border:1px solid var(--calendar-line); border-radius:6px; background:#fff; color:#334f75; font-size:25px; line-height:1; cursor:pointer; }
.appointment-period-arrows button:disabled { opacity:.35; cursor:default; }
.appointment-date-jump { display:flex; gap:7px; align-items:center; font-size:13px; color:#60718e; }
.appointment-date-jump input { border:1px solid var(--calendar-line); border-radius:6px; padding:7px; font-size:13px; color:#334f75; background:#fff; max-width:146px; }
.appointment-view-switch { display:flex; padding:3px; border:1px solid var(--calendar-line); border-radius:8px; background:#f2f5fa; flex-shrink:0; }
.appointment-view-switch button { border:0; background:transparent; color:#60718e; font-size:14px; padding:8px 13px; border-radius:5px; cursor:pointer; white-space:nowrap; }
.appointment-view-switch button.active { background:#fff; color:#245cdb; font-weight:700; box-shadow:0 1px 4px #17356515; }
.appointment-toolbar-secondary { padding:8px 18px; border-top:0; border-bottom:0; border-radius:0; min-height:50px; }
.appointment-shortcuts { display:flex; gap:4px; }
.appointment-shortcuts button { border:0; border-radius:6px; padding:7px 11px; background:transparent; color:#31527c; font-size:14px; cursor:pointer; }
.appointment-shortcuts button:hover { color:#245cdb; background:#edf3ff; }
#view-appointments .appointment-filters { margin:0; gap:14px; align-items:center; font-size:13px; color:#60718e; }
#view-appointments .appointment-filters label { flex-direction:row; gap:8px; align-items:center; font-size:13px; white-space:nowrap; flex-shrink:0; }
#view-appointments .appointment-filters select { max-width:170px; border:1px solid var(--calendar-line); border-radius:6px; padding:7px 28px 7px 10px; color:#334f75; background:#fff; font-size:14px; min-height:34px; }
.appointment-summary-line { padding:9px 18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--calendar-line); border-top:0; border-bottom:0; font-size:14px; color:#60718e; }
.appointment-summary-line strong { color:#172b4d; font-size:17px; margin:0 3px; }
.appointment-legend { display:flex; flex-wrap:wrap; gap:15px; font-size:12px; }
.appointment-legend > span::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:#b3883c; margin-right:6px; }
.appointment-legend .is-confirmed::before { background:#306cff; }
.appointment-legend .is-legacy::before { background:#8393b2; }
.appointment-legend .is-arrived::before { background:#16856a; }
.appointment-legend .is-overdue::before { background:#c45348; }
.appointment-timetable-scroll { max-height:calc(100vh - 230px); min-height:460px; overflow:auto; border:1px solid var(--calendar-line); border-radius:0 0 14px 14px; background:#fff; overscroll-behavior:contain; scrollbar-color:#b5c7e3 #f5f8fd; }
.appointment-timetable { border-collapse:separate; border-spacing:0; width:100%; min-width:calc(64px + var(--calendar-days) * 112px); table-layout:fixed; font-size:14px; }
.appointment-timetable th,.appointment-timetable td { border-right:1px solid #e7edf5; border-bottom:1px solid #e7edf5; padding:6px; vertical-align:top; }
.appointment-timetable tr > :last-child { border-right:0; }
.appointment-timetable thead th { position:sticky; top:0; z-index:3; height:69px; padding:9px 5px 8px; text-align:center; background:#f7f9fc; font-weight:500; color:#60718e; box-shadow:0 1px 0 var(--calendar-line); }
.appointment-timetable thead th > span { display:inline; font-size:13px; }
.appointment-timetable thead th > b { display:inline-block; margin-left:7px; color:#263e62; font-size:22px; line-height:1.3; font-weight:650; }
.appointment-timetable thead th > small { display:block; margin-top:5px; font-size:12px; }
.appointment-timetable .appointment-time-axis { width:64px; position:sticky; left:0; z-index:2; text-align:center; color:#74829a; background:#fafbfd; font-weight:500; font-size:12px; font-variant-numeric:tabular-nums; padding:10px 3px; }
.appointment-timetable thead .appointment-time-axis { z-index:4; padding-top:25px; }
.appointment-timetable tbody td { height:84px; background:#fff; }
.appointment-timetable tbody tr:last-child > * { border-bottom:0; }
.appointment-timetable thead th.is-weekend { background:#f0f4fb; }
.appointment-timetable td.is-today { background:#f5f8ff; }
.appointment-timetable thead th.is-today { background:#edf3ff; color:#306cff; border-top:3px solid #306cff; padding-top:8px; }
.appointment-timetable thead th.is-today b { color:#245cdb; }
.appointment-timetable .appointment-unscheduled td { height:auto; min-height:42px; background:#fbfcfe; }
.appointment-unscheduled th { font-size:11px; }
.appointment-cell-empty { display:block; padding:4px; text-align:center; color:#bac5d6; }
.appointment-event { display:block; width:100%; text-align:left; box-sizing:border-box; padding:10px; margin:0 0 7px; border:1px solid #d4e1fc; border-left:3px solid #306cff; border-radius:7px; background:#edf3ff; color:#203e70; cursor:pointer; line-height:1.4; overflow-wrap:anywhere; }
.appointment-event:last-child { margin-bottom:0; }
.appointment-event:hover { box-shadow:0 2px 7px #243d701a; filter:brightness(.98); }
.appointment-event-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:5px; margin-bottom:7px; font-size:14px; }
.appointment-event-top > b { font-weight:650; font-variant-numeric:tabular-nums; }
.appointment-event-status { font-size:12px; white-space:normal; border:1px solid currentColor; border-radius:4px; padding:1px 4px; line-height:1.35; }
.appointment-event > strong { display:block; font-size:16px; font-weight:650; line-height:1.45; margin-bottom:7px; }
.appointment-event-owner { display:flex; justify-content:space-between; gap:5px; font-size:13px; color:inherit; opacity:.88; }
.appointment-event.is-tentative { background:#fffaed; border-color:#f0e2ba; border-left-color:#b3883c; color:#735522; }
.appointment-event.is-legacy { background:#f3f5f9; border-color:#dce2ec; border-left-color:#8393b2; color:#536580; }
.appointment-event.is-arrived { background:#eaf7f1; border-color:#c5e7d6; border-left-color:#16856a; color:#16694f; }
.appointment-event.is-overdue { background:#fff0ed; border-color:#f0d0c8; border-left-color:#c45348; color:#923d35; }
.appointment-event.is-closed { background:#f5f6f8; border-color:#e2e5eb; border-left-color:#a9b0bc; color:#778295; }
.appointment-footnote { color:#74829a; margin:12px 2px 0; font-size:12px; line-height:1.6; }
.appointment-undated-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); align-items:start; gap:14px; padding:20px; min-height:300px; border:1px solid var(--calendar-line); border-radius:0 0 14px 14px; background:#fff; }
.appointment-empty { color:#60718e; grid-column:1/-1; padding:40px 0; text-align:center; }
.appointment-loading { min-height:460px; display:grid; place-items:center; background:#fff; border:1px solid var(--calendar-line); border-radius:0 0 14px 14px; color:#60718e; }
.appointment-notice { padding:14px 18px; background:#fff0ed; margin:0; }
.appointment-detail { position:fixed; inset:0; margin:auto; box-sizing:border-box; width:min(560px,calc(100vw - 32px)); max-height:min(85vh,calc(100dvh - 32px)); overflow:auto; border:1px solid #d4e0f2; border-radius:16px; padding:26px; color:#172b4d; box-shadow:0 20px 70px #172b4d30; }
.appointment-detail::backdrop { background:#172b4d55; }
.appointment-editor-dialog { width:min(720px,calc(100vw - 24px)); background:#fff; font-size:15px; line-height:1.6; }
.appointment-editor-dialog label { display:block; margin:14px 0 6px; color:#173565; font-weight:600; }
.appointment-editor-dialog input:not([type=hidden]),.appointment-editor-dialog select { display:block; box-sizing:border-box; width:100%; min-height:44px; padding:9px 12px; margin-top:6px; border:1px solid #a8bddf; border-radius:8px; color:#172b4d; background:#fff; font-size:15px; }
.appointment-customer-search { display:flex; gap:10px; align-items:center; }
.appointment-customer-search input { flex:1; min-width:0; margin:0 !important; }
.appointment-customer-search .btn { flex-shrink:0; min-height:44px; }
.appointment-customer-hint { color:#60718e; font-size:13px; margin:10px 0; }
.appointment-customer-results { max-height:225px; overflow:auto; overscroll-behavior:contain; margin:12px 0; border-block:1px solid #e2eaf6; }
.appointment-customer-option { display:block; width:100%; padding:12px; color:#263b60; background:#fff; border:0; border-bottom:1px solid #e2eaf6; text-align:left; cursor:pointer; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.appointment-customer-option > span { display:block; }
.appointment-customer-option:hover,.appointment-customer-option[aria-pressed=true] { background:#edf4ff; }
.appointment-customer-option .appointment-customer-heading { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.appointment-customer-heading strong { font-size:15px; color:#173565; }
.appointment-customer-remark { color:#60718e; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.appointment-more-customers { display:block; margin:8px auto; padding:6px 16px; color:#245fcf; background:transparent; border:1px solid #a8bddf; border-radius:8px; cursor:pointer; }
.appointment-more-customers[hidden],.appointment-customer-selected[hidden] { display:none; }
.appointment-customer-selected { display:flex; flex-wrap:wrap; gap:6px 12px; padding:12px; margin:14px 0; background:#edf4ff; border:1px solid #a8c5fa; border-radius:8px; color:#244c8c; font-size:14px; }
.appointment-editor-dates { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.appointment-editor-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 0 0; margin-top:18px; border-top:1px solid #e2eaf6; background:#fff; position:sticky; bottom:-26px; }
.appointment-editor-actions .btn { min-height:44px; min-width:90px; }
.appointment-editor-dialog .btn.outline { background:#fff; color:#263751; border:1px solid #8093b3; box-shadow:none; }
.appointment-editor-dialog :is(button,input,select):focus-visible { outline:2px solid #306cff; outline-offset:2px; }
@media(max-width:600px) { .appointment-editor-dates { grid-template-columns:1fr; gap:0; } .appointment-editor-actions { bottom:-18px; } .appointment-customer-results { max-height:190px; } .appointment-editor-dialog input:not([type=hidden]),.appointment-editor-dialog select { font-size:16px; } }
.appointment-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.appointment-detail-heading span { color:#60718e; font-size:13px; }
.appointment-detail-heading h3 { margin:5px 0 20px; font-size:23px; overflow-wrap:anywhere; }
.appointment-detail-heading > button { flex:0 0 36px; border:0; background:#f0f4fa; color:#60718e; border-radius:6px; width:36px; height:36px; font-size:24px; cursor:pointer; }
.appointment-detail dl { margin:0 0 20px; }
.appointment-detail dl > div { display:grid; grid-template-columns:90px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid #e7edf5; font-size:15px; line-height:1.6; }
.appointment-detail dt { color:#74829a; }
.appointment-detail dd { margin:0; overflow-wrap:anywhere; }
.calendar-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#view-appointments button:focus-visible,#view-appointments select:focus-visible,#view-appointments input:focus-visible { outline:2px solid #306cff; outline-offset:3px; }
@media(min-width:1700px) { .appointment-timetable-scroll { min-height:570px; } .appointment-event > strong { font-size:17px; } .appointment-event-owner { font-size:14px; } }
@media(max-width:1150px) { .appointment-toolbar { flex-wrap:wrap; } .appointment-date-jump { margin-left:0; } .appointment-period > strong { font-size:17px; } }
@media(max-width:700px) {
 .appointment-page-head { gap:10px; margin-bottom:16px; align-items:flex-start; }
 .appointment-page-head h2 { font-size:25px; } .appointment-page-head p { max-width:220px; font-size:13px; }
 .appointment-scope-label { display:none; } .appointment-toolbar { padding:12px; gap:12px; }
 .appointment-period { gap:8px; } .appointment-period > strong { font-size:15px; }
 .appointment-date-jump { width:100%; } .appointment-summary-line { padding:12px; }
 .appointment-toolbar-secondary { align-items:flex-start; } .appointment-shortcuts { flex-wrap:wrap; }
 #view-appointments .appointment-filters { gap:10px; } #view-appointments .appointment-filters label { flex:none; min-width:0; }
 .appointment-timetable-scroll { max-height:70vh; min-height:400px; }
 .appointment-detail { padding:18px; } .appointment-legend { gap:10px; }
}
@media(prefers-reduced-motion:reduce) { #view-appointments * { scroll-behavior:auto !important; transition:none !important; } }