/*
 * =========================================
 * CSSカスタムプロパティ (デザイン定義)
 * =========================================
 */
:root{
  color-scheme: light; /* ★ダークモード強制無効化★ */

  --gap-xs: 6px;
  --gap-s: 10px;
  --gap-m: 16px;
  --gap-l: 24px;
  --gap-xl: 32px;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --c-bg: #f7f8fa;
  --c-card: #ffffff;
  --c-border: #e5e7eb;
  --c-text: #111827;
  --c-sub: #6b7280;
  --c-primary: #2563eb;
  --c-primary-weak: #dbeafe;
  --c-danger: #dc2626;
  --c-danger-weak: #fee2e2;
  --c-success: #16a34a;
  --c-success-weak: #dcfce7;
}

/*
 * =========================================
 * 基本設定 (リセットと全体)
 * =========================================
 */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

img { max-width: 100%; height: auto; display: block; }

body {
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/*
 * =========================================
 * レイアウト (ヘッダー, メイン)
 * =========================================
 */
header{
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 var(--gap-l);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-m);
}

header > h1{
  margin: 0;
  padding: var(--gap-m) 0;
  font-size: 20px;
  letter-spacing: .03em;
}

header nav{
  padding: var(--gap-m) 0;
  display: flex;
  gap: var(--gap-m);
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto; /* ナビを右に寄せる */
}

header nav span{
  color: var(--c-sub);
  font-size: 14px;
}

header nav a{
  text-decoration: none;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  padding: 6px 12px;
  border-radius: var(--radius-s);
  background: #fff;
  transition: .2s;
  font-size: 14px;
}
header nav a:hover{
  background: var(--c-primary-weak);
}

main{
  /* max-width: 1400px; */ /* 幅いっぱいにするため解除 */
  margin: 2rem 1rem;
  padding: 1rem 2rem;
  background-color: var(--c-card);
  border-radius: var(--radius-s);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/*
 * =========================================
 * ログイン / 登録フォーム
 * =========================================
 */
.login-container,
.register-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: var(--gap-xl);
    background-color: var(--c-card);
    border-radius: var(--radius-l);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.login-container h2,
.register-container h2 {
    text-align: center;
    margin-top: 0;
    font-size: 1.6rem;
}

.login-container div,
.register-container div {
    margin-bottom: 1.25rem;
}

.login-container label,
.register-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.login-container input[type="text"],
.login-container input[type="password"],
.register-container input[type="text"],
.register-container input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    font-size: 1rem;
    background-color: #fff;
}

/*
 * =========================================
 * アイテム登録/編集フォーム
 * =========================================
 */
.item-form {
    max-width: 800px;
    margin: 0 auto;
}
.item-form .form-group {
    margin-bottom: 1.25rem;
}
.item-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.item-form input[type="text"],
.item-form input[type="date"],
.item-form input[type="number"],
.item-form input[type="file"],
.item-form input[type="password"],
.item-form textarea,
.item-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    font-size: 1rem;
    background-color: #fff;
}
.item-form textarea {
    min-height: 80px;
    resize: vertical;
}

/*
 * =========================================
 * フィルターフォーム (index.php)
 * =========================================
 */
.filter-form{
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--gap-l);
  margin-bottom: var(--gap-xl);
}

.filter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-m);
}

.filter-group label{
  display: block;
  font-size: 12px;
  color: var(--c-sub);
  margin-bottom: 6px;
}

.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group input[type="number"],
.filter-group select{
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  background: #fff;
  height: 38px; /* 高さを統一 */
}

.filter-actions{
  display: flex;
  gap: var(--gap-m);
  justify-content: flex-end;
  margin-top: var(--gap-m);
  flex-wrap: wrap;
}

/*
 * =========================================
 * ボタン (新CSSベース)
 * =========================================
 */
.button-primary,
.button-secondary,
.button-danger,
button[type="submit"]{
  display: inline-block;
  border-radius: var(--radius-s);
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}

