/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       woodbox
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
*/

input[type="hidden"] {
    display: none;
}

/************** サイドバーのブランド表示 **************/
.brand-display {
    background-color: white;
    color: black;
    padding: 10px;
    margin: 20px 0;
    text-align: left; /* 左寄せ */
    font-weight: bold;
    border: 1px solid #ccc; /* Optional: for better visibility */
    border-radius: 0; /* 角の丸みをなくす */
    white-space: pre-line; /* 改行を維持 */
}


/******************** 区切り線 *********************/

.form-style li {
    margin-bottom: 15px;
}

.form-divider {
    border: 0;
    border-top: 1px solid #777; /* シンプルな太線 */
    margin: 20px 0;
}

.form-spacing {
    margin: 20px 0;
}

/******************** TOPページ *********************/
.login-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃えにする */
    /* 上 30px、右 30px、下 20px、左 50px */
}

.login-info img {
    max-width: 400px;
    height: auto;
    margin-top: 30px;	
    margin-left: 50px;
    margin-bottom: 10px;
}

.login-info p {
    font-size: 16px;
    color: #333; /* テキストの色を調整してください */
    margin-left: 50px;
    margin-bottom: 30px;
}

/* データベース切り替え部分のスタイル */
.switch-database-form {
    margin-left: 50px;
    margin-bottom: 30px;
}

.switch-database-form p {
    font-size: 16px;
    color: #333; /* テキストの色を調整してください */
    margin-bottom: 0px;
}

.switch-database-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px; /* 最大幅を設定 */
}

.switch-database-form button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 東京檜ボタンの色を赤に変更 */
.switch-database-form button.brand1 {
    background-color: #d9534f; /* 赤色 */
}

/* 森のアーカイブボタンの色を緑に変更 */
.switch-database-form button.brand2 {
    background-color: #5cb85c; /* 緑色 */
}

/* 東京檜ボタンの hover 時のスタイル */
.switch-database-form button.brand1:hover {
    background-color: #c9302c; /* hover時の赤色 */
}

/* 森のアーカイブボタンの hover 時のスタイル */
.switch-database-form button.brand2:hover {
    background-color: #4cae4c; /* hover時の緑色 */
}

/******************** サイドバーのカスタマイズ *********************/
.custom-navigation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-navigation h2 {
    font-size: 16px; /* フォントサイズを小さく調整 */
    color: #fff; /* 白色に設定 */
    padding-left: 0; /* パディングをなくす */
    border-left: none; /* 左のボーダーをなくす */
}

.custom-navigation-list li {
    margin-bottom: 8px; /* 各リストアイテムの間隔を広げる */
    display: flex;
    align-items: center; /* リストアイテムを中央揃え */
    border-bottom: 1px solid #fff; /* 下線を白色に設定 */
    padding-bottom: 10px; /* 下部余白 */
    border-top: none; /* 上部の余分な線を削除 */
}

.custom-navigation-list li:last-child {
    border-bottom: 1px solid #fff; /* 最後のリストアイテムの下線を白色に設定 */
    padding-bottom: 10px; /* 最後のリストアイテムの下部余白 */
    border-top: none; /* 上部の余分な線を削除 */
}

.custom-navigation-list li::before {
    content: none; /* 余分な線や装飾を削除 */
}

.custom-navigation-list li a {
    color: #ccc; /* リンクの色を淡い灰色に設定 */
    text-decoration: none;
    display: block;
    padding: 5px 0;
    padding-left: 0; /* 左にパディングをなくす */
    border-left: none; /* 左のボーダーをなくす */
}

.custom-navigation-list li a:hover {
    color: #45a049; /* ホバー時の色 */
}

/******************** 全体のスタイル *********************/

/* 見出し */
h1 {
    margin: 30px 30px 30px 50px; /* 上 30px、右 30px、下 30px、左 50px */
}

/* テキストボックス（type="text"型 のinput要素）の幅 */
input[type="text"] {
    width: 400px;
}

/* セレクトボックスの幅 */
.box select {
    width: 300px;
}

/* ※なぜかリスト項目ごとに中黒が表示されてしまい、それを消すために追加 */
ul {
    list-style-type: none;
    padding-left: 0;
}

/* 検索フォームのスタイル */
ul.search-form {
    list-style-type: none;
    padding-left: 0;
    margin: 30px;
    margin-left: 50px; /* 左に余白を追加 */
}

/* 検索フォームの各項目 */
ul.search-form li {
    margin-bottom: 15px;
}

