/*
 * Batonpass の手書き CSS。AppPanelProvider の renderHook(HEAD_END) で読み込む。
 * テーマはビルドしないので、Tailwind のクラスではなく色を直接書く。
 */

/* ステータス欄のセル背景（未着手は無色）。セレクトの枠も同じ色にしてセル全体を塗る */
td.bp-status-in_progress,
td.bp-status-in_progress .fi-input-wrp {
    background-color: #eff6ff;
}

td.bp-status-waiting_review,
td.bp-status-waiting_review .fi-input-wrp {
    background-color: #fefce8;
}

td.bp-status-on_hold,
td.bp-status-on_hold .fi-input-wrp {
    background-color: #f5f3ff;
}

td.bp-status-completed,
td.bp-status-completed .fi-input-wrp {
    background-color: #f0fdf4;
}

/*
 * カテゴリ欄。色は App\Enums\CategoryColor がセルの style に CSS 変数で渡す。
 * ステータス欄（さらに薄い塗り）と見分けるため、左端に差し色の帯を付ける。
 */
td.bp-category-colored,
td.bp-category-colored .fi-input-wrp {
    background-color: var(--bp-category-bg);
}

td.bp-category-colored {
    box-shadow: inset 4px 0 0 var(--bp-category-accent);
}

/*
 * タスク表（ダッシュボード・タスク一覧）の列幅。
 * 見出しに data-bp-col を持つ表だけを固定レイアウトにし、TaskResource の width() をそのまま効かせる。
 * 幅を決めていないタスク列が残りを受け取る。表の最小幅はスクリプトが計算する（public/js/batonpass-column-resize.js）。
 */
table.fi-ta-table:has(th[data-bp-col]) {
    table-layout: fixed;
}

table.fi-ta-table:has(th[data-bp-col]) > tbody > tr > td {
    overflow: hidden;
}

/* 入力欄の既定の最小幅（12rem）を外し、列幅に合わせて縮める。左右の余白も詰める */
table.fi-ta-table:has(th[data-bp-col]) .fi-ta-select,
table.fi-ta-table:has(th[data-bp-col]) .fi-ta-text-input {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
}

table.fi-ta-table:has(th[data-bp-col]) .fi-ta-text-input input[type='date'] {
    padding-left: 6px;
    padding-right: 6px;
}

table.fi-ta-table:has(th[data-bp-col]) th[data-bp-col] {
    padding-left: 8px;
    padding-right: 8px;
}

/* 表示・編集ボタンの列。固定レイアウトでは w-1 のままだと潰れる */
table.fi-ta-table:has(th[data-bp-col]) th.fi-ta-actions-header-cell {
    width: 90px;
}

/* 見出しの右端の掴み。ドラッグで幅変更、ダブルクリックで既定幅に戻す */
th[data-bp-col] {
    position: relative;
}

th[data-bp-col]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 7px;
    cursor: col-resize;
    z-index: 1;
}

th[data-bp-col]:hover::after,
th[data-bp-col].bp-resizing::after {
    border-right: 2px solid #f39800;
}

body.bp-resizing-columns,
body.bp-resizing-columns * {
    cursor: col-resize !important;
    user-select: none !important;
}