@import url("theme.css");

.header-top,
.toolbar,
.container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}


/* ボタンが無効（disabled）の場合のスタイル */
.sidebar  {
    background-color: #ccc; /* 灰色 */
    color: #666; /* 文字色 */
    cursor: not-allowed; /* カーソルを変更 */
    border: 1px solid #aaa;
    opacity: 0.6;
}

/* ラベル全体を小さくする */
.sidebar-nav .infoBox {
    font-size: 0.85rem; /* 小さめの文字サイズ */
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px;
}

/* チェックボックスのサイズを小さくする */
.sidebar-nav .infoBox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    transform: scale(0.85); /* ✅ 縮小（ブラウザによって互換性高） */
    cursor: pointer;
}

/* コンテンツエリア全体を中央揃えに */
.content {
    flex-grow: 1;
    padding: 20px;
}

.section {
    /*background: white;*/
    margin-top: 10px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 🏆 選択リストのスタイル */
section select {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 2px;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* 🏆 日付入力のスタイル */
input[type="date"] {
    font-size: 12px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 2px;
}

/* ✅ ホバー時のリスト */
section select option:hover {
    background-color: #c5e1a5;
}

#savePlanSettingsBtn, #saveConstraintSettingsBtn, #generatePlanCandidatesButton {
    width: 150px;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

/* ラベル全体を小さくする */
.toolbar label.infoBox {
    font-size: 0.85rem; /* 小さめの文字サイズ */
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px;
}

/* チェックボックスのサイズを小さくする */
.toolbar label.infoBox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    transform: scale(0.85); /* ✅ 縮小（ブラウザによって互換性高） */
    cursor: pointer;
}


/* 🍳 朝・昼・夕のラベルデザイン */
.meal-type-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 15px;
    color: #333;
    text-align: left;
}

/* 🎯 すべての入力エリアを統一 */
.favorite-meal-container,
.non-favorite-meal-container,
.forbidden-ingredients-container {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    gap: 15px; /* ラベルと入力欄の間隔 */
    min-height: 30px; /* 高さを統一 */
    margin-bottom: 10px;
}

