/**
 * @fileoverview PCK001L ピッキング指示一覧・割当画面のスタイル
 * Screen ID: PCK001L
 */

/* 画面固有変数（portal.cssに不足する値のみ） */
:root {
    --pck001l-gray: #6c757d;
    --pck001l-gray-hover: #545b62;
    --pck001l-bg-selected: #e7f3ff;
    --pck001l-bg-card-selected: #f0f7ff;
    --pck001l-border: #dee2e6;
}

/* ユーティリティクラス */
.hidden {
    display: none;
}

/* 画面タイトルはportal.cssのwms-global-headerに委譲 */

/* フィルタ条件エリア */
.filter-condition-area {
    background: var(--bg-color-light);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--pck001l-border);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color-secondary);
}

.filter-field input,
.filter-field select {
    padding: 8px 12px;
    border: 1px solid var(--border-color-base);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* フォーカスリングはportal.cssのグローバルスタイルに委譲 */

.filter-buttons {
    display: flex;
    gap: 10px;
}

.search-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

.search-button:hover {
    background-color: var(--primary-color-dark);
}

.clear-button {
    background-color: var(--pck001l-gray);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.clear-button:hover {
    background-color: var(--pck001l-gray-hover);
}

/* アクションボタンエリア */
.action-button-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.action-button-area button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.new-list-create-button {
    background-color: var(--color-success);
    color: white;
    border: none;
}

.new-list-create-button:hover {
    background-color: var(--color-success-dark);
}

.add-details-to-list-button {
    background-color: var(--color-info);
    color: white;
    border: none;
}

.add-details-to-list-button:hover:not(:disabled) {
    background-color: #2563eb;
}

.assign-worker-button {
    background-color: var(--color-warning);
    color: var(--text-color-primary);
    border: none;
}

.assign-worker-button:hover:not(:disabled) {
    background-color: #d97706;
}

.confirm-list-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.confirm-list-button:hover:not(:disabled) {
    background-color: var(--primary-color-dark);
}

.list-print-button,
.ht-send-button {
    background-color: var(--pck001l-gray);
    color: white;
    border: none;
}

.list-print-button:hover:not(:disabled),
.ht-send-button:hover:not(:disabled) {
    background-color: var(--pck001l-gray-hover);
}

.refresh-data-button {
    background-color: var(--color-info);
    color: white;
    border: none;
}

.refresh-data-button:hover {
    background-color: #2563eb;
}

.action-button-area button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* メッセージエリア */
.message-area {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.message-area.success-message {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.message-area.error-message {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

/* メインコンテンツ 2ペイン構成 */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: 500px;
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
    }
}

/* 左右ペイン共通 */
.left-pane,
.right-pane {
    background: white;
    border: 1px solid var(--pck001l-border);
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
}

.left-pane h3,
.right-pane h3 {
    font-size: 1.1rem;
    color: var(--text-color-secondary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pck001l-border);
}

/* テーブル共通 */
.table-container {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.details-table,
.list-details-table,
.detail-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.details-table th,
.details-table td,
.list-details-table th,
.list-details-table td,
.detail-items-table th,
.detail-items-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--pck001l-border);
}

.details-table th,
.list-details-table th,
.detail-items-table th {
    background-color: var(--bg-color-light);
    font-weight: 600;
    color: var(--text-color-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.details-table tbody tr:hover,
.list-details-table tbody tr:hover {
    background-color: var(--bg-color-light);
}

/* 明細行の選択状態（特異性を高めて!importantを回避） */
.details-table tbody tr.detail-row.selected {
    background-color: var(--pck001l-bg-selected);
}

.detail-row.assigned-to-list {
    background-color: #f0f0f0;
    opacity: 0.6;
}

.detail-row.assigned-to-list .detail-checkbox {
    pointer-events: none;
}

.detail-row.processed {
    background-color: var(--color-success-bg);
    opacity: 0.7;
}

/* 空メッセージ */
.empty-message,
.no-data-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--pck001l-gray);
    font-size: 0.9rem;
}

/* ピッキングリストカード */
.picking-list-card {
    border: 1px solid var(--pck001l-border);
    border-radius: 6px;
    margin-bottom: 15px;
    transition: all 0.2s;
}

.picking-list-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.picking-list-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    background-color: var(--pck001l-bg-card-selected);
}

.picking-list-card.active {
    border-color: var(--color-success);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.picking-list-header {
    padding: 12px 15px;
    background-color: var(--bg-color-light);
    border-bottom: 1px solid var(--pck001l-border);
    cursor: pointer;
}

.picking-list-header .list-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.picking-list-header .list-number {
    font-weight: bold;
    color: var(--primary-color);
}

.picking-list-header .list-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.picking-list-header .list-status.status-creating {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.picking-list-header .list-status.status-assigned {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.picking-list-header .list-status.status-in-progress {
    background-color: #dbeafe;
    color: #1e40af;
}

.picking-list-header .list-status.status-completed {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.picking-list-details {
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

/* 担当者選択フィールド */
.worker-assignment-field {
    margin-top: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.worker-assignment-field select {
    padding: 6px 10px;
    border: 1px solid var(--border-color-base);
    border-radius: 4px;
    min-width: 150px;
}

.worker-assignment-field button {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.assign-confirm-button {
    background-color: var(--color-success);
    color: white;
    border: none;
}

.assign-confirm-button:hover {
    background-color: var(--color-success-dark);
}

.assign-cancel-button {
    background-color: var(--pck001l-gray);
    color: white;
    border: none;
}

.assign-cancel-button:hover {
    background-color: var(--pck001l-gray-hover);
}

/* 詳細表示エリア */
.picking-list-detail-area {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--bg-color-light);
    border-radius: 6px;
    border: 1px solid var(--pck001l-border);
}

.picking-list-detail-area h4 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--text-color-secondary);
}

.detail-header-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pck001l-border);
}

.header-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.header-field label {
    font-size: 0.75rem;
    color: var(--pck001l-gray);
}

.header-field span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color-primary);
}

/* 進捗サマリー */
.progress-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: white;
    border-radius: 4px;
}

