/* =================================================================
 * Page Specific Styles for UI Template (style.css)
 * ================================================================= */

/* --- 1. レイアウトパターン (2カラム用) --- */

/* 「パターン1」で使用する設定/結果カードのベース */
.tool-settings,
.tool-results {
    height: 100%;
    /* 親の .row の高さを継承 */
}

/* * 「パターン1」の結果カード(.tool-results)用 
 * card-header 以外の残りの高さを card-body が埋めるように設定
 */
.tool-results {
    display: flex;
    flex-direction: column;
}

.tool-results .card-body {
    flex-grow: 1;
    /* card-body 自体も flex にし、中の .h-100 (初期メッセージ等) が機能するようにする */
    display: flex;
    flex-direction: column;
}

.tool-results .card-body>.h-100 {
    flex-grow: 1;
    /* .card-body の残りの高さを埋める */
}

/* 「パターン1」の結果エリアをスクロールに追従させる */
/* ★修正: PC画面 (lg以上) のみ追従させる。スマホでは通常の配置にする */
@media (min-width: 992px) {
    .tool-results-sticky {
        position: -webkit-sticky;
        /* Safari */
        position: sticky;
        top: 80px;
        /* ヘッダーの高さ + マージン */
        max-height: calc(100vh - 100px);
        /* 画面内に収まるように高さを制限し、内部スクロール可能にする */
        overflow-y: auto;
    }
}


/* --- 2. 汎用コンポーネント --- */

/* ローディングオーバーレイ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    /* JSで 'flex' に変更して表示 */
    align-items: center;
    justify-content: center;
    z-index: 1090;
    /* モーダル(1055)やヘッダー(1030)より上 */
    backdrop-filter: blur(3px);
}

/* ドラッグ&ドロップ エリア */
#drop-zone {
    border: 2px dashed var(--bs-border-color);
    transition: border-color 0.3s, background-color 0.3s;
    cursor: pointer;
}

/* ドラッグ中のハイライト */
#drop-zone.drag-over {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* 結果テーブルのラッパー (高さ制限とスクロール) */
.result-table-wrapper {
    max-height: 500px;
    /* テーブルの最大高さを制限 */
    overflow-y: auto;
    /* 高さを超えたらスクロール */
}




.form-control,
.form-select {
    /* * --bs-outline-initial-bg は common/style-default.css で定義されていると仮定。
     * 未定義の場合は var(--bs-body-bg) (白) にフォールバックされる。
     */
    background-color: var(--bs-outline-initial-bg, var(--bs-body-bg));
    border-color: var(--bs-primary);
    --bs-form-placeholder-color: var(--bs-body-secondary-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
    background-color: var(--bs-outline-initial-bg, var(--bs-body-bg));
    /* フォーカス時に背景色が変わらないように */
}

/* D&D ゾーン (Light) */
.drop-zone {
    background-color: var(--bs-outline-initial-bg, var(--bs-body-bg));
    border: 2px dashed var(--bs-primary);
    /* 枠線を紫に変更 */
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.drop-zone.drag-over {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
    background-color: var(--bs-primary-bg-subtle);
}


/* === 2. Dark Mode Styles === */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #111111;
    /* 成功例の黒い背景 */
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
    /* 成功例のグロー */
    background-color: #111111;
    /* 背景色は変えない */
    color: var(--bs-body-color);
}

/* D&D ゾーン (Dark) */
[data-bs-theme="dark"] .drop-zone {
    background-color: #111111;
    border: 2px dashed var(--bs-primary);
    /* 枠線を紫に変更 */
}

[data-bs-theme="dark"] .drop-zone.drag-over {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
    background-color: var(--bs-primary-bg-subtle);
}


/* === 3. Input Group Adjustments (両方のモード) === */

/* * Input group (「0 / 30」や「追加」ボタン) の
 * 境界線がフォーカス時に紫になるように調整 
 */

/* Light Mode */
.input-group .btn {
    border-color: var(--bs-primary);
}

.input-group .input-group-text {
    border-color: var(--bs-primary);
    background-color: var(--bs-outline-initial-bg, var(--bs-body-bg));
}

.input-group .form-control:focus+.input-group-text,
.input-group .form-control:focus+.btn {
    border-color: var(--bs-primary);
    border-left: 0;
}

/* Dark Mode */
[data-bs-theme="dark"] .input-group .form-control:focus {
    z-index: 3;
}

[data-bs-theme="dark"] .input-group .form-control:focus+.input-group-text,
[data-bs-theme="dark"] .input-group .form-control:focus+.btn {
    border-color: var(--bs-primary);
    border-left: 0;
}

[data-bs-theme="dark"] .input-group .input-group-text {
    background-color: #111111;
    /* "dark" カラーではなく #111111 */
    border-color: var(--bs-primary);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .input-group .btn {
    border-color: var(--bs-primary);
}

/* 既存のCSSの最後に追加 */

/* 履歴リストの調整 */
.list-group-item {
    transition: background-color 0.2s;
}

.list-group-item:hover {
    background-color: var(--bs-secondary-bg-subtle);
}