/* 朝・昼・夕それぞれの `.favorite-meal-container` */
.favorite-meal-container-breakfast,
.favorite-meal-container-lunch,
.favorite-meal-container-dinner,
.non-favorite-meal-container-breakfast,
.non-favorite-meal-container-lunch,
.non-favorite-meal-container-dinner,
.forbidden-ingredients-container-breakfast,
.forbidden-ingredients-container-lunch,
.forbidden-ingredients-container-dinner,
.max-energy-breakfast,
.max-energy-lunch,
.max-energy-dinner,
.max-salt-breakfast,
.max-salt-lunch,
.max-salt-dinner,
.max-cooking-time-breakfast,
.max-cooking-time-lunch,
.max-cooking-time-dinner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* ✅ ラベルデザインを統一 */
.favorite-meal-container-breakfast label,
.favorite-meal-container-lunch label,
.favorite-meal-container-dinner label,
.non-favorite-meal-container-breakfast label,
.non-favorite-meal-container-lunch label,
.non-favorite-meal-container-dinner label,
.forbidden-ingredients-container-breakfast label,
.forbidden-ingredients-container-lunch label,
.forbidden-ingredients-container-dinner label,
.max-energy-breakfast label,
.max-energy-lunch label,
.max-energy-dinner label,
.max-salt-breakfast label,
.max-salt-lunch label,
.max-salt-dinner label,
.max-cooking-time-breakfast label,
.max-cooking-time-lunch label,
.max-cooking-time-dinner label{
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* ✅ 入力欄のデザインを統一 */
.favorite-meal-container-breakfast input,
.favorite-meal-container-lunch input,
.favorite-meal-container-dinner input,
.non-favorite-meal-container-breakfast input,
.non-favorite-meal-container-lunch input,
.non-favorite-meal-container-dinner input,
.forbidden-ingredients-container-breakfast input,
.forbidden-ingredients-container-lunch input,
.forbidden-ingredients-container-dinner input,
.max-energy-breakfast input,
.max-energy-lunch input,
.max-energy-dinner input,
.max-salt-breakfast input,
.max-salt-lunch input,
.max-salt-dinner input,
.max-cooking-time-breakfast input,
.max-cooking-time-lunch input,
.max-cooking-time-dinner input {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    gap: 15px; /* ラベルと入力欄の間隔 */
    min-height: 30px; /* 高さを統一 */
    margin-bottom: 10px;
    border-radius: 5px;
    border-width: 1px;
}

/* ✅ 入力欄のデザインを統一 */
.forbidden-ingredients-container-breakfast input,
.forbidden-ingredients-container-lunch input,
.forbidden-ingredients-container-dinner input {
    margin-top: 10px;
}

/* 🎯 検索結果リスト */
.search-list {
    list-style-type: none;
    padding: 0;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #555;
    font-size: 10pt;
}

.search-list li {
    padding: 2px;
    cursor: pointer;
}

.search-list li:hover {
    background-color: #e0f7fa;
}

/* 🍳 モバイル時: ラベルの下に入力欄を表示 */
/* モバイルの場合のスタイル調整 */
@media (max-width: 768px) {
    .favorite-meal-container-breakfast,
    .favorite-meal-container-lunch,
    .favorite-meal-container-dinner,
    .non-favorite-meal-container-breakfast,
    .non-favorite-meal-container-lunch,
    .non-favorite-meal-container-dinner,
    .forbidden-ingredients-container-breakfast,
    .forbidden-ingredients-container-lunch,
    .forbidden-ingredients-container-dinner {
        display: block;
    }

    .favorite-meal-container-breakfast label,
    .favorite-meal-container-lunch label,
    .favorite-meal-container-dinner label,
    .non-favorite-meal-container-breakfast label,
    .non-favorite-meal-container-lunch label,
    .non-favorite-meal-container-dinner label,
    .forbidden-ingredients-container-breakfast label,
    .forbidden-ingredients-container-lunch label,
    .forbidden-ingredients-container-dinner label {
        display: block;
        margin-bottom: 5px;
    }

    .favorite-meal-container-breakfast input,
    .favorite-meal-container-lunch input,
    .favorite-meal-container-dinner input,
    .non-favorite-meal-container-breakfast input,
    .non-favorite-meal-container-lunch input,
    .non-favorite-meal-container-dinner input,
    .forbidden-ingredients-container-breakfast input,
    .forbidden-ingredients-container-lunch input,
    .forbidden-ingredients-container-dinner input {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .favorite-meal-container-breakfast ul,
    .favorite-meal-container-lunch ul,
    .favorite-meal-container-dinner ul,
    .non-favorite-meal-container-breakfast ul,
    .non-favorite-meal-container-lunch ul,
    .non-favorite-meal-container-dinner ul,
    .forbidden-ingredients-container-breakfast ul,
    .forbidden-ingredients-container-lunch ul,
    .forbidden-ingredients-container-dinner ul {
        width: 100%;
    }
}

/* 🏆 選択リストのスタイル */
select[multiple] {
    width: 100%;
    height: 120px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* ✅ ホバー時のリスト */
select[multiple] option:hover {
    background-color: #c5e1a5;
}

/* ✅ 選択されたアイテムの強調 */
select[multiple] option:checked {
    background-color: #b3e5fc;
    font-weight: bold;
}

/*
献立計画生成・表示結果のスタイル
 */
.meal-day {
    background: var(--secondary-bg);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.date-label {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.meal-section {
    padding: 10px;
    border-radius: 8px;
    background: var(--accent-color);
    margin-bottom: 15px;
}

.meal-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.meal-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .meal-item {
        display: block;
        align-items: center;
        margin-bottom: 8px;
    }

}

.meal-label {
    font-weight: bold;
    margin-right: 5px;
}

.meal-title {
    margin-right: 10px;
}

.meal-input {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 5px;
}

.edit-button, .save-button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.edit-button {
    background: #4CAF50;
    /*background: #ffcc00;*/
    color: #fff;
}

.edit-button:hover {
    background: #ffb700;
}

.save-button {
    background: #4CAF50;
    /*background: #28a745;*/
    color: #fff;
}

.save-button:hover {
    background: #45a049;
    /*background: #218838;*/
}

/*
献立候補表示のスタイル
 */
/* カテゴリーのラベル */
.meal-category-container {
    margin-top: 20px;
}

.meal-category-container h3 {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 10px;
    border-left: 5px solid #4CAF50;
    padding-left: 10px;
}

/* 候補リストのレイアウト（カード型に変更） */
.candidate-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

/* 献立候補（カード） */
.meal-candidate-item {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* カードのホバーエフェクト */
.meal-candidate-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 献立タイトル */
.candidate-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.candidate-title a {
    text-decoration: none;
    color: #333;
}

.candidate-title a:hover {
    color: #4CAF50;
}

/* 在庫状況メッセージ */
.stock-message {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

/* 選択ボタン */
.select-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
    width: 100%;
    text-align: center;
}

.select-button:hover {
    background: #45a049;
}

/* 候補がない場合のメッセージ */
.no-candidates {
    text-align: center;
    font-size: 1.2rem;
    color: #999;
    margin-top: 20px;
}

/* 在庫リストのデザイン (上揃え) */
.stock-list {
    padding-left: 15px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 🔹 左寄せ・上揃え */
}

/* 在庫情報リストの各項目 */
.stock-list li {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 3px;
    list-style-type: "🔹 "; /* 📌🔹▶🥕🍽📦 ✅ の代わりに新しいアイコン */
}

/* メニューボタンの設定を上書きする*/
.menu-button {
    background-color: var(--primary-bg);
    color: var(--text-color);
    border: 1px solid var(--secondary-hover);
    border-radius: 5px;
    padding: 5px;
    margin-right: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 20px;
    width: 35px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toolbar .left {
    display: flex;
    align-items: center;
    gap: 4px; /* 👈 ボタンの間隔を狭くする */
}

.meal-setting {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.meal-setting h3 {
    width: 100%;
    margin-bottom: 10px;
    color: #444;
}

.meal-setting label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.1em;
}

.meal-setting label input {
    margin-right: 5px;
}

/*
食事設定　朝昼夕の色スタイル
 */
.icon.morning {
    color: #32CD32; /* 明るいグリーン */
}

.icon.noon {
    color: #FFD700; /* 明るい黄色 */
}

.icon.night {
    color: #745399; /* 藍色 */
}

/*
候補生成
 */
.ingredient-input {
    min-height: 25px; /* 高さを統一 */
    margin-bottom: 2px;
    border-radius: 5px;
    border-width: 1px;
}
.voice-button, .clear-button {
    margin-left: 5px;
    padding: 4px 8px;
}

.dynamic-input {
    font-size: 0.8em;
    padding: 2px;
    transition: width 0.2s ease-out;
}