.button-primary,
button[type="submit"]{
  background: var(--c-primary);
  color: #fff;
}
.button-primary:hover,
button[type="submit"]:hover{ 
  filter: brightness(0.95); 
  text-decoration: none; 
  color: #fff; /* ★ホバー時も白★ */
}

.button-secondary{
  background: #fff;
  color: var(--c-text);
  border-color: var(--c-border);
}
.button-secondary:hover{ background: #f9fafb; text-decoration: none; }

.button-danger{
  background: #fff;
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}
.button-danger:hover{
  background: var(--c-danger-weak);
  text-decoration: none;
}

/* フォームのボタン（登録/更新） */
.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

/* 表示切替（リスト/カード） */
.view-switcher{
  display: inline-flex;
  gap: 6px;
  width: 100%;
}
.view-switcher .view-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--c-text);
  background: #fff;
  font-size: 14px;
  height: 38px;
}
.view-switcher .view-btn.active{
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-weak);
}
.view-switcher .view-btn:not(.active):hover{
  background: #f4f4f4;
  text-decoration: none;
}

/* 追加ボタン行 */
.controls{
  margin-bottom: var(--gap-l);
}

/*
 * =========================================
 * テーブル（共通）
 * =========================================
 */
.table-container{
  width: 100%;
}
.table-container table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/*
 * =========================================
 * (A) カードビュー (body.view-grid)
 * =========================================
 */
body.view-grid .table-container table thead{
  display: none; /* カードではヘッダー非表示 */
}

body.view-grid .table-container table tbody{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* ★最小幅260px★ */
  gap: var(--gap-l);
  width: 100%;
}

body.view-grid .table-container table tbody tr{
  display: grid;
  grid-template-rows: auto 1fr auto; /* サムネ/本文/操作 */
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .2s, transform .06s;
}
body.view-grid .table-container table tbody tr:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* 各セルはブロックにしてカード内で縦積み */
body.view-grid .table-container table tbody td{
  display: block;
  padding: 10px 12px;
  border: none;
  word-break: break-all;
}

/* 1列目（サムネ） */
body.view-grid .table-container table tbody td:first-child{
  padding: 0;
}
.thumbnail{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.no-image{
  display: grid;
  place-items: center;
  height: 180px;
  background: #f3f4f6;
  color: var(--c-sub);
  font-size: 13px;
}

/* 本文部 */
body.view-grid td[data-label="アイテム名"]{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
}
body.view-grid td[data-label="個数"]{
  font-weight: 700;
  font-size: 14px;
}
body.view-grid td[data-label="種別"],
body.view-grid td[data-label="入手日"],
body.view-grid td[data-label="入手イベント"],
body.view-grid td[data-label="イベント期間"],
body.view-grid td[data-label="保存場所"],
body.view-grid td[data-label="入手場所"],
body.view-grid td[data-label="入手住所"]{
  color: var(--c-sub);
  font-size: 13px;
  padding-top: 4px;
}
body.view-grid td[data-label="備考"]{
  font-size: 13px;
  padding-top: 8px;
}

/* 操作ボタンはカード下部 */
.actions-cell{
  display: flex;
  gap: 8px;
}
body.view-grid td[data-label="操作"] {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--c-border);
  background: #f9fafb;
}
.actions-cell a {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0.5rem;
}

/* カード内リンクの見栄え */
body.view-grid a{
  color: var(--c-primary);
  text-decoration: none;
}
body.view-grid a:hover{ text-decoration: underline; }

/* ★★★ バグ修正 ★★★ */
/* カード表示の時、.button-primary の文字色を強制的に白(#fff)にする */
body.view-grid a.button-primary,
body.view-grid button.button-primary {
    color: #fff;
    text-decoration: none;
}
/* ★★★ バグ修正ここまで ★★★ */


/* カード内のdata-labelはすべて非表示 */
body.view-grid td[data-label]::before {
  display: none;
}

