/*
  アポイントノート（Web版）の共通スタイル。色・余白・角丸はここのトークンだけを使う。
  値はWinUI版のトークン（OPTech.Platform.Xaml\Themes\ Colors/Metrics/Typography）に合わせてある。
*/
:root {
    color-scheme: light;
    --accent: #00a3b4;
    --accent-text: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f3f5f6;
    --page: #fafafa;
    --text: #1b1b1b;
    --text-secondary: #5f6368;
    --line: #d5d9dc;
    --line-strong: #8a9196;
    --line-faint: #eceff1;
    --error-surface: #fde7e9;
    --error-text: #8a1c1c;
    --success-surface: #dff6dd;
    --success-text: #0e5a0e;
    /* 来院日の色分け（WinUI版のカレンダーと同じ色相。初診＝赤系、再診＝青系） */
    --visit-first: #ffd6d6;
    --visit-first-mark: #e05a5a;
    --visit-revisit: #d9dcff;
    --visit-revisit-mark: #5a63e0;
    --visit-appoint: #d6f5d6;
    --visit-appoint-mark: #2e9e44;
    /* 土曜日の文字（勤務表の日付） */
    --saturday-text: #1565c0;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --radius-control: 4px;
    --radius-surface: 6px;
    --font-body: 0.875rem;
    --font-caption: 0.75rem;
    --font-title: 1.25rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface: #1f2224;
        --surface-alt: #2a2e31;
        --page: #17191a;
        --text: #e8eaed;
        --text-secondary: #a9b0b5;
        --line: #3c4246;
        --line-strong: #6d757b;
        --line-faint: #2a2e31;
        --error-surface: #442726;
        --error-text: #ffb4ab;
        --success-surface: #1e3a1e;
        --success-text: #a6e3a1;
        --visit-first: #5a2a2a;
        --visit-first-mark: #ff8c8c;
        --visit-revisit: #2c2f5c;
        --visit-revisit-mark: #8c8cff;
        --visit-appoint: #1f4224;
        --visit-appoint-mark: #7ad98b;
        --saturday-text: #90caf9;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
    font-size: var(--font-body);
}

h1 {
    margin: 0 0 var(--space-12);
    font-size: var(--font-title);
    font-weight: 600;
}

a {
    color: var(--accent);
}

.muted {
    color: var(--text-secondary);
}

.panel {
    max-width: 32rem;
    margin: var(--space-24) auto;
    padding: var(--space-24);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.button {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: var(--space-4) var(--space-12);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.button:disabled {
    opacity: 0.5;
    cursor: default;
}

.button:focus-visible,
input:focus-visible,
.staff:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.field input,
.date {
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-16);
}

.notice {
    margin-bottom: var(--space-12);
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-control);
}

.notice.error {
    background: var(--error-surface);
    color: var(--error-text);
}

.notice.success {
    background: var(--success-surface);
    color: var(--success-text);
}

/* 画面の右下に重ねて出すお知らせ・エラー（スナックバー）。ツールウィンドウの領域（4）より上、ダイアログ（10）より下 */
.snackbar-stack {
    position: fixed;
    right: var(--space-16);
    bottom: var(--space-16);
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    width: min(26rem, calc(100vw - 2 * var(--space-16)));
    pointer-events: none;
}

.snackbar-stack > .notice {
    margin: 0;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* 色の付かないお知らせ（LINEの通知の確認）も、予約表の上に浮くよう地の色を付ける */
.snackbar-stack > .notice:not(.error):not(.success) {
    background: var(--surface);
    border: 1px solid var(--line);
}

/* 「×」で閉じられるバー（文言の右端に「×」） */
.notice-closable {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.notice-text {
    flex: 1;
    min-width: 0;
}

.notice-close {
    flex: none;
    min-width: 1.75rem;
    min-height: 1.75rem;
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8)) calc(-1 * var(--space-4)) 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.notice-close:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.notice-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.pairs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-12);
    margin: 0 0 var(--space-16);
}

.pairs dt {
    color: var(--text-secondary);
}

.pairs dd {
    margin: 0;
}

.staff-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 3rem;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.staff:disabled {
    opacity: 0.5;
    cursor: default;
}

