@import url("theme.css");

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

.icon-admin {
    color: var(--text-color, #333333); /* テキスト色（例: 濃いグレー） */
    font-size: 16px !important; /* フォントサイズ（例: 16px） */
    text-decoration: none; /* 下線を消したい場合 */
    margin-right: 15px;
}

.icon-admin:hover {
    color: #00cbff; /* ホバー時の色（例: ブルー） */
    font-size: 16px !important; /* フォントサイズ（例: 16px） */
}


#columnSettings label {
    font-size: 12px; /* お好みで 16px や 12px などに調整可 */
}


/* 検索フォームの入力エリア */
#searchTitle, #searchAuthor {
    width: 93%;
    padding: 8px;
    margin-top: 10px;
}


/* メインコンテンツ */
/* コンテンツエリア全体を中央揃えに */
.content {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
}


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

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


/* フォームのデザイン */
/* フォームの中央揃え */
form {
    background: var(--primary-bg);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px; /* 同じ幅で統一感を出す */
    margin: auto;
}

/* フォームのラベルと入力欄 */
form label, form input, form textarea {
    display: block;
    margin-bottom: 10px;
}

form input, form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

input[type="file"] {
    padding: 5px;
}

/* ボタン */
.defaultButton {
    background: #4CAF50;
    color: white;
}

button:hover {
    background-color: #45a049;
}


.accordion {
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.active, .accordion:hover {
    background-color: #0056b3;
}

.panel {
    padding: 0 15px;
    display: none;
    background-color: white;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

/* 入力フォームのデザイン */
input[type="number"],
input[type="text"] {
    width: 50px;
    padding: 2px 2px;
    border: 0;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.name > input {
    width: 150px;
    padding: 2px 2px;
    border: 0;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

select {
    width: 80px;
    padding: 2px 2px;
    border: 0px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* レシピ情報の食材記述を食材マスターに反映するダイアログのスタイル*/
/* 未分類食材の編集コンテナ */
.unknown-ingredients-container {
    max-height: 70vh; /* ダイアログのスクロール可能エリアを制限 */
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color:var(--secondary-bg);
}

/* 食材の入力エリアのコンテナ */
.ingredient-edit-container {
    display: flex;
    align-items: center;
    gap: 10px; /* 要素間の間隔を調整 */
    margin-bottom: 10px;
}

/* 食材名ラベルのスタイル */
.ingredient-label {
    width: 100px; /* ラベル幅 */
    font-weight: bold;
    text-align: right;
}

/* カテゴリラベルのスタイル */
.category-label {
    width: 90px; /* 「→ カテゴリ」 のラベル幅 */
    font-weight: bold;
    text-align: left;
}

/* 食材名入力フィールド */
.ingredient-input {
    flex-grow: 1; /* 入力欄の幅を適切に調整 */
    min-width: 180px;
    max-width: 250px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* カテゴリー選択のスタイル */
.ingredient-category-select {
    flex-grow: 1;
    width: auto !important; /* UIkit の `width: 100%` を上書き */
    min-width: 180px;
    max-width: 220px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* ダイアログボタンの間隔 */
.uk-text-right {
    margin-top: 20px;
}

.suggestion-box {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    width: auto; /* ✅ 幅をコンテンツに合わせる */
    min-width: 150px; /* ✅ 最小幅を設定 */
    max-width: 250px; /* ✅ 最大幅を設定 */
    list-style: none;
    padding: 5px;
    margin: 0;
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
    display: none;
    white-space: nowrap; /* ✅ テキスト折り返し防止 */
}

.suggestion-item {
    padding: 5px;
    cursor: pointer;
    font-size: 14px; /* ✅ 文字サイズ調整 */
    text-align: left; /* ✅ 左寄せ */
}

.suggestion-item:hover {
    background-color: #f1f1f1;
}

/*
幅広テーブル表示に伴う操作性問題への対策
 */

/* テーブルをラップして横スクロールに対応
.table-scroll-wrapper {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 10px;
}
 */
/* 表が極端に小さくならないように最小幅を設定
#dataTable {
  min-width: 1080px;
  border-collapse: collapse;
  width: 100%;
}
*/
/* 表のセルにも余白を確保
#dataTable th,
#dataTable td {
  padding: 8px 12px;
  white-space: nowrap;
}
 */
/* メニューボタンの設定を上書きする*/
.menu-button {
    background-color: var(--primary-bg);
    color: var(--text-color);
    border: 1px solid var(--secondary-hover);
    border-radius: 5px;
    padding: 2px;
    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;
}

/* ダイアログ全体のサイズ調整 */
.uk-modal-dialog {
    width: 90%; /* 画面の80%幅に設定 */
    /*max-width: 800px;*/ /* 最大幅を設定 */
}

/* スクロール可能な未分類リストのコンテナ */
.unknown-ingredients-container {
    max-height: 400px; /* 高さ制限 */
    overflow-y: auto; /* 垂直スクロール有効 */
    padding: 10px;
    border: 1px solid #ddd;
    background-color: var(--secondary-bg);
}

/* スマホ対応 */


.modal-ingredient {
    /*overflow: auto;*/
    background-color: var(--primary-bg);
}

@media (max-width: 768px) {
    .ingredient-edit-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    .ingredient-edit-container input[type="checkbox"] {
        margin-bottom: 6px;
    }

    .ingredient-edit-container .ingredient-label,
    .ingredient-edit-container .category-label {
        display: inline-block;
        font-weight: bold;
        margin-right: 6px;
    }

    .ingredient-edit-container .ingredient-input,
    .ingredient-edit-container .ingredient-category-select {
        width: 100%;
        max-width: 100%;
        margin-top: 2px;
        margin-bottom: 8px;
    }

    .ingredient-edit-container .ingredient-name-line,
    .ingredient-edit-container .category-select-line {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}
.uk-modal-dialog {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 95vh;
    width: 100vw;
    max-width: 500px;
}
.uk-modal-body.modal-ingredient {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* ボタンが隠れないように */
}
.modal-footer {
    position: sticky;
    bottom: 0;
    background-color: var(--secondary-bg);
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: right;
    border-top: 1px solid #ccc;
    z-index: 10;
}

#blockedModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}
#blockedModal .modal-content {
  background: #fff;
  margin: 10% auto;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
}
#blockedModal h5 {
  margin-top: 0;
}

/* 未設定の栄養成分セルを強調 */
.missing-ingredient-master input {
    background-color: #ffe5e5; /* 薄い赤 */
}