/*
 * =========================================
 * (B) リストビュー (body.view-list)
 * =========================================
 */
body.view-list .table-container {
    overflow-x: auto;
}
body.view-list table {
    table-layout: fixed;
    border: 1px solid var(--c-border);
}
body.view-list table thead {
    display: table-header-group;
}
body.view-list table tbody {
    display: table-row-group;
}
body.view-list table tr {
    display: table-row;
}
body.view-list table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}
body.view-list table tbody tr:hover {
    background-color: #f3f4f6;
}
body.view-list table th,
body.view-list table td {
    display: table-cell;
    width: auto;
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-border);
    text-align: left;
    vertical-align: top;
    word-break: break-all;
    position: static;
    white-space: normal;
}
body.view-list table th {
    background-color: #f9fafb;
    font-weight: bold;
    white-space: nowrap;
}
/* リスト表示の列幅 */
body.view-list table th:nth-child(1), body.view-list table td:nth-child(1) { width: 160px; }
body.view-list table th:nth-child(10),body.view-list table td:nth-child(10) { width: 70px; text-align: right; }
body.view-list table th:nth-child(11),body.view-list table td:nth-child(11) { width: 20%; }
body.view-list table th:nth-child(12),body.view-list table td:nth-child(12) { width: 100px; }

body.view-list table td[data-label]::before {
    display: none;
}
body.view-list table td:first-child {
    padding: 0.75rem 1rem;
}
body.view-list .thumbnail {
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: 1px solid var(--c-border);
}
body.view-list .no-image {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-s);
}
body.view-list .actions-cell {
    flex-direction: column;
    min-width: 80px;
}
body.view-list table td[data-label="操作"] {
    background-color: transparent;
    border-radius: 0;
}

/*
 * =========================================
 * ページネーション
 * =========================================
 */
