/* src/public/css/calculator/item_unit_price_list.css */

/* === 表示するリストの切り替え（マイリスト／おすすめリスト） === */
/* 💡 追加：自分で登録しなくても中身を見られるように、参照専用のリストへ切り替える見出しタブ */
.source-tabs {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.source-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.source-tab:hover { color: #2a5298; }

/* 選んでいるほうを分かりやすくする */
.source-tab.is-active {
    color: #1e3c72;
    border-bottom-color: #2a5298;
}

/* 💡 追加：おすすめリストを見ているときの説明（参照専用であることの案内） */
.official-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f0f7ff;
    border: 1px solid #cfe2ff;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #334155;
}

/* 💡 追加：display 指定があると hidden 属性が効かなくなるため、明示的に隠す */
.official-note[hidden] { display: none; }

.list-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

/* 💡 追加：絞り込みと並び替えが並ぶため、それぞれに見出しを付けた */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 💡 追加：display 指定があると hidden 属性が効かなくなるため、明示的に隠す */
.filter-group[hidden] { display: none; }

.filter-label {
    font-size: 0.78rem;
    font-weight: bold;
    color: #64748b;
}

/* 💡 追加：項目が増えたため、登録ボタンだけを右端に寄せる */
.list-actions #btn-open-add-modal {
    margin-left: auto;
}

.select-filter {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fff;
}

/* === アプリを1つに絞り込んだときの見出し === */
/* 💡 追加：画像・アプリ名・参照サイトをまとめて出す */
.app-detail {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
}

/* 💡 追加：display 指定があると hidden 属性が効かなくなるため、明示的に隠す */
.app-detail[hidden] { display: none; }

.app-detail-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.app-detail-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.app-detail-img[hidden] { display: none; }

.app-detail-body h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    color: #1e3c72;
}

/* === タイトル一覧（「すべてのアプリ・タイトル」を選んでいるときの表示） === */
/* 💡 追加：見た目を価格早見表と同じ表にそろえています（.price-table を共用） */
.app-index-section {
    margin-bottom: 30px;
}

/* 行ごと押せることが分かるようにする */
.app-index-row {
    cursor: pointer;
}

.app-index-row:hover,
.app-index-row:focus-visible {
    background: #f0f7ff;
    outline: none;
}

.app-index-row:focus-visible {
    box-shadow: inset 0 0 0 2px #2a5298;
}

.app-index-table .cell-app-name {
    font-weight: bold;
    color: #1e3c72;
}

.app-index-table .cell-app-date {
    color: #64748b;
    font-size: 0.85rem;
}

.link-empty { color: #cbd5e1; }
.link-empty[hidden] { display: none; }

/* === 価格早見表（表形式） === */
.price-table-section {
    margin-bottom: 30px;
}

.price-table-title {
    font-size: 1.05rem;
    color: #1e3c72;
    margin: 0 0 12px;
}

/* 画面が狭いときに表がはみ出さないよう、横スクロールできるようにする */
.price-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    white-space: nowrap;
}

.price-table th,
.price-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.price-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: bold;
}

