/* =================================================================
   日程調整の日時テキスト作成（datetext）
   スコープは #app-datetext に限定する（プロジェクト規約）
   ================================================================= */

#app-datetext {
    --dt-cell: 56px;          /* 1時間ぶんの高さ。main.js の CELL_PX と合わせる */
    --dt-gutter: 56px;        /* 時刻の目盛りの幅 */
    --dt-days: 7;
}

/* ---- 週の見出し ---- */
#app-datetext .dt-dayhead {
    display: grid;
    grid-template-columns: var(--dt-gutter) repeat(var(--dt-days), minmax(0, 1fr));
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg);
}

#app-datetext .dt-dayhead-cell {
    text-align: center;
    padding: .35rem .1rem .45rem;
    line-height: 1.2;
    min-width: 0;
}

/* 時刻の目盛りの見出し（GMT+9）。狭い幅で3行に折れていたので縮めて1行に収める */
#app-datetext .dt-dayhead .dt-gutter {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: .7rem;
}

#app-datetext .dt-dayhead-w { font-size: .75rem; color: var(--bs-secondary-color); }
#app-datetext .dt-dayhead-n { font-size: 1rem; font-weight: 700; }
#app-datetext .dt-sun .dt-dayhead-w,
#app-datetext .dt-sun .dt-dayhead-n { color: var(--bs-danger); }
#app-datetext .dt-sat .dt-dayhead-w,
#app-datetext .dt-sat .dt-dayhead-n { color: var(--bs-primary); }

#app-datetext .dt-today .dt-dayhead-n {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    display: inline-block;
}

/* ---- タイムライン ---- */
#app-datetext .dt-scroller {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#app-datetext .dt-grid {
    display: grid;
    grid-template-columns: var(--dt-gutter) repeat(var(--dt-days), minmax(0, 1fr));
    position: relative;
    touch-action: none;       /* ドラッグ選択のため。縦スクロールは親の .dt-scroller が担う */
    user-select: none;
}

#app-datetext .dt-gutter {
    border-right: 1px solid var(--bs-border-color);
}

#app-datetext .dt-tick {
    height: var(--dt-cell);
    font-size: .7rem;
    color: var(--bs-secondary-color);
    text-align: right;
    padding-right: .35rem;
    transform: translateY(-.55em);
}

#app-datetext .dt-col {
    position: relative;
    border-right: 1px solid var(--bs-border-color);
    min-width: 0;
}

#app-datetext .dt-col-holiday { background: var(--bs-tertiary-bg); }

#app-datetext .dt-cell {
    height: var(--dt-cell);
    border-bottom: 1px solid var(--bs-border-color);
}

/* ---- 選んだ候補のブロック ---- */
#app-datetext .dt-block {
    position: absolute;
    left: 2px;
    right: 2px;
    background: var(--bs-primary);
    color: #fff;
    border-radius: .25rem;
    padding: .15rem .3rem;
    font-size: .72rem;
    line-height: 1.25;
    overflow: hidden;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

#app-datetext .dt-block-label { pointer-events: none; white-space: nowrap; }

#app-datetext .dt-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize;
}

#app-datetext .dt-handle-top { top: -2px; }
#app-datetext .dt-handle-bottom { bottom: -2px; }

#app-datetext .dt-del {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: .8rem;
}

#app-datetext .dt-del:hover { background: rgba(0, 0, 0, .6); }

/* タップ選択の途中（1回目を押した位置） */
#app-datetext .dt-ghost {
    position: absolute;
    left: 2px;
    right: 2px;
    background: var(--bs-warning);
    border-radius: .25rem;
    opacity: .85;
}

/* ---- 結果 ---- */
#app-datetext .dt-result {
    min-height: 12rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
}

/* ---- 履歴 ---- */
#app-datetext .dt-hist-editing {
    /* いま開いている1件。色だけでなく左の線でも示す（色覚に頼らない） */
    border-inline-start: 4px solid var(--bs-primary);
    padding-inline-start: .75rem !important;
    background: var(--bs-tertiary-bg);
}

#app-datetext .dt-hist-peek {
    overflow-wrap: anywhere;
}

/* 編集中の帯の中の「やめる」ボタン。
   alert-info の上では btn-outline-secondary の文字色が沈んで読みにくいので、
   帯の文字色をそのまま使う（役割は「やめる」のままなので塗りにはしない） */
#app-datetext #dt-editing .btn-outline-secondary {
    color: inherit;
    border-color: currentColor;
    opacity: .85;
}

#app-datetext #dt-editing .btn-outline-secondary:hover {
    opacity: 1;
    background: rgba(128, 128, 128, .18);
    color: inherit;
}

/* ---- スマホ ---- */
@media (max-width: 767.98px) {
    #app-datetext {
        --dt-cell: 48px;
        --dt-gutter: 44px;
    }

    #app-datetext .dt-scroller { max-height: 55vh; }
    #app-datetext .dt-block { font-size: .65rem; }
    #app-datetext .dt-dayhead-n { font-size: .9rem; }
}