/* ログイン画面用 */
/* ログインページ専用（中央寄せを強固に） */
body.login {
  font-family: 'Noto Sans JP', sans-serif;
  background: linear-gradient(135deg, #f0f4f8, #d9e4ec);
  display: grid;           /* ← Gridにする */
  place-items: center;     /* ← 完全中央寄せ */
  min-height: 100vh;       /* ← 高さを確実に確保 */
  margin: 0;
}

/* それ以外のページのデフォルト（明示的に戻すなら） */
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #f5f7fa;      /* 好みで */
  display: block;
  height: auto;
  margin: 0;
}

.login-container {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    width: 300px;
    text-align: center;
}

h2 {
    margin-bottom: 30px;
    color: #333;
     text-align: center;
     font-size: 30px;



}

label {
    display: block;
    margin: 10px 0 5px;
    text-align: left;
    color: #555;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
    box-sizing: border-box; /* フォームの幅内に納める */


}

button {
    width: 100%;
    padding: 12px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #357ab8;
}

/* 入力フォームの下に余白をつける  */
/*input[type="password"] {*/
/*   margin-bottom: 50px;  /* パスワード欄の下に20pxの余白 */
/*}/*

/* ログイン画面専用ボタン */
.login-btn {
    display: block;        /* ブロック要素にして */
    margin: 20px auto 0;   /* 上に余白をつけて中央寄せ */
    width: 150px;          /* ボタン幅を固定（任意） */
    padding: 12px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.login-btn:hover {
    background: #357ab8;
}

/* TOP画面用 -----------------------------------------------------------------------------*/
.top-container {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    width: 600px;
    margin: 50px auto;
    text-align: center;
}

.top-container h2 {
    margin-bottom: 30px;
    color: #333;
    font-size: 30px;
}

.welcome {
    margin-bottom: 50px;
    font-size: 16px;
    color: #555;
}

.menu {
    margin: 20px 0;
}

.menu a {
    display: inline-block;
    margin: 8px 12px;
    padding: 10px 15px;
    background: #4a90e2;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.menu a:hover {
    background: #357ab8;
}

/* ログアウトボタン専用スタイル */
.menu a.logout {
    background: #E6E6FA;   
    color: #333;           
}

.menu a.logout:hover {
    text-decoration: underline;        
}

.info {
    margin-top: 20px;
    color: #777;
}

.top-container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    width: 600px;
    margin: 50px auto;
    text-align: center;
    position: relative;   /*  相対配置にする */
}

.logout {
    position: absolute;   /*  top-container の中で絶対配置 */
    top: 20px;            /* 上から20px */
    right: 20px;          /* 右から20px */
    color: #4a90e2;
    text-decoration: none;
    font-weight: bold;
}

.logout:hover {
    text-decoration: underline;
}


/* 商品一覧用画面用-----------------------------------------------------------------------------*/
/* 通常 */
.list-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  width: 90%;
  max-width: 1000px;
  margin: 20px auto;
  position: relative;   /* ← ここを relative に変更 */
}


/* 画面が小さいときは上部に吸着 */
@media (max-width: 768px) {
  .list-container {
    position: sticky;
    top: 0;          /* 上部で止まる位置 */
    z-index: 100;    /* ほかの要素より前面に */
  }
}


/* テーブルデザイン */
.styled-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

.styled-table th, .styled-table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

.styled-table th {
    background-color: #f0f4f8;
    color: #333;
}

.styled-table tr:nth-child(even) {
    background-color: #fafafa;
}

.styled-table tr:hover {
    background-color: #f1f7ff;
}

/* ヘッダーは中央揃え */
.styled-table th {
    background-color: #f0f4f8;
    color: #333;
    text-align: center;
}

/* 数値用セルだけ右揃え */
.styled-table td.num {
    text-align: right;
}

/* ボタンを中央揃え */
.styled-table td.actions {
    text-align: center;
}
.actions a {
    margin: 0 5px; /* 左右に余白を追加 */
}

/* ボタン風リンク */
.btn {
    display: inline-block;
    padding: 8px 14px;
    background: #4a90e2;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    margin-right: 10px;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #357ab8;
}

