/* 予定の種類のアイコン（2026-10-06 洋二さんの指示＝Obsidian の MELab/Share/icons から選ぶ。無いものは作る）。
   シェルの app.css に同じ名前の SVG があるもの（calendar・users・star・route・globe・tag・home）はそれを使い、
   無いものだけをここに PNG（48px）で置く。暗いテーマの反転は themes.css の .alt-ico がまとめて掛ける。 */
.alt-ico-calendar-check { background-image: url('icons/calendar-check-01.png'); }
.alt-ico-calendar-date { background-image: url('icons/calendar-date.png'); }
.alt-ico-calendar-heart { background-image: url('icons/calendar-heart-01.png'); }
.alt-ico-alarm-clock { background-image: url('icons/alarm-clock.png'); }
.alt-ico-clock { background-image: url('icons/clock.png'); }
/* オンライン会議（NOTES-32） */
.alt-ico-video-recorder { background-image: url('icons/video-recorder.png'); }
.alt-ico-bell { background-image: url('icons/bell-01.png'); }
.alt-ico-flag { background-image: url('icons/flag-01.png'); }
.alt-ico-plane { background-image: url('icons/plane.png'); }
.alt-ico-marker-pin { background-image: url('icons/marker-pin-01.png'); }
.alt-ico-briefcase { background-image: url('icons/briefcase-01.png'); }
.alt-ico-phone { background-image: url('icons/phone.png'); }
.alt-ico-gift { background-image: url('icons/gift-01.png'); }
.alt-ico-building { background-image: url('icons/building-01.png'); }
/* 予定の吹き出しの操作（NOTES-26：この回以降を変更・この回以降を削除・ほかの日にも作る） */
.alt-ico-skip-forward { background-image: url('icons/skip-forward.png'); }
.alt-ico-calendar-minus { background-image: url('icons/calendar-minus-01.png'); }
.alt-ico-calendar-plus { background-image: url('icons/calendar-plus-01.png'); }

/* 予定表（Culminans.Calendar）。色は利用者が選ぶので、style の background で渡す（値はサーバーで #rrggbb に限っている）。 */

.calendar-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.4em;
    border-radius: 3px;
    vertical-align: -0.1em;
}

.calendar-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.05em 0.5em;
    border-radius: 4px;
}

/* 色の上の絵（黒い線）は、文字色と同じ判定で白線・黒線にする（変数は画面が CalendarColors.IconFilterOn で渡す）。
   暗いテーマの「.alt-ico は反転」（themes.css）より強くするため、クラスを重ねて詳細度を上げる。
   未回答の会議は地がテーマの面の色（白地に色の枠）なので、テーマの規則のままにする */
.calendar-type-chip > .alt-ico.alt-ico-sm,
.calendar-appointment:not(.calendar-appointment-needs-action) > .alt-ico {
    filter: var(--calendar-icon-filter, none);
}

.calendar-color-input {
    width: 3em;
    height: 2em;
    padding: 0;
    border: 1px solid var(--alt-border, #ccc);
}

/* 設定の「外部の予定表」の取得方法の案内（NOTES-157） */
.calendar-feeds-howto {
    margin: 0 0 0.75em;
    padding-left: 1.4em;
}

.calendar-icon-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: 0.3em;
}