.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:hover { background: #f8fafc; }

.price-table .cell-name { font-weight: bold; color: #1e3c72; white-space: normal; }
.price-table .cell-unit { color: #2a5298; font-weight: bold; }

.cell-actions { white-space: nowrap; }

.btn-row-trend,
.btn-row-delete {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    margin-right: 4px;
}
.btn-row-trend:hover  { background: #f0f7ff; color: #2a5298; }
.btn-row-delete:hover { background: #fff1f2; color: #dc3545; }

/* 💡 追加：中身が空のときだけ出す「おすすめリストを見る」ボタン */
.sample-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

/* 💡 追加：display 指定があると hidden 属性が効かなくなるため、明示的に隠す */
.sample-actions[hidden] { display: none; }

.sample-actions .btn-trend { width: auto; padding: 10px 20px; }

/* 💡 削除：.btn-primary は単価計算ページでも使うため style.css に一本化しました */

/* 💡 追加：モーダル内の「登録する」ボタン（旧 style 属性の代わり） */
.btn-block {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    font-size: 1rem;
}

/* 💡 削除：パック1件ずつのカード表示（.pack-grid / .pack-card 一式）は、
             タイトル一覧と価格早見表の2つの表に統一したため取りやめました */

.shop-link {
    color: #2a5298;
    text-decoration: none;
    font-weight: bold;
}
.shop-link:hover { text-decoration: underline; }

/* 💡 追加：登録が1件も無い／絞り込みで0件のときの案内 */
.pack-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
    padding: 30px 10px;
}

/* 💡 追加：単価の推移を見るボタンと、その表示エリア */
.btn-trend {
    margin-top: 12px;
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #2a5298;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-trend:hover { background: #f0f7ff; }

.trend-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

/* 💡 追加：見出しと閉じるボタンを同じ行に並べる */
.trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.trend-section h3 {
    font-size: 1.05rem;
    color: #1e3c72;
    margin: 0;
}

.trend-list {
    display: flex;
    flex-direction: column;
}

.trend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #475569;
}
.trend-row:last-child { border-bottom: none; }

.trend-unit { color: #2a5298; }

/* モーダル */
.modal-overlay {
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* 💡 追加：display: flex があると hidden 属性が効かないため、明示的に隠す */
.modal-overlay[hidden] { display: none; }
.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.btn-close {
    background: none; border: none; font-size: 1.5rem; cursor: pointer;
}

/* 💡 追加：モーダル内の入力欄の見た目が指定されていなかったため追加
             （単価計算ページと同じ見た目にそろえています） */
.modal-content .input-group {
    margin-bottom: 15px;
}

.modal-content .input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #1e3c72;
}

.modal-content .input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.modal-content .input-row {
    display: flex;
    gap: 15px;
}

.modal-content .flex-1 {
    flex: 1;
}

/* === スマホ・タブレット対応 === */
/* 💡 追加：狭い画面での並びと余白を調整する */
@media (max-width: 768px) {
    /* 💡 追加：タブは2つ並ぶと文字が詰まるため、半分ずつの幅にして中央に寄せる */
    .source-tabs { gap: 0; }

    .source-tab {
        flex: 1;
        padding: 10px 6px;
        font-size: 0.82rem;
    }

    .list-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group,
    .select-filter,
    .list-actions .btn-primary { width: 100%; }

    /* 💡 追加：横スクロールせずに読めるよう、表を1件ずつのブロック表示に切り替える */
    .price-table { white-space: normal; }
    .price-table thead { display: none; }

    .price-table tbody tr {
        display: block;
        padding: 12px 14px;
        border-bottom: 1px solid #e2e8f0;
    }
    .price-table tbody tr:last-child { border-bottom: none; }

    .price-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border-bottom: none;
    }

    /* 💡 追加：display 指定があると hidden 属性が効かなくなるため、明示的に隠す
                （おすすめリストでは「操作」欄を出さないため必要です） */
    .price-table td[hidden] { display: none; }

    /* 項目名は blade の data-label から出す（見出し行が隠れるため） */
    .price-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 0.8rem;
        font-weight: bold;
        flex-shrink: 0;
    }

    .price-table .cell-name {
        display: block;
        font-size: 1rem;
        margin-bottom: 4px;
    }
    .price-table .cell-name::before { content: none; }

    /* 💡 追加：タイトル一覧もブロック表示になるため、タイトルを見出しのように大きく出す */
    .app-index-table .cell-app-name {
        display: block;
        font-size: 1.05rem;
        margin-bottom: 4px;
    }
    .app-index-table .cell-app-name::before { content: none; }

    .app-detail { padding: 14px; gap: 12px; }
    .app-detail-img { width: 52px; height: 52px; }
    .app-detail-body h3 { font-size: 1rem; }

    .modal-content { padding: 18px; }

    /* 有償・無償などの2列は横幅が足りないため縦積みにする */
    .modal-content .input-row {
        flex-direction: column;
        gap: 0;
    }

    .trend-section { padding: 16px; }

    .trend-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 0.85rem;
    }
}