.staff-number {
    min-width: 1.5rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.toolbar-title {
    font-weight: 600;
}

/* 予約表と、選んだ予約の内容。広い画面では横に、狭い画面（縦向きのiPadなど）では下に並べる */
.appoint-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.detail {
    position: sticky;
    top: var(--space-16);
    padding: var(--space-16);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

/* 右のサイドバーの選んだ予約（重なっていれば並べる） */
.detail-group {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.detail-group .detail {
    position: static;
    padding: var(--space-12);
    cursor: pointer;
}

.detail.selected {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
    cursor: default;
}

.detail-group-note {
    margin: 0;
    font-size: var(--font-caption);
}

/* カードのボタンは段に分ける（1段目: 変更と削除、2段目: キャンセル、3段目: コピーと切り取り） */
.detail-actions {
    align-items: center;
}

.detail-action-row {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

/* 段の右端に寄せるボタン（削除） */
.detail-action-end {
    margin-left: auto;
}

.detail-title {
    margin: 0 0 var(--space-12);
    font-size: 1rem;
    font-weight: 600;
}

.detail-comment {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ダイアログ（予約の入力・キャンセル理由など）。画面の上に重ねて出す */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
}

/* 中央寄せは transform を使わない（transform のある要素の中では position: fixed が画面ではなくその要素に閉じ込められ、
   入れ子のダイアログ＝定型文・部位入力が親のダイアログの中に出てしまう） */
.modal {
    position: fixed;
    z-index: 11;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(36rem, calc(100vw - 2 * var(--space-16)));
    max-height: calc(100dvh - 2 * var(--space-16));
    overflow: auto;
    padding: var(--space-24);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.modal-title {
    margin: 0 0 var(--space-8);
    font-size: var(--font-title);
    font-weight: 600;
}

.choices {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-12) 0 0;
    padding: 0;
    border: 0;
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 2rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.button.danger {
    color: var(--error-text);
    border-color: var(--error-text);
}

.detail-confirm {
    flex-basis: 100%;
    margin: 0;
    color: var(--error-text);
}

.modal-wide {
    width: min(48rem, calc(100vw - 2 * var(--space-16)));
}

.form-section {
    margin-bottom: var(--space-16);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-4) var(--space-12);
    margin: 0;
    padding: 0;
    border: 0;
}

.form-wide {
    grid-column: 1 / -1;
}

/* 入力画面で横に並べる組（日付・予約時刻・時間枠、担当医師・担当衛生士・担当助手） */
.form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-12);
    align-items: start;
}

/* 中の欄の下の余白は組の外（.form-grid の行）で取るので、入れ子の欄は詰める */
.form-row .field .field {
    margin-bottom: 0;
}

/* 狭い画面（縦向きのiPadより狭い）では縦に並べる */
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.field select,
.field textarea,
.search select {
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.field textarea {
    resize: vertical;
}

.readonly-comment {
    padding: var(--space-4) var(--space-8);
    background: var(--surface-alt);
    border-radius: var(--radius-control);
    white-space: pre-wrap;
}

.patient {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8);
}

.search .field {
    flex: 1 1 14rem;
    margin-bottom: 0;
}

.search-results {
    display: grid;
    gap: var(--space-4);
    max-height: 16rem;
    overflow: auto;
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-4) var(--space-12);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* 選んでいる患者 */
.patient-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    padding: var(--space-8) var(--space-12);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

/* アポイントの画面: 左にサイドバー（カレンダー・選んでいる患者）、右に予約表 */
.appoint-layout {
    /* 左のサイドバーの幅（畳んだら開くボタンの幅だけ） */
    --left-width: 15rem;
    display: grid;
    grid-template-columns: var(--left-width) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
}

.appoint-main {
    min-width: 0;
}

.sidebar {
    position: sticky;
    top: var(--space-16);
    display: grid;
    gap: var(--space-12);
}

.appoint-layout.left-collapsed {
    --left-width: 2.5rem;
}

.sidebar-content {
    display: grid;
    gap: var(--space-12);
}

/* 左のサイドバーを畳む・開くボタン（右上） */
.sidebar-toggle {
    justify-self: end;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.sidebar-toggle:hover {
    color: var(--text);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* 設定ボタン。画面の左下（サイドバーの列の下端）に固定する。重なり順はツールウィンドウの領域と同じ */
.sidebar-footer {
    position: fixed;
    left: var(--space-16);
    bottom: var(--space-16);
    z-index: 4;
    width: var(--left-width);
}

.sidebar-footer .button {
    justify-content: center;
    width: 100%;
}

/* 右のサイドバー「表示」を開いているとき */
.appoint-layout.with-right {
    grid-template-columns: var(--left-width) minmax(0, 1fr) 14rem;
}

/* 右のサイドバーはどの画面幅でも予約表の右に置き、スクロールしても見えるよう上に留める（下に回すとツールウィンドウに隠れる） */
.sidebar.sidebar-right {
    position: sticky;
    top: var(--space-16);
    display: block;
    max-height: calc(100dvh - 2 * var(--space-16));
    overflow-y: auto;
}

.display-panel {
    padding: var(--space-12);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.display-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.display-group {
    margin: 0 0 var(--space-12);
    padding: 0;
    border: 0;
}

.display-group legend {
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-weight: 600;
}

.display-group .choice {
    min-height: 1.75rem;
}

.display-number {
    margin: var(--space-8) 0 0;
}

.display-number input {
    width: 6rem;
}

.display-note {
    margin: 0 0 var(--space-4);
    font-size: var(--font-caption);
}

/* 狭い画面（縦向きのiPadなど）では、サイドバーを予約表の上に並べる */
@media (max-width: 900px) {
    /* 左のサイドバーは予約表の上に並べ、右のサイドバーは予約表の右に残す */
    .appoint-layout.with-right {
        grid-template-columns: minmax(0, 1fr) 13rem;
    }

    .appoint-layout.with-right > .sidebar:not(.sidebar-right) {
        grid-column: 1 / -1;
    }

    .sidebar-footer {
        position: static;
        width: auto;
    }

    .appoint-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: static;
    }

    .sidebar-content {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        align-items: start;
    }

    .left-collapsed .sidebar-footer {
        width: auto;
    }
}

/* 確認の文（改行を活かす） */
.confirm-message {
    white-space: pre-line;
}

.detail-empty {
    margin: 0;
    padding: var(--space-12);
    border: 1px dashed var(--line);
    border-radius: var(--radius-surface);
    font-size: var(--font-caption);
}

/* スマホ縦: 右のサイドバー（選んだ予約・表示）は予約表の下に、出すものがあるときだけ出す */
@media (max-width: 600px) {
    .sidebar-right-idle {
        display: none;
    }

    .appoint-layout.with-right {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar.sidebar-right {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.sidebar-title {
    margin: 0 0 var(--space-8);
    font-size: var(--font-body);
    font-weight: 600;
}

.patient-card,
.calendar {
    padding: var(--space-12);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.patient-card .pairs {
    margin-bottom: 0;
}

.patient-card .pairs dd {
    overflow-wrap: anywhere;
}

.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}

/* 2か月目の見出しは上の月の日付と離す */
.calendar-grid + .calendar-head {
    margin-top: var(--space-12);
}

/* 前へ・次へのボタンが無い側の空き（見出しを真ん中に保つ） */
.calendar-nav-space {
    min-width: 2rem;
}

.calendar-title {
    font-weight: 600;
}

.calendar-nav {
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.calendar-nav:hover {
    border-color: var(--line);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
}

.calendar-weekday {
    padding: var(--space-4) 0;
    font-size: var(--font-caption);
    color: var(--text-secondary);
}

.calendar-day {
    min-height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.calendar-day:hover {
    border-color: var(--line);
}

.calendar-day.other {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* 休診日は塗って区別する（色だけに頼らず、読み上げは「休診日」） */
.calendar-day.closed {
    background: var(--surface-alt);
    color: var(--text-secondary);
}

.calendar-day.first-visit {
    background: var(--visit-first);
    color: var(--text);
}

.calendar-day.revisit {
    background: var(--visit-revisit);
    color: var(--text);
}

/* 今日以降の予約の日（来院した日の色が優先） */
.calendar-day.appoint {
    background: var(--visit-appoint);
    color: var(--text);
}

/* 入金日は下線 */
.calendar-day.payment {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.calendar-legend {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--font-caption);
}

.calendar-legend > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.calendar-legend-mark {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
}

.calendar-legend-mark.first-visit {
    background: var(--visit-first);
    border: 1px solid var(--visit-first-mark);
}

.calendar-legend-mark.revisit {
    background: var(--visit-revisit);
    border: 1px solid var(--visit-revisit-mark);
}

.calendar-legend-mark.appoint {
    background: var(--visit-appoint);
    border: 1px solid var(--visit-appoint-mark);
}

.calendar-legend-mark.payment {
    width: auto;
    height: auto;
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.calendar-day.today {
    border-color: var(--accent);
}

.calendar-day.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.calendar-day:focus-visible,
.calendar-nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.calendar-today {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-8);
}

/* 見出しと入力欄を縦に並べる（入力欄の下にさらに項目を置くとき） */
.field-inline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field-inline input {
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

/* メニューバー（optone3と同じ並びのメニュー） */
.menubar {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: calc(-1 * var(--space-8)) 0 var(--space-12);
}

.menubar-item {
    position: relative;
}

.menubar-button {
    min-height: 2rem;
    padding: var(--space-4) var(--space-12);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.menubar-button:hover,
.menubar-button.open {
    background: var(--surface-alt);
    border-color: var(--line);
}

.menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 6;
    display: grid;
    min-width: 14rem;
    margin-top: 2px;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-shortcut {
    margin-left: auto;
    padding-left: var(--space-16);
    color: var(--text-secondary);
    font-size: var(--font-caption);
}

.menu-item:hover:not(:disabled) {
    background: var(--surface-alt);
}

.menu-item:disabled {
    color: var(--text-secondary);
    opacity: 0.6;
    cursor: default;
}

.menu-check {
    display: inline-block;
    min-width: 1rem;
}

.menu-separator {
    margin: var(--space-4) 0;
    border-top: 1px solid var(--line);
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
}

.toolbar-separator {
    align-self: stretch;
    border-left: 1px solid var(--line);
}

/* 押している状態のある切り替えボタン（Dr表示など） */
.button.toggle[aria-pressed="true"] {
    background: var(--surface-alt);
    border-color: var(--accent);
    font-weight: 600;
}

/*
  ツールウィンドウ。WinUI版の初期レイアウトの下部と同じく、ペインを横に並べてタブで切り替える。
  予約表の下までスクロールしなくても見えるよう、画面の下端に固定して予約表に重ねる（sticky。
  いちばん下までスクロールしたときは本来の位置＝予約表の下に収まるので、予約表の最後の行は隠れない）。
  重なり順は予約表の見出し（3）より上、メニュー（5・6）とダイアログ（10・11）より下。
  高さはWinUI版の下部の領域（280px）に合わせ、ペインが縦に並ぶ狭い画面でも画面の半分までにする。
*/
.tool-area {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--space-12);
    max-height: 50vh;
    overflow-y: auto;
    margin-top: var(--space-16);
    padding: var(--space-8) 0;
    background: var(--page);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.tool-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.tool-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    padding: 0 var(--space-8);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
}

.tool-pane.collapsed .tool-tabs {
    border-bottom: 0;
    border-radius: var(--radius-surface);
}

.tool-tab {
    padding: var(--space-8) var(--space-12);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.tool-tab[aria-selected="true"] {
    border-bottom-color: var(--accent);
    color: var(--text);
    font-weight: 600;
}

.tool-tab:focus-visible,
.tool-collapse:focus-visible,
.tool-table tbody tr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.tool-collapse {
    min-width: 2rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.tool-content {
    display: grid;
    align-content: start;
    gap: var(--space-8);
    max-height: 280px;
    min-height: 8rem;
    overflow: auto;
    padding: var(--space-8) var(--space-12) var(--space-12);
}

.tool-content > p {
    margin: 0;
}

.tool-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.tool-bar-spacer {
    flex: 1;
}

.tool-table-wrap {
    overflow-x: auto;
}

.tool-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-body);
}

.tool-table th,
.tool-table td {
    padding: var(--space-4) var(--space-8);
    border-bottom: 1px solid var(--line-faint);
    text-align: left;
    vertical-align: top;
}

.tool-table th {
    position: sticky;
    top: 0;
    background: var(--surface-alt);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.tool-table tbody tr {
    cursor: pointer;
}

.tool-table tbody tr:hover {
    background: var(--surface-alt);
}

.tool-table tbody tr.selected {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.nowrap {
    white-space: nowrap;
}

.tool-list {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-list-item {
    padding: var(--space-8);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-control);
}

.tool-caption {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
}

.tool-pairs {
    margin: 0;
}

/* ツールウィンドウの下に添える数（アポイントの無断キャンセル・キャンセル・遅刻の回数） */
.tool-footer {
    margin: var(--space-8) 0 0;
}

/* 入れ子のダイアログ（予約の入力の中から開く定型文・部位入力）。親のダイアログより手前 */
.modal-backdrop.modal-nested {
    z-index: 12;
}

.modal.modal-nested {
    z-index: 13;
}

/*
  予約コメントの入力。文字の欄と、部位などのチップを1つの枠の中に並べる。
  文字の欄は中身に合わせて伸びる（field-sizing。使えないブラウザでは最低幅で出る）。最後の欄は残りの幅いっぱい。
*/
.comment-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-height: 4.5rem;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
}

.comment-editor:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.comment-editor.disabled {
    opacity: 0.6;
}

.comment-text {
    field-sizing: content;
    min-width: 2ch;
    max-width: 100%;
    padding: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    resize: none;
}

.comment-text:focus {
    outline: none;
    background: var(--surface-alt);
}

.comment-text.last {
    flex: 1 1 12rem;
    min-height: 3.5rem;
}

.comment-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-alt);
}

.comment-chip-body {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-8);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.comment-chip.readonly .comment-chip-body {
    cursor: default;
}

.comment-chip-remove {
    min-width: 1.75rem;
    min-height: 1.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.comment-chip-body:focus-visible,
.comment-chip-remove:focus-visible,
.dental-key:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* 部位（歯式）の十字の表記。左上＝右上顎、右上＝左上顎、左下＝右下顎、右下＝左下顎 */
.dental-formula {
    display: inline-grid;
    grid-template-columns: auto auto;
    font-size: var(--font-caption);
    line-height: 1.2;
    vertical-align: middle;
}

.dental-q {
    display: flex;
    gap: 2px;
    min-width: 1ch;
    min-height: 1.2em;
    padding: 0 3px;
}

.dental-ur,
.dental-lr {
    justify-content: flex-end;
    border-right: 1px solid var(--text);
}

.dental-ur,
.dental-ul {
    border-bottom: 1px solid var(--text);
}

.dental-tooth sup {
    font-size: 0.7em;
}

.dental-suffix {
    margin-left: 2px;
    font-size: var(--font-caption);
}

.dental-empty {
    color: var(--text-secondary);
    font-size: var(--font-caption);
}

/* 部位入力 */
.dental-preview {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 2.5rem;
    margin-bottom: var(--space-12);
}

.dental-preview .dental-formula {
    font-size: var(--font-body);
}

.dental-grid {
    display: grid;
    gap: var(--space-4);
    overflow-x: auto;
}

.dental-jaw-caption {
    margin-top: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--font-caption);
}

.dental-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.dental-midline {
    align-self: stretch;
    width: 2px;
    margin: 0 var(--space-4);
    background: var(--line-strong);
}

.dental-key {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.dental-key.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}

.dental-key:disabled {
    opacity: 0.35;
    cursor: default;
}

.dental-commands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

/* 部位入力: キーで入れる枠（十字）。カーソルのある象限を囲む */
.dental-input {
    display: inline-grid;
    grid-template-columns: minmax(8rem, auto) minmax(8rem, auto);
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-control);
}

.dental-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dental-input-q {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 2.25rem;
    padding: var(--space-4) var(--space-8);
    border: 2px solid transparent;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1.125rem;
    cursor: pointer;
}

.dental-input-q.dental-ur,
.dental-input-q.dental-lr {
    justify-content: flex-end;
    border-right-color: var(--text);
}

.dental-input-q.dental-ur,
.dental-input-q.dental-ul {
    border-bottom-color: var(--text);
}

.dental-input-q.current {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dental-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin: 0 0 var(--space-8);
    font-size: var(--font-caption);
}

.dental-mode {
    color: var(--error-text);
    font-weight: 600;
}

/* 欠損歯・残根（歯の格子）。色だけに頼らず点線の枠でも示す */
.dental-key.missing,
.dental-key.root {
    border-style: dashed;
    border-color: var(--line-strong);
}

/* 定型文の一覧の編集 */
.template-edit-list {
    display: grid;
    gap: var(--space-4);
    max-height: 20rem;
    overflow: auto;
    margin: var(--space-8) 0;
    padding-left: var(--space-24);
}

.template-edit-row {
    display: flex;
    gap: var(--space-4);
}

.template-edit-row input {
    flex: 1;
    min-width: 0;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

/* アポイントの設定 */
/* 画面全体を覆う（アポイントの上に重ねるので、戻ったときに予約表の状態がそのまま残る）。重なり順はダイアログと同じ */
.settings-page {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: var(--page);
}

.settings-header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-16);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
}

/* 設定の見出し（予約表の画面の見出しと同じ文字＝本文の大きさの太字） */
.settings-title {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
}

.settings-shell {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    min-height: 0;
}

/* 左のナビゲーション（WinUI版のNavigationViewの形）。選んでいる項目は左端のアクセントの帯で示す */
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    padding: var(--space-12) var(--space-8);
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.settings-nav-item {
    min-height: 2.25rem;
    padding: var(--space-4) var(--space-12);
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-nav-item:hover {
    background: var(--surface-alt);
}

.settings-nav-item[aria-current="page"] {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-weight: 600;
}

.settings-nav-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.settings-content {
    overflow: auto;
    padding: var(--space-16) var(--space-24) var(--space-24);
}

/* 縦に1列で並べる入力欄（全般の数値） */
.settings-stack {
    display: grid;
    max-width: 20rem;
}

/* 時間の上部（2列。置き場所は各欄が grid-row／grid-column で決める） */
.settings-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 12rem));
    gap: var(--space-12);
}

/* 余白は格子のgapで取るので、欄の下の余白は消す */
.settings-time-grid .field {
    margin-bottom: 0;
}

/* 候補の名前が長くても広がりすぎないようにする（初期担当医） */
.settings-select-limited {
    max-width: 20rem; /* 入力欄を縦に並べたとき（.settings-stack）と同じ幅 */
}

/* 曜日ごとの診療時間の「まとめて」の行 */
.settings-bulk-row th,
.settings-bulk-row td {
    border-top: 2px solid var(--line);
    background: var(--surface-alt);
}

/* 臨時診療・休診の休診日の行 */
.settings-closed-row td:first-child {
    box-shadow: inset 3px 0 0 var(--error-text);
}

.settings-date {
    min-width: 10rem;
}

.settings-date-text {
    font-size: var(--font-caption);
}

/* 欄の右に文字を添える入力（「2027 年の」） */
.settings-inline-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.settings-inline-field input {
    width: 6rem;
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.settings-holiday-list {
    max-height: 18rem;
    overflow: auto;
    margin: var(--space-8) 0;
    padding-left: var(--space-24);
}

/* まとまりの見出し（臨時診療・休診、時間外色）。直前が表でも入力欄でも同じ余白を取る */
.settings-heading.settings-section-start {
    margin-top: var(--space-24);
}

/* 入力画面の見出しの下のタブ（新規予約の患者予約・個人予定・医院予定） */
.dialog-tabs {
    margin: 0 0 var(--space-12);
    border-radius: var(--radius-surface);
}

/* 設定の表は画面いっぱいに広げず左に寄せる（広い画面で間延びしないように） */
.settings-table-compact {
    width: auto;
}

.settings-page-title {
    margin: 0 0 var(--space-16);
    font-size: var(--font-title);
    font-weight: 600;
}

/* 狭い画面では、ナビゲーションを上に横並びにする */
@media (max-width: 700px) {
    .settings-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .settings-nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

.settings-body {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-heading {
    margin: 0 0 var(--space-4);
    font-size: var(--font-body);
    font-weight: 600;
}

.settings-table {
    margin-bottom: var(--space-12);
}

.settings-table td,
.settings-table th[scope="row"] {
    vertical-align: middle;
}

.settings-table select,
.settings-add select,
.settings-input {
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.settings-input {
    width: 100%;
    min-width: 8rem;
}

.settings-table input[type="color"] {
    min-width: 3rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
}

/* 予約表と同じく利用者が決めた色の上に文字が載るので、テーマの色ではなく決めた色で描く */
.settings-sample {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    border: 2px solid;
    border-radius: var(--radius-control);
    white-space: nowrap;
}

.settings-move {
    display: inline-flex;
    gap: var(--space-4);
}

/* 設定「Web予約」の予約メニュー（1メニュー＝1枚のカード） */
.settings-menu-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    margin-bottom: var(--space-12);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.settings-menu-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}

.settings-menu-name {
    flex: 1 1 16rem;
}

.settings-menu-actions {
    align-items: center;
}

.settings-chair-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-16);
}

/* 設定「Web予約」の予約に使うチェア（基本・曜日ごと・日付ごとの1行） */
.settings-rule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-16);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--line-faint);
}

.settings-rule-label {
    min-width: 6rem;
    font-weight: 600;
}

.settings-subheading {
    margin: var(--space-16) 0 var(--space-4);
    font-size: var(--font-body);
}

/* 勤務表（オペレータ×日の出勤・退勤。設定と同じく画面全体に重ねる） */
.timesheet-spacer {
    flex: 1 1 auto;
}

.timesheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-16);
}

.timesheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-12);
    margin-bottom: var(--space-12);
}