.pagination {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    margin: 0 2px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    color: var(--c-primary);
    text-decoration: none;
    background: #fff;
}
.pagination a:hover {
    background-color: #f4f4f4;
    text-decoration: none;
}
.pagination span.current {
    background-color: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    font-weight: bold;
}
.pagination span.disabled {
    color: var(--c-sub);
    border-color: #eee;
    background: #f9fafb;
}
.pagination-summary {
    text-align: center;
    color: var(--c-sub);
    font-size: 14px;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

/*
 * =========================================
 * メッセージ
 * =========================================
 */
.error-message {
    color: var(--c-danger);
    background-color: var(--c-danger-weak);
    border: 1px solid var(--c-danger);
    padding: 1rem;
    border-radius: var(--radius-s);
    margin-bottom: 1rem;
}
.success-message {
    color: var(--c-success);
    background-color: var(--c-success-weak);
    border: 1px solid var(--c-success);
    padding: 1rem;
    border-radius: var(--radius-s);
    margin-bottom: 1rem;
}

/*
 * =========================================
 * レスポンシブ (スマホ対応)
 * =========================================
 */
@media (max-width: 768px){
  
  header { padding: var(--gap-s) var(--gap-m); }
  header > h1{ font-size: 18px; }
  header nav{ gap: 8px; }
  
  main {
      margin: 0;
      padding: var(--gap-m);
      border-radius: 0;
  }
  
  .login-container,
  .register-container {
      margin: 1rem;
      padding: 1.5rem;
  }

  .form-actions {
      flex-direction: column;
  }
  
  .button-primary,
  .button-secondary,
  .button-danger,
  button[type="submit"] {
      width: 100%; /* ボタンを全幅に */
  }

  .filter-grid{
    grid-template-columns: 1fr;
  }

  /* ---------------------------------
   * ★★★ スマホでは「1列カード」に強制統一 ★★★
   * ---------------------------------
   */
  
  /* (A) リスト表示をカード化 */
  body.view-list .table-container {
      overflow-x: visible;
  }
  body.view-list table thead {
      display: none;
  }
  body.view-list table tbody {
      display: grid; /* ★グリッド(1列)に変更★ */
      grid-template-columns: 1fr;
      gap: var(--gap-l);
  }
  body.view-list table tbody tr {
      display: grid; /* 新CSSのカード定義を流用 */
      grid-template-rows: auto 1fr auto;
      width: 100%;
      margin-bottom: 0;
      border: 1px solid var(--c-border);
      border-radius: var(--radius-l);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      background-color: var(--c-card);
      overflow: hidden;
  }
  body.view-list table tbody tr:nth-child(even) {
      background-color: var(--c-card);
  }
  body.view-list table td {
      display: block;
      width: 100%;
      text-align: left; /* カードなので左寄せに戻す */
      padding: 10px 12px;
      position: static; /* data-labelを使わない */
      border: none;
      word-break: break-all;
  }
  body.view-list table tr td:last-child {
      border-bottom: none;
  }
  body.view-list table td[data-label]::before {
      display: none; /* スマホでもdata-labelは使わない */
  }
  body.view-list table td:first-child {
      padding: 0;
  }
  body.view-list table td:first-child .thumbnail,
  body.view-list table td:first-child .no-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 8px 8px 0 0;
      border-bottom: 1px solid var(--c-border);
  }
  body.view-list .actions-cell {
      flex-direction: row;
      gap: 1rem;
      padding: 10px 12px 12px;
      border-top: 1px solid var(--c-border);
  }
  body.view-list .actions-cell a {
      flex: 1;
      text-align: center;
      padding: 0.75rem 0.5rem;
  }
  body.view-list table td[data-label="操作"] {
      padding: 0;
      background-color: #f9fafb;
      border-radius: 0 0 8px 8px;
  }
  body.view-list td[data-label="アイテム名"]{
    font-weight: 700;
    font-size: 15px;
  }
  body.view-list td[data-label="個数"]{
    font-weight: 700;
    font-size: 14px;
  }
  body.view-list td[data-label="種別"],
  body.view-list td[data-label="入手日"],
  body.view-list td[data-label="入手イベント"],
  body.view-list td[data-label="イベント期間"],
  body.view-list td[data-label="保存場所"],
  body.view-list td[data-label="入手場所"],
  body.view-list td[data-label="入手住所"]{
    color: var(--c-sub);
    font-size: 13px;
    padding-top: 4px;
  }
  body.view-list td[data-label="備考"]{
    font-size: 13px;
    padding-top: 8px;
  }


  /* (B) グリッド表示を1列カードに */
  body.view-grid table tbody {
      grid-template-columns: 1fr;
      gap: 1.5rem;
  }
  
  /* ---------------------------------
   * ★★★ ユーザー管理テーブル(user_list.php)用
   * ---------------------------------
   */
  /* user_list.php のテーブルはPC同様、横スクロールさせる */
  main:has(> h2:contains("ユーザー一覧")) .table-container {
      overflow-x: auto;
  }
  main:has(> h2:contains("ユーザー一覧")) table {
    table-layout: auto;
  }
  main:has(> h2:contains("ユーザー一覧")) table tbody {
      display: table-row-group;
  }
  main:has(> h2:contains("ユーザー一覧")) table tbody tr {
      display: table-row;
      border: none;
      box-shadow: none;
      background-color: transparent;
  }
  main:has(> h2:contains("ユーザー一覧")) table tbody tr:nth-child(even) {
      background-color: #fdfdfd;
  }
  main:has(> h2:contains("ユーザー一覧")) table td {
      display: table-cell;
      width: auto;
      text-align: left;
      padding: 0.75rem 1rem;
      position: static;
      border: 1px solid var(--c-border);
      word-break: break-all;
  }
  main:has(> h2:contains("ユーザー一覧")) table td[data-label]::before {
      display: none;
  }
  main:has(> h2:contains("ユーザー一覧")) table td:first-child {
      padding: 0.75rem 1rem;
  }
}