.calendar-icon-choice {
    width: 2.2em;
    height: 2.2em;
    border: 1px solid var(--alt-border, #ccc);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.calendar-icon-choice.selected {
    border-color: var(--alt-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--alt-primary, #2563eb);
}

/* 予定の描き方（DxScheduler のテンプレート）。背景と文字色はサービスが決めて style で渡す（文字色は Core の HexColor.ForegroundOn） */
.calendar-appointment {
    display: flex;
    align-items: flex-start;
    gap: 0.25em;
    height: 100%;
    padding: 0.1em 0.3em;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.85em;
}

.calendar-appointment-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 祝日と土日（NT-CAL-010）。文字色は土曜＝青・日曜と祝日＝赤（CalendarHolidays.DayClass）、祝日の欄は休日の色 */
.calendar-day-saturday { color: var(--alt-calendar-saturday, #2563eb); }
.calendar-day-sunday { color: var(--alt-calendar-sunday, #dc2626); }

.calendar-holiday-cell {
    background-color: var(--alt-calendar-holiday-bg, rgba(220, 38, 38, 0.06));
}

/* 勤務時間の外（NOTES-51）。DevExpress の勤務外の色に寄せる */
.calendar-offhours-cell {
    background-color: var(--alt-calendar-offhours-bg, rgba(0, 0, 0, 0.04));
}

.calendar-date-header,
.calendar-month-date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em;
}

.calendar-date-number {
    font-weight: 600;
}

.calendar-holiday-name {
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 予定の吹き出しの見出し（DevExpress の既定の見出しを差し替えた。件名を左に寄せ、操作のボタンを右に並べる） */
.calendar-tooltip-subject {
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* 吹き出しの説明（NOTES-47。リッチテキスト）。長い本文は吹き出しの中でスクロールする。段落の余白は詰める */
.calendar-tooltip-description {
    max-height: 12rem;
    /* 吹き出しの幅を超えない（絵の列のぶん吹き出しより狭くなる）。改行の無い長い文字（URL・社外の招集の区切りの記号の列）は折り返す＝横へはみ出さない */
    max-width: min(24rem, 100%);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    white-space: normal;
}

.calendar-tooltip-description p {
    margin: 0;
}

/* 吹き出しの添付（NOTES-47）。縮小は吹き出しに収まる大きさにする（押すとプレビューの窓） */
.calendar-tooltip-attachments .alt-attachment-thumbnail {
    max-width: 96px;
    max-height: 72px;
}

/* 招待された会議の返答（NOTES-27。Notes と同じく、まだ決めていない会議を見分ける）：未回答＝白地に色の枠・仮承諾＝斜線。
   未回答は Outlook と同じく塗らずに枠と文字だけを予定の色にする（2026-10-07 洋二さんの指示＝破線の枠はギザギザに見えるのでやめた）。
   予定の色は style の --calendar-color で受ける（背景の色は style で渡しているので、塗りを消すには !important が要る） */
.calendar-appointment.calendar-appointment-needs-action {
    background-color: var(--alt-surface, #fff) !important;
    color: var(--calendar-color) !important;
    box-shadow: inset 0 0 0 1.5px var(--calendar-color);
}

.calendar-appointment-tentative {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.35) 6px 10px);
}

/* 仮押さえ（NOTES-50）：予定は残し、時間を塞がないことを薄さで見せる */
.calendar-appointment-free {
    opacity: 0.55;
}

.calendar-respond-subject {
    font-weight: 600;
    margin: 0 0 0.5em;
}

/* 出席者の状況の窓の代案の見出し（NOTES-27 の 3 本目） */
.calendar-proposals-title {
    font-size: 1rem;
    margin: 1em 0 0.5em;
}

/* アラームの入力欄（数＋単位。NOTES-59） */
.calendar-alarm-editor {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.calendar-alarm-count {
    width: 6rem;
}

.calendar-alarm-unit {
    flex: 1;
    min-width: 8rem;
}

/* 予定表の絞り込み（NOTES-60） */
.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.calendar-filters > div {
    flex: 1 1 16rem;
    max-width: 28rem;
}

/* 重ねる予定表（NOTES-32）。人ごとの色の札で表示を切り替える */
.calendar-overlays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
}

.calendar-overlays-label {
    font-weight: 600;
}

.calendar-overlay-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-overlay-add {
    margin-bottom: 0.75rem;
}

/* 勤務日と勤務時間の設定（NOTES-51） */
.calendar-workhours {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.calendar-workhours-day {
    display: grid;
    grid-template-columns: 6em 1fr;
    align-items: start;
    gap: 0.5rem;
}

.calendar-workhours-name {
    padding-top: 0.35rem;
    font-weight: 600;
}

.calendar-workhours-spans {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.calendar-workhours-span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-workhours-time {
    width: 6.5em;
}

/* 予定の吹き出しの「予定の詳細を編集」ボタン（DevExpress の広げるボタン）は browser の絵にする（2026-10-07 洋二さんの指示）。
   ボタンは DevExpress が描くので、絵だけを差し替える（吹き出しと読み上げは DevExpress が付ける title のまま）。
   コンパクトフォーム（詳細のフォームの前に出るポップアップ）の同じボタンは「詳細」の文字（CalendarHome の見出しのテンプレート） */
.dxbl-sc-tooltip-header .dxbl-expand-button .dxbl-expand-icon {
    display: none;
}

.dxbl-sc-tooltip-header .dxbl-expand-button::before {
    content: "";
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    background: url('icons/browser.png') center / contain no-repeat;
}

/* コンパクトフォームの見出しのボタン（保存・閉じる・詳細）は折り返さず、縮めない。長い件名は見出しの側が折り返す
   （縮められたボタンの文字が 1 字ずつ折り返されて縦に伸びていた。2026-10-08 洋二さんの指摘） */
.dxbl-apt-edit-compact-dialog-header > .dxbl-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.dxbl-apt-edit-compact-dialog-header > .dxbl-apt-edit-dialog-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* コンパクトフォームの「詳細」ボタン（文字にした DevExpress の広げるボタン）は、隣の「閉じる」と同じ枠と余白にする。
   DevExpress は広げるボタンを絵だけのボタンとして、枠を透明・余白を小さくしている（変数 --dxbl-scheduler-expand-button-border-color ほか。公開の仕様ではない）。
   変数をボタンの上で定義し直す＝ボタンの普通の枠（--dxbl-btn-border-color）と中くらいの余白の値を、ボタン自身が持つ値から引く。
   DevExpress の版を上げたら「閉じる」と見比べる */
.dxbl-apt-edit-compact-dialog-header > .dxbl-btn.dxbl-expand-button {
    --dxbl-scheduler-expand-button-border-color: var(--dxbl-btn-border-color);
    --dxbl-scheduler-edit-dialog-header-expand-button-padding-x: var(--dxbl-btn-padding-x-m);
    --dxbl-scheduler-edit-dialog-header-expand-button-padding-y: var(--dxbl-btn-padding-y-m);
}

/* 一覧（NOTES-54）：DxScheduler は時間軸の表示（14 日）のままツールバーだけを使い、本体は隠して下に一覧を出す。
   本体は独自タグで選ぶ（DevExpress の部品はクラスより独自タグのほうが確か＝pitfalls の「独自タグで選ぶ」）。
   外枠の幅も本体が決めているので、隠すと外枠が縮み、ツールバーが「…」に畳まれる＝幅を明示する */
.calendar-list-mode dxbl-timeline-view {
    display: none !important;
}

.calendar-list-mode .dxbl-sc-main-container {
    width: 100%;
}

.calendar-agenda {
    margin-top: 0.5rem;
}

.calendar-agenda-day {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
}

/* 件名は予定表の予定と同じ見た目（色・絵・返答の枠）を包むボタン。押すと予定表と同じ吹き出しを出す */
.calendar-agenda-subject {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.calendar-agenda-subject .calendar-appointment {
    align-items: center;
    height: auto;
}

/* 月の表示の下のツールバー（上のツールバーと同じく、枠のある帯に並べる。枠と余白は DxScheduler の外枠、
   まとまりの区切りの縦線は上のツールバー（.dxbl-toolbar-group-separator）にそろえる） */
.calendar-bottom-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.25rem;
    padding: 12px;
    border: 1px solid var(--alt-border, #d3d3d2);
    border-radius: 6px;
    background-color: var(--alt-surface, #fff);
}

.calendar-bottom-group {
    display: flex;
    align-items: center;
}

.calendar-bottom-group + .calendar-bottom-group {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--alt-border, #d3d3d2);
}

/* ボタンは単独のボタンの書式（太字・左右 12px）になるので、上のツールバーの項目と同じ太さと余白に戻す（2026-10-07 実測の値） */
.calendar-bottom-toolbar .dxbl-btn.dxbl-btn-standalone {
    padding: 5px;
    font-weight: 400;
}

.calendar-bottom-toolbar .dxbl-btn.dxbl-btn-standalone + .dxbl-btn.dxbl-btn-standalone {
    margin-left: 4px;
}

/* 横スクロールで前後の期間へ動く表示（js/calendar-swipe.js。時刻の欄のある日〜2 週）。横の行き過ぎでブラウザの戻る・進むが動かないようにする。
   画面の残りの高さに収め、本体の中だけをスクロールさせる＝日付の見出しが常に見える（2026-10-08 洋二さんの指示）。
   高さは js/calendar-fit.js が器に入れる。測る前（読み込み直後）は今までどおりの背丈 */
.calendar-swipe {
    overscroll-behavior-x: none;
    height: var(--calendar-scheduler-height, auto);
}

/* 予定のフォーム（DxScheduler の窓）は DevExpress が窓の根元を太字にし（--dxbl-scheduler-edit-dialog-font-weight）、中身はそれを受け継ぐ。
   入力欄は自分で打ち消すが、説明の本文・添付の並び・案内の文は打ち消さないので、根元の太さを普通に戻す（2026-10-07 洋二さんの指摘＝説明が常に太字）。
   窓の見出し（件名・繰り返しの題）は見出しの太さの変数で太字にする。項目の見出しはほかの画面のフォームと同じ普通の太さになる。
   クラス 2 つ＝DevExpress の定義（クラス 1 つ）より強くし、読み込み順に頼らない。
   DevExpress の版を上げたら、窓の見出しと項目の見出しの太さを見比べる */
.dxbl-scheduler-color.dxbl-apt-edit-dialog {
    --dxbl-scheduler-edit-dialog-font-weight: 400;
    /* 見出しの太さの変数は DevExpress の既定が長さの値（太さとして無効）で、根元の太字を受け継いでいた＝太字を明示する */
    --dxbl-scheduler-edit-dialog-header-font-weight: 600;
}

/* アラームのよく使う値（分）のドロップダウン（2026-10-07 洋二さんの指示）。数の欄の右のボタンの絵は CSS の下向きの矢印 */
.calendar-alarm-presets-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.calendar-alarm-presets {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    min-width: 6rem;
}

.calendar-alarm-preset {
    padding: 4px 12px;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.calendar-alarm-preset:hover,
.calendar-alarm-preset:focus-visible,
.calendar-alarm-preset[aria-selected="true"] {
    background: color-mix(in srgb, var(--alt-accent, #2b6cb0) 10%, transparent);
}

/* 招待者の欄を折りたたんだとき（NOTES-63）。「○○、○○ ほか n 名」と一覧のボタンは .alt-inline-row で並べ、下の追加の欄との間だけ空ける */
.calendar-invitee-collapsed {
    margin-bottom: 4px;
}

.calendar-invitee-list {
    height: calc(50vh / var(--alt-vz, 1));
}

/* 空き時間の検索（NOTES-28）。区間は中身を出さず、予定あり＝塗り・勤務時間外＝斜線だけで描く */
.calendar-freebusy-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.calendar-freebusy-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-freebusy-swatch {
    display: inline-block;
    width: 1.5em;
    height: 0.9em;
    border: 1px solid var(--alt-border, #ccc);
}

.calendar-freebusy-span {
    width: 100%;
    height: 100%;
    min-height: 18px;
    border-radius: 2px;
}

.calendar-freebusy-busy {
    background: var(--alt-primary, #2b6cb0);
}

.calendar-freebusy-off {
    background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, currentColor 25%, transparent) 4px 6px);
}

/* 候補は 5 件分の高さ（見出し 25px＋5 行 × 33px）、表は 10 人分の高さ（ツールバーと日付・時刻の見出し約 131px＋10 行 × 37px）までで、
   それより多ければ中をスクロール（2026-10-08 に画面で測った。DevExpress の版を上げたら行の高さを測り直す）。
   候補の高さは 5 件を超えたときだけ付ける（画面の CandidateRows）。表は低い画面では画面の高さに合わせて縮める（ポップアップが画面からはみ出さない） */
.calendar-freebusy-candidates {
    height: 12rem;
}

.calendar-freebusy-table {
    max-height: min(31.5rem, calc(55vh / var(--alt-vz, 1)));
    overflow-y: auto;
}

/* 繰り返しの欄（NOTES-62）。選択肢と歯車を横に並べる（.alt-inline は折り返すので、狭いフォームの列で歯車が下へ落ちる）。
   数の欄と単位はシェルの .alt-field-inline／.alt-inline-label、ポップアップの見出しは .dialog-form のラベルと同じ見た目 */
.calendar-repeat,
.calendar-repeat-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-repeat > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.calendar-repeat-summary {
    margin: 4px 0 0;
}

.calendar-repeat-label {
    display: block;
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    color: var(--alt-text-sub);
}

.calendar-repeat-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 会議室・備品（NOTES-29）：吹き出しで、この回に取れていない予約（ほかの予約と重なっていた）は注意の色で出す */
.calendar-reservation-missed {
    color: var(--alt-danger, #dc2626);
}

/* オンライン会議の「参加」（NOTES-32）。吹き出しと再通知の窓のリンクをボタンらしく見せる */
.calendar-join {
    font-weight: 600;
}

/* 相手の予定表で招待された会議への返答のボタン（吹き出し。NOTES-159） */
.calendar-feed-respond {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: center;
}

.calendar-feed-respond > div {
    flex-basis: 100%;
}