.summary-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-field label {
    font-size: 0.8rem;
    color: var(--pck001l-gray);
}

.summary-field span {
    font-weight: 500;
}

/* ステータスに応じた行の色 */
.detail-items-table tbody tr.status-completed {
    background-color: var(--color-success-bg);
}

.detail-items-table tbody tr.status-in-progress {
    background-color: var(--color-warning-bg);
}

.detail-items-table tbody tr.status-not-started {
    background-color: var(--bg-color-light);
}

/* 確認ダイアログ */
.confirmation-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    max-width: 500px;
}

.dialog-message {
    font-size: 1rem;
    color: var(--text-color-primary);
    margin-bottom: 20px;
    text-align: center;
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.dialog-buttons button {
    padding: 10px 30px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
}

.dialog-buttons .confirm-button {
    background-color: var(--primary-color);
    color: white;
}

.dialog-buttons .confirm-button:hover {
    background-color: var(--primary-color-dark);
}

.dialog-buttons .cancel-button {
    background-color: var(--pck001l-gray);
    color: white;
}

.dialog-buttons .cancel-button:hover {
    background-color: var(--pck001l-gray-hover);
}

/* Drag & Drop スタイル */
.detail-row.dragging {
    opacity: 0.5;
    background-color: var(--pck001l-bg-selected);
}

.picking-list-card.drag-over {
    border-color: var(--color-success);
    background-color: var(--color-success-bg);
}

/* 新規ピッキングリストヘッダ */
.new-picking-list-header {
    border-color: var(--color-success);
}

.new-picking-list-header .list-number {
    color: var(--color-success);
}

/* 割当済マーク */
.assigned-mark {
    display: inline-block;
    padding: 2px 6px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 3px;
    font-size: 0.7rem;
    margin-left: 5px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .action-button-area {
        flex-direction: column;
    }

    .action-button-area button {
        width: 100%;
    }

    .main-content {
        grid-template-columns: 1fr;
    }
}