/* 編集ボタン */
.btn-edit {
    background: #6ab04c;
    color: #fff;
    padding: 3px 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-edit:hover {
    background: #4e8c34;
}

/* 削除ボタン */
.btn-delete {
    background: #e94e4e;
    color: #fff;
    padding: 3px 6px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
}

/* 商品コード列 */
.styled-table th:nth-child(1),
.styled-table td:nth-child(1) {
    min-width: 100px;   /* 商品コードは最低100px確保 */
}


/* 商品名列 */
.styled-table th:nth-child(2),
.styled-table td:nth-child(2) {
    min-width: 100px;   /* 商品名は最低100px確保 */
}


/* 備考列 */
.styled-table th:nth-child(5),
.styled-table td:nth-child(5) {
    min-width: 200px;   /* 備考は最低200px確保 */
}

/* 最終操作者列 */
.styled-table th:nth-child(6),
.styled-table td:nth-child(6) {
    min-width: 100px;   /* 最終操作者は最低60120px確保 */
}
/* 価格、在庫数の操作列の幅を固定して折り返し防止 */
.styled-table td.num {
    white-space: nowrap;   /* 折り返し禁止 */
    width: 80px;          /* 最低幅を確保（調整可） */
}

/* 削除ボタン、編集ボタンの操作列の幅を固定して折り返し防止 */
.styled-table td.actions,
.styled-table th:last-child {
    white-space: nowrap;   /* 折り返し禁止 */
    width: 120px;          /* 最低幅を確保（調整可） */
    text-align: center;
}



.btn-delete:hover {
    background: #c0392b;
}

/* 戻るリンク */
.back-link {
  position: absolute;   /* ← 枠の中で絶対配置 */
  top: 20px;            /* 枠の上から20px */
  right: 20px;          /* 枠の右から20px */
  color: #4a90e2;
  font-weight: bold;
  text-decoration: none;
}
.back-link:hover {
  text-decoration: underline;
}


/* 商品登録フォーム用 -----------------------------------------------------------------------------*/

.form-container {
    position: fixed;        /* 画面に固定される */
    top: 50%;               /* 画面の縦方向中央 */
    left: 50%;              /* 画面の横方向中央 */
    transform: translate(-50%, -50%); /* 中央にぴったり配置 */
    width: 500px;           /* 横幅固定 */
    max-height: 80vh;       /* 画面の高さの80%まで */
    overflow-y: auto;   /* ← ここを追加 */
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-container h2 {
    margin-bottom: 20px;
    color: #333;
    text-align: center;
    font-size: 26px;
}

/* 戻るリンクを右上に配置 */
.form-container .back-link {
    position: absolute;
    top: 30px;
    right: 20px;
    color: #4a90e2;
    text-decoration: none;
    font-weight: bold;
}
.form-container .back-link:hover {
    text-decoration: underline;
}


/* メッセージ表示 */
.message {
    margin: 10px 0;
    font-weight: bold;
    text-align: center;
}
.message.success {
    color: green;
}
.message.error {
    color: red;
}

/* 入力フォーム */
/* フォーム全体は中央に */
.center-form {
  display: flex;
  justify-content: center;   /* 横方向に中央 */
}

/* 中身のラッパー：幅を決めて左端をそろえる */
.form-inner {
  width: 360px;              /* 好みで 320–420px などに調整 */
}

/* ラベルは左寄せ、左端にそろえる */
.form-inner label {
  display: block;
  margin: 10px 0 5px;
  color: #555;
  font-weight: bold;
  text-align: left;
}


/* 登録ボタン */
.btn-submit {
    display: block;       /* ブロック要素にする */
    margin: 30px auto 0;       /* 左右の余白を自動にして中央寄せ */
    width: 250px;         /* 固定幅にすると安定 */
    padding: 12px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;

}

.btn-submit:hover {
    background: #357ab8;
}

/* 例：～　の表示 */
.example {
    color: #777;   /* グレー表示 */
    font-size: 0.9em; /* 少し小さめにして補足感を出す */
}

/* 削除ページ用 -----------------------------------------------------------------------------*/
.warning {
    color: #b22222; /* 赤系で警告 */
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.delete-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.delete-list li {
    margin: 8px 0;
    color: #555;
}

/* 削除確認ボタン */
.btn-delete-confirm {
    width: 100%;
    padding: 12px;
    background: #e94e4e; /* 赤系 */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-delete-confirm:hover {
    background: #c0392b;
}

/* 入庫フォーム用セレクトボックス  -----------------------------------------------------------------------------*/
/* 入力欄・テキストエリア・セレクトを共通スタイルに */
.form-inner input,
.form-inner textarea,
.form-inner select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
  background-color: #fff; /* select用に背景色を指定 */
  box-sizing: border-box; /* ← 幅計算を統一 */
}

/* 数量欄の→削除 */
.form-inner select {
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* 標準 */
  background: none;         /* ← 背景を消す */
}
/* 数量欄の→削除 */
.form-inner select::-ms-expand {
  display: none; /* ← IE/Edge用 */
}
/* 入庫フォーム専用：幅を完全に揃える */
.stock-input,
.stock-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
  box-sizing: border-box; /* 幅計算を統一 */
}

/* ヘッダーを貼り付け */
.list-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 12px 0;
  z-index: 10;                 /* テーブルより前面 */
  border-bottom: 1px solid #eee;
}

.list-header h2 { margin: 0; }



/* ユーザーの管理画面用  -----------------------------------------------------------------------------*/
/* パスワード再設定ボタン（黄色） */
.btn-reset {
    display: inline-block;
    padding: 3px 6px;
    background: #f1c40f; /* 黄色 */
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    margin-right: 10px;
    transition: background 0.3s ease;
}
.btn-reset:hover {
    background: #d4ac0d; /* 濃い黄色 */
}

/* 対象ユーザーの表示 */
.target-user {
    text-align: center;   /* 中央揃え */
    font-weight: bold;    /* 太字 */
    margin: 20px 0;       /* 上下に余白 */
    font-size: 1.1em;     /* 少し大きめにして強調 */
    box-sizing: border-box; /* フォームの幅内に納める */

}