/**
 * provision-settings.css - 提供設定管理画面のスタイル
 * 
 * 災害情報の提供設定を管理する画面のスタイル定義
 * 提供開始・終了・変更の設定、メッシュ選択、メール送信機能を含む
 */

/* ========================================
   メインコンテナ
   提供設定画面全体のレイアウト
   ======================================== */

.provision-settings-container {
    padding: 0 20px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
   ツールバー
   ステータス表示とアクションボタン
   ======================================== */
.provision-settings-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* ステータス表示テキスト */
.provision-settings-status {
    font-size: 16px;
    color: #495057;
    font-weight: 500;
}

/* アクションボタンのコンテナ */
.provision-settings-buttons {
    display: flex;
    gap: 10px;
}

/* ========================================
   検索・フィルター
   提供設定の絞り込み機能
   ======================================== */
.provision-settings-search {
    margin-bottom: 20px;
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* フィルター項目のコンテナ */
.provision-settings-filters {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

/* フィルター入力フィールド（セレクトボックス、日付） */
.provision-settings-filters select,
.provision-settings-filters input[type="date"] {
    min-width: 150px;
}

/* フィルターラベル */
.provision-settings-filters label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 14px;
    color: #495057;
}

/* ========================================
   一覧表示
   提供設定のリスト表示
   ======================================== */
.provision-settings-list-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* リスト本体 */
.provision-settings-list {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    max-height: 600px;
    overflow-x: auto;
    overflow-y: auto;
}

/* 個別の提供設定項目（グリッドレイアウト） */
.provision-setting-item {
    display: grid;
    grid-template-columns: 70px 125px 1fr 1fr 1fr 80px 80px 120px;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    align-items: center;
    transition: background-color 0.2s ease;
    min-width: 1040px;
}

/* 項目のホバー効果 */
.provision-setting-item:hover {
    background-color: #f8f9fa;
}

/* 最後の項目の下線を削除 */
.provision-setting-item:last-child {
    border-bottom: none;
}

/* ========================================
   提供中の行のスタイル
   アクティブな提供設定の強調表示
   ======================================== */

/* 提供中の行の背景色（緑色） */
.provision-row-enabled {
    background-color: #e7f5e7;
}

/* 提供中の行のホバー効果 */
.provision-row-enabled:hover {
    background-color: #d4edda;
}

/* 提供中の行の各列を太字に */
.provision-row-enabled .provision-operation-type,
.provision-row-enabled .provision-disaster-type,
.provision-row-enabled .provision-provision-type,
.provision-row-enabled .provision-datetime,
.provision-row-enabled .provision-mesh-count,
.provision-row-enabled .provision-status {
    font-weight: 600;
}

/* ========================================
   ヘッダー行
   リストのカラムヘッダー
   ======================================== */
.provision-setting-header {
    background: #e9ecef;
    font-weight: 600;
    color: #495057;
}

/* ヘッダー行はホバー効果なし */
.provision-setting-header:hover {
    background: #e9ecef;
}

/* ========================================
   各カラムのスタイル
   運用種別、災害種別、提供種別などの表示
   ======================================== */
.provision-operation-type {
    font-weight: 500;
}

/* 運用種別: OPR（本番運用）- 赤色 */
.provision-operation-type.opr {
    color: #dc3545;
}

/* 運用種別: VAV（検証）- オレンジ色 */
.provision-operation-type.vav {
    color: #fd7e14;
}

/* 運用種別: TRN（訓練）- 紫色 */
.provision-operation-type.trn {
    color: #6f42c1;
}

/* 災害種別カラム */
.provision-disaster-type {
    font-weight: 500;
}

/* 災害種別: 地震 - 赤色 */
.provision-disaster-type.earthquake {
    color: #dc3545;
}

/* 災害種別: その他 - オレンジ色 */
.provision-disaster-type.other {
    color: #fd7e14;
}

/* 複数選択時の地震表示 */
.disaster-type-earthquake {
    color: #dc3545;
    font-weight: 600;
}

/* 複数選択時のその他表示 */
.disaster-type-other {
    color: #fd7e14;
    font-weight: 600;
}

/* 提供種別カラム */
.provision-provision-type {
    font-weight: 500;
}

/* 提供種別: 開始 - 緑色 */
.provision-provision-type.start {
    color: #28a745;
}

/* 提供種別: 終了 - 赤色 */
.provision-provision-type.end {
    color: #dc3545;
}

/* 提供種別: 変更 - オレンジ色 */
.provision-provision-type.change {
    color: #fd7e14;
}

/* 日時カラム */
.provision-datetime {
    font-size: 14px;
    color: #6c757d;
}

/* メッシュ数カラム */
.provision-mesh-count {
    text-align: center;
    font-weight: 500;
    color: #495057;
}

/* ========================================
   提供状態
   提供中/停止中の表示
   ======================================== */
.provision-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
}

/* 提供状態のアイコン */
.provision-status-icon {
    font-size: 16px;
    font-weight: bold;
}

/* 提供中の状態 - 緑色 */
.provision-status.provision-enabled {
    color: #28a745;
}

/* 提供中のアイコン色 */
.provision-status.provision-enabled .provision-status-icon {
    color: #28a745;
}

/* 停止中の状態 - 赤色 */
.provision-status.provision-disabled {
    color: #dc3545;
}

/* 停止中のアイコン色 */
.provision-status.provision-disabled .provision-status-icon {
    color: #dc3545;
}

/* アクションボタンのコンテナ */
.provision-actions {
    display: flex;
    gap: 5px;
}

/* アクションボタン（編集、削除など） */
.provision-actions .btn {
    padding: 4px 8px;
    font-size: 12px;
    min-width: 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

/* ========================================
   空の状態
   データがない場合の表示
   ======================================== */
.provision-settings-empty {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* 空の状態のアイコン */
.provision-settings-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* ========================================
   ローディング状態
   データ読み込み中の表示
   ======================================== */
.provision-settings-loading {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* ローディングスピナー */
.provision-settings-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .provision-setting-item {
        grid-template-columns: 60px 105px 1fr 1fr 1fr 70px 70px 100px;
        gap: 10px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .provision-settings-container {
        padding: 10px;
    }

    .provision-settings-toolbar {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .provision-settings-status {
        font-size: 14px;
        text-align: center;
    }

    .provision-settings-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .provision-settings-buttons .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    .provision-settings-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .provision-settings-filters select,
    .provision-settings-filters input[type="date"] {
        min-width: auto;
        width: 100%;
    }

    /* スマホでは横スクロール可能なテーブル形式を維持 */
    .provision-settings-list-container {
        margin: 0 -10px;
        padding: 0 10px;
    }

    .provision-setting-item {
        font-size: 12px;
        padding: 10px 8px;
        gap: 8px;
    }

    .provision-actions .btn {
        padding: 3px 6px;
        font-size: 11px;
        min-width: 35px;
    }
}

/* 詳細表示モーダル */
.provision-detail-modal .modal-content {
    max-width: 800px;
    width: 90vw;
}

.provision-detail-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.provision-detail-label {
    font-weight: 600;
    color: #495057;
    padding: 8px 0;
}

.provision-detail-value {
    padding: 8px 0;
    color: #212529;
}

.provision-mesh-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.provision-mesh-tag {
    display: inline-block;
    margin: 2px;
    padding: 4px 8px;
    background: #007bff;
    color: white;
    border-radius: 4px;
    font-size: 12px;
}

.provision-body-preview {
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.4;
}