/* =================================================================
 * 固有サービススタイル (print/style.css)
 * ================================================================= */

.result-pane {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

#drop-area {
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    padding: 2rem;
    cursor: pointer;
    text-align: center;
    transition: background-color .2s;
}

#drop-area.highlight {
    background-color: var(--bs-primary-bg-subtle);
}

#preview-area {
    overflow-y: auto;
    border-radius: .5rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ★修正: 旧テーマのバイオレット(#312747)からBootstrap標準のダークカラーに変更 */
[data-bs-theme="dark"] #preview-area {
    background-color: #212529 !important;
}

.pdf-page-preview {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    flex-shrink: 0;
    max-width: 90%;
}

#preview-area p#preview-placeholder {
    color: var(--bs-text-muted) !important;
}

/* ▼▼▼ 追加: レイアウト設定グループのデザイン調整 ▼▼▼ */
.settings-group {
    background-color: var(--bs-gray-100);
    /* ライトモード時 */
}

/* ダークモード時の背景調整 */
[data-bs-theme="dark"] .settings-group {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.settings-group-title {
    color: var(--bs-warning);
    /* マッハーツールらしい黄色/ゴールド */
}

/* ▲▲▲ 追加ここまで ▲▲▲ */


/* -----------------------------------------------------------------
 * 画像リスト / 並び替え (SortableJS)
 * ----------------------------------------------------------------- */
#image-list .list-group-item {
    cursor: pointer;
    /* クリック可能にする */
    transition: background-color 0.2s, box-shadow 0.2s;
    border-left: 4px solid transparent;
}

/* 選択中のアイテム */
#image-list .list-group-item.selected {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    border-left-color: var(--bs-primary);
}

#image-list .list-group-item button {
    position: relative;
    z-index: 2;
    /* ボタンは行クリックより優先 */
}

#image-list .list-group-item:active {
    cursor: grabbing;
}

/* 並べ替え無効時（ファイルが1個以下）はカーソルを通常のpointerに固定 */
#image-list.sort-disabled .list-group-item,
#image-list.sort-disabled .list-group-item:active {
    cursor: pointer;
}

.sortable-ghost {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    border: 2px dashed var(--bs-primary) !important;
    opacity: 0.8;
    color: transparent;
}

.sortable-ghost * {
    visibility: hidden;
}

.sortable-drag {
    background-color: #fff;
    opacity: 0.95;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    transform: scale(1.02);
    z-index: 1000;
}

/* -----------------------------------------------------------------
 * 分割エディタ (Split Editor)
 * ----------------------------------------------------------------- */
#split-editor-container {
    user-select: none;
    cursor: crosshair;
    position: relative;
}

#split-editor-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.split-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2px dashed #dc3545;
    cursor: row-resize;
    z-index: 20;
}

.split-line:hover,
.split-line.dragging {
    border-top: 2px solid #dc3545;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

.split-line-handle {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 24px;
    height: 20px;
    background: #dc3545;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: row-resize;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.split-line-info {
    position: absolute;
    left: 0;
    top: -10px;
    display: flex;
    align-items: center;
    z-index: 25;
    pointer-events: auto;
}

.split-page-label {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.2rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#reset-split-btn {
    transition: all 0.2s;
}

#reset-split-btn:hover {
    background-color: var(--bs-danger) !important;
    color: white !important;
    border-color: var(--bs-danger) !important;
}

/* -----------------------------------------------------------------
 * 矩形クロップエディタ (Crop Editor)
 * ----------------------------------------------------------------- */
.crop-box {
    position: absolute;
    border: 2px solid var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 30;
    touch-action: none;
}

/* 選択中またはホバー */
.crop-box:hover,
.crop-box.active {
    border-color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.3);
    z-index: 40;
}

.crop-box-label {
    position: absolute;
    top: -18px;
    left: -2px;
    background-color: var(--bs-primary);
    color: white;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px 4px 0 0;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
}

.crop-box.active .crop-box-label {
    background-color: var(--bs-warning);
    color: #000;
}

.crop-box-remove {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    background-color: var(--bs-danger);
    color: white;
    border-radius: 50%;
    border: 2px solid white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 50;
    transition: transform 0.1s;
}

.crop-box-remove:hover {
    transform: scale(1.1);
}

/* リサイズハンドル */
.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: white;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    z-index: 45;
}

.crop-handle.nw {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}

.crop-handle.ne {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}

.crop-handle.sw {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}

.crop-handle.se {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

#split-editor-container.mode-crop {
    cursor: crosshair;
}

/* =================================================================
 * UX Improvements: フォーム視認性向上 (サイト全体統一)
 * ================================================================= */
.form-control, .form-select {
    background-color: #ffffff;
    border: 1px solid #adb5bd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color);
    transition: all 0.2s ease-in-out;
}

.form-control:hover, .form-select:hover {
    border-color: #6c757d;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: #0d6efd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid #6c757d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #f8f9fa;
}

[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
    border-color: #adb5bd;
    background-color: rgba(255, 255, 255, 0.09);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: #86b7fe;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}