/**
 * ARV003D 入庫予定詳細画面のスタイル
 */

/* メインコンテナ - ARV002E/ARV101Lと統一 */
.container {
    /* カラーパレット */
    --color-primary: #357abd;
    --color-primary-hover: #2a65a7;
    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;
    --color-text-default: #333;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-text-on-primary: white;
    --color-background-base: white;
    --color-background-form: #f9f9f9;
    --color-background-hover: #f5f5f5;
    --color-border-default: #ddd;
    --color-danger: #d9534f;
    --color-danger-hover: #c9302c;
    --shadow-default: 0 2px 4px rgba(0,0,0,0.1);
    
    /* スペーシング */
    --spacing-xs: 5px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    
    /* フォントサイズ */
    --font-size-title: 24px;
    --font-size-base: 14px;
    
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--color-background-base);
    padding: var(--spacing-lg);
    border-radius: 8px;
    box-shadow: var(--shadow-default);
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
                 'メイリオ', Meiryo, sans-serif;
    box-sizing: border-box;
}

/* コンポーネント内リセット */
.container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 画面タイトル - ARV002E/ARV101Lと統一 */
.screen-title {
    font-size: var(--font-size-title);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-default);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--spacing-md);
}

/* 詳細表示コンテナ */
.detail-container {
    margin-bottom: var(--spacing-lg);
    padding: calc(var(--spacing-md) + var(--spacing-xs));
    background-color: var(--color-background-form);
    border-radius: 4px;
    min-height: 100px;
}

/* 詳細セクション */
.detail-section {
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: 18px;
    color: var(--color-text-default);
    margin-bottom: calc(var(--spacing-md) + var(--spacing-xs));
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-default);
}

/* 詳細グリッド */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-md) + var(--spacing-xs));
}

.detail-field {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background-color: var(--color-background-form);
    border-radius: 4px;
}

.detail-field.full-width {
    grid-column: 1 / -1;
}

.detail-grid dd {
    margin: 0;
}

.field-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.field-value {
    font-size: 14px;
    color: var(--color-text-default);
    font-weight: 600;
}

/* テーブルコンテナ */
.table-container {
    overflow-x: auto;
}

/* 詳細テーブル */
.detail-table {
    width: 100%;
    border-collapse: collapse;
}

.detail-table th,
.detail-table td {
    padding: calc(var(--spacing-md) + 2px);
    text-align: left;
    border-bottom: 1px solid var(--color-border-default);
}

.detail-table th {
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.detail-table td {
    font-size: 14px;
}

.detail-table tbody tr:hover {
    background-color: var(--color-background-hover);
}

.no-data {
    text-align: center;
    color: var(--color-text-muted);
}

/* ボタンエリア */
.button-area {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-md) + var(--spacing-xs));
    margin-top: var(--spacing-xl);
}

/* ボタン共通スタイル - ARV002E/ARV101Lと統一 */
.button-area button {
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color 0.3s;
    color: var(--color-text-on-primary);
}

/* 編集ボタン */
.edit-button {
    background-color: var(--color-primary);
}

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

/* 削除ボタン */
.delete-button {
    background-color: var(--color-danger);
}

.delete-button:hover {
    background-color: var(--color-danger-hover);
}

/* 戻るボタン */
.back-button {
    background-color: var(--color-secondary);
}

.back-button:hover {
    background-color: var(--color-secondary-hover);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .screen-title {
        font-size: 20px;
    }

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

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