.timesheet-weekdays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-12);
    margin-bottom: var(--space-12);
}

.field-inline select {
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.field-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.field-inline input {
    min-height: 2rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.timesheet-print-title {
    display: none;
    margin: 0 0 var(--space-8);
    font-size: var(--font-body);
}

.timesheet-scroll {
    overflow-x: auto;
}

.timesheet {
    border-collapse: collapse;
    font-size: var(--font-caption);
    background: var(--surface);
}

.timesheet th,
.timesheet td {
    border: 1px solid var(--line);
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.timesheet thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-alt);
    font-weight: 600;
}

.timesheet .timesheet-name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 7rem;
    background: var(--surface-alt);
    text-align: left;
    font-weight: 600;
}

.timesheet thead .timesheet-name {
    z-index: 2;
}

.timesheet-head {
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-4);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.timesheet-day {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    padding: var(--space-4) 0;
}

.timesheet-weekday {
    font-weight: 400;
}

.timesheet-saturday {
    color: var(--saturday-text);
}

.timesheet-closed {
    color: var(--error-text);
}

.timesheet-cell {
    min-width: 2.75rem;
}

.timesheet-cell-closed {
    background: var(--surface-alt);
}

.timesheet-inactive {
    color: var(--text-secondary);
    background: var(--surface-alt);
}

.timesheet-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.timesheet-button:focus-visible,
.timesheet-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.timesheet-times {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.timesheet-selected {
    background: var(--accent);
    color: var(--accent-text);
}

/* ドラッグで選んでいる途中の長方形 */
.timesheet-preview {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.timesheet-dragging,
.timesheet-dragging .timesheet-button {
    user-select: none;
    cursor: cell;
}

.timesheet-selection {
    margin: 0 0 var(--space-8);
}

.timesheet-changed .timesheet-times {
    font-weight: 600;
}

.timesheet-legend {
    margin-top: var(--space-8);
}

/* 印刷: 勤務表だけをA4横の1枚に出す（予約表・ツールバー・入力欄は出さない） */
@media print {
    @page {
        size: A4 landscape;
        margin: 8mm;
    }

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
        height: auto !important;
    }

    body * {
        visibility: hidden;
    }

    .timesheet-print,
    .timesheet-print * {
        visibility: visible;
    }

    .timesheet-page,
    .timesheet-body,
    .timesheet-scroll {
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .timesheet-print {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .timesheet-print-title {
        display: block;
        color: #000000;
    }

    .timesheet {
        width: 100%;
        table-layout: fixed;
        font-size: 6.5pt;
        background: #ffffff;
    }

    .timesheet th,
    .timesheet td {
        border-color: #666666;
        color: #000000;
    }

    .timesheet thead th,
    .timesheet .timesheet-name,
    .timesheet-cell-closed,
    .timesheet-inactive,
    .timesheet-selected {
        position: static;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .timesheet .timesheet-name {
        width: 14mm;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .timesheet-cell {
        min-width: 0;
    }

    .timesheet-button,
    .timesheet-head {
        min-height: 0;
        padding: 1px 0;
    }

    .timesheet-closed {
        color: #000000 !important;
        text-decoration: underline;
    }
}

/* 設定「時間」の臨時診療・休診の12か月分のカレンダー（休診日は赤＝optone3と同じ） */
.settings-calendars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-12);
    margin: var(--space-12) 0 var(--space-16);
}

.settings-calendar {
    border-collapse: collapse;
    font-size: var(--font-caption);
    text-align: center;
}

.settings-calendar caption {
    font-weight: 600;
    text-align: left;
    padding-bottom: var(--space-4);
}

.settings-calendar th,
.settings-calendar td {
    width: 1.75rem;
    padding: 2px;
}

.settings-calendar-closed {
    color: var(--error-text);
    font-weight: 600;
}