/* テーブル全体のスタイル */
.table-style {
    border-collapse: collapse; /* collapse：隣接するセルの境界線が1つにまとまる */
    border: 1px solid #000; /* テーブルの外枠の太さ、種類、色の設定 */
    width: calc(100% - 50px); /* 幅を全体の100%から50px引いたサイズに設定 */
    margin-left: 50px; /* 左に余白を追加 */
}

/* テーブルセルのスタイル */
.table-style th, .table-style td {
    text-align: center; /* テキストを中央揃え */
    vertical-align: middle; /* 文字の垂直方向の中央揃え */
    padding: 8px; /* 内側の余白を設定 */
    border: 1px solid #000; /* セルの境界線の設定 */
}

/* テーブルの見出し行のスタイル */
.table-style thead th {
    background-color: #f2f2f2; 
}

/* 登録画像プレビュー */
.image-preview {
    width: auto;    /* 幅は自動調整 */
    max-width: 200px;  /* 最大幅を200pxに設定 */
    height: auto;   /* 高さは自動調整（アスペクト比を保持） */
    margin-top: 5px;   /* 上部に5ピクセルの隙間を設定 */
}

/******************** 各テーブル一覧画面 *********************/

/* 新規登録ボタン */
.new-registration-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #4CAF50; /* 緑色 */
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.new-registration-button:hover {
    background-color: #45a049; /* ホバー時の色 */
    color: black; /* ホバー時の文字色 */
}

/* 新規登録ボタンのコンテナ */
.new-registration-container {
    margin: 20px 0;
    margin-left: 50px; /* 左に余白を追加 */
}

/* ログインメッセージ */
.login-message {
    margin: 50px;
}

/* 編集ボタン */
.edit-button {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
    border: none;
    cursor: pointer;
    white-space: nowrap; /* テキストを横書きにする */
}

.edit-button:hover {
    background-color: #45a049; /* ホバー時の色 */
    color: black; /* ホバー時の文字色 */
}

/* 削除ボタン */
.delete-button {
    background-color: #f44336; /* 赤色 */
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
    white-space: nowrap; /* テキストを横書きにする */
}

.delete-button:hover {
    background-color: #e53935; /* ホバー時の色 */
    color: black; /* ホバー時の文字色 */
}

/* テーブル */
table {
    width: calc(100% - 50px); /* テーブル全体の左に余白を追加 */
    border-collapse: collapse;
    margin-left: 50px; /* テーブル全体の左に余白を追加 */
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center; /* テキストを中央揃え */
}

th {
    background-color: #333;
    color: white;
    text-align: center; /* 見出しを中央揃え */
}

td {
    vertical-align: middle;
}

td:nth-child(1), /* ID列を中央揃え */
td:nth-child(4), /* 編集列を中央揃え */
td:nth-child(5) { /* 削除列を中央揃え */
    text-align: center;
}

/* 奇数行 */
table tr:nth-child(odd) {
    background-color:#f0f0f0;
}

/* 偶数行 */
table tr:nth-child(even) {
    background-color: #ffffff;
}

/******************** テーブル登録フォームのスタイル *********************/

h1 {
    margin-bottom: 20px; /* 下のフォームまでの余白を調整 */
}

.form-style {
    margin: 0 50px 50px; /* 上の余白をなくし、左右と下に余白を追加 */
    padding: 20px;
    border: 1px solid #ccc; /* 外枠の罫線 */
    background-color: #eaeaea; /* 背景色を少し濃くする */
}

.form-style li {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd; /* 各項目の罫線 */
    background-color: #fff; /* 背景色を白にする */
}

.form-style label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold; /* 項目名を太字にする */
}

.form-style input[type="text"],
.form-style input[type="file"],
.form-style select,
.form-style textarea {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    margin-bottom: 10px;
}

.image-preview {
    max-width: 200px;
    height: auto;
    margin-top: 5px;
}

/******************** 選択取消ボタン *********************/
.file-input-container {
    display: flex;
    align-items: center;
    gap: 10px; /* ボタンとファイル入力の間の間隔を調整 */
    position: relative; /* ボタンの位置調整のために相対位置を指定 */
}

.clear-button {
    background-color: #666; /* 濃いグレー */
    color: white; /* 文字色を白に */
    border: none;
    padding: 8px 10px; /* ボタンの大きさを調整 */
    cursor: pointer;
    position: relative;
    top: -1mm; /* ボタン全体を上に移動 */
    font-size: 0.9rem; /* 文字のサイズを調整 */
}

.clear-button:hover {
    background-color: #444; /* ライトダークグレー */
}