/* ── リセット ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #f0f2f5;
  --surface: #ffffff;
  --border:  #e0e4ea;
  --text:    #1a1f2e;
  --muted:   #6b7280;
  --accent:  #2563eb;
  --accent-h:#1d4ed8;
  --danger:  #dc2626;
  --success: #16a34a;
  --radius:  10px;
  --shadow:  0 1px 3px rgba(0,0,0,.07);
}

body {
  font-family: -apple-system,'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── ハンバーガーメニュー ── */
#hamburger-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 200;
}
#hamburger-overlay.open { display: block; }

#hamburger-menu {
  position: fixed;
  top: 0; right: -280px;
  width: 260px;
  height: 100vh;
  background: #fff;
  z-index: 201;
  box-shadow: -4px 0 20px rgba(0,0,0,.12);
  transition: right .25s ease;
  display: flex;
  flex-direction: column;
}
#hamburger-menu.open { right: 0; }

#hamburger-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

#hamburger-nav {
  padding: .75rem 0;
  display: flex;
  flex-direction: column;
}
#hamburger-nav a {
  padding: .75rem 1.25rem;
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s;
}
#hamburger-nav a:hover  { background: #f5f7fa; }
#hamburger-nav a.active { background: #eff6ff; color: var(--accent); }
.nav-divider { height: 1px; background: var(--border); margin: .5rem 0; }

/* ── 共通ツールバー ── */
.toolbar {
  position: sticky;
  top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.toolbar-main {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
}
.app-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  margin-right: .2rem;
}
.toolbar-spacer { flex: 1; }
.hamburger-btn {
  background: none; border: none;
  font-size: 1.3rem; cursor: pointer;
  padding: .3rem .4rem; border-radius: 6px;
  color: var(--muted); transition: background .12s;
}
.hamburger-btn:hover { background: var(--bg); }

/* ── 場所タブ ── */
.loc-tabs {
  display: flex;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  scrollbar-width: none;
}
.loc-tabs::-webkit-scrollbar { display: none; }
.loc-tab {
  flex-shrink: 0;
  padding: .45rem .9rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.loc-tab:hover { color: var(--accent); text-decoration: none; }
.loc-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

/* ── 検索パネル ── */
.search-panel {
  display: none;
  padding: .7rem .9rem .85rem;
  border-top: 1px solid #f0f2f5;
  background: #fafbfc;
}
.search-panel.open { display: block; }
.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.search-actions { display: flex; gap: .4rem; margin-top: .5rem; }

/* ── 使ったモードバー ── */
.use-bar {
  display: none;
  background: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
  padding: .5rem .9rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.use-bar.open { display: flex; }
.use-bar-label { font-size: .88rem; color: #15803d; font-weight: 600; }

/* ── グリッドエリア ── */
.grid-area { padding: .75rem .75rem 3rem; }
.items-count { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; padding: 0 .1rem; }

/* ── カードグリッド ── */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .5rem;
}
@media (min-width: 600px)  { .items-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); } }
@media (min-width: 1200px) { .items-grid { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); } }

/* ── 食材カード ── */
.item-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: .6rem .7rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  box-shadow: var(--shadow);
  border: 1.5px solid transparent;
  transition: box-shadow .12s, transform .1s;
}
.item-card:hover  { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.item-card:active { transform: scale(.98); }
.item-card--depleted { opacity: .5; }

/* 期限によるカード背景 */
.card-expiry-over  { background: #fee2e2 !important; border-color: #fca5a5 !important; }
.card-expiry-today { background: #fef2f2 !important; border-color: #fca5a5 !important; }
.card-expiry-week  { background: #fff0f3 !important; border-color: #fbcfe8 !important; }

.card-top  { display:flex; align-items:flex-start; gap:.3rem; }
.card-icon { font-size:1rem; line-height:1.2; flex-shrink:0; }
.card-name { font-weight:700; font-size:.88rem; line-height:1.3; word-break:break-all; }

.card-row  { display:flex; align-items:center; justify-content:space-between; gap:.25rem; }
.card-loc  { font-size:.72rem; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.card-extra { border-top:1px solid rgba(0,0,0,.06); padding-top:.25rem; display:flex; flex-direction:column; gap:.15rem; }
.extra-tag  { font-size:.7rem; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 選択オーバーレイ */
.item-check-mark {
  display:none; position:absolute; inset:0;
  background:rgba(22,163,74,.15);
  border:2px solid #16a34a;
  border-radius:var(--radius);
  align-items:center; justify-content:center;
  font-size:1.8rem; color:#16a34a; font-weight:700;
  pointer-events:none;
}
.item-card.selected .item-check-mark { display:flex; }
.item-card.selected { border-color:#16a34a !important; box-shadow:0 0 0 2px #16a34a !important; }
body.use-mode .item-card:not(.item-card--depleted):hover { background:#f0fdf4; }

/* フィルタードット */
.filter-dot {
  display:inline-block; width:7px; height:7px;
  background:#ef4444; border-radius:50%;
  margin-left:3px; vertical-align:middle;
}

/* ── 量バッジ ── */
.qty-badge {
  display:inline-block; padding:.1rem .45rem;
  border-radius:20px; font-size:.72rem; font-weight:600;
  white-space:nowrap; flex-shrink:0;
}
.qty-none   { background:#f1f5f9; color:#64748b; }
.qty-low    { background:#fef9c3; color:#854d0e; }
.qty-some   { background:#fef3c7; color:#92400e; }
.qty-normal { background:#dcfce7; color:#15803d; }
.qty-plenty { background:#dbeafe; color:#1e40af; }

/* 量→ボタン背景（一括登録用） */
.qty-bg-none   { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.qty-bg-low    { background:#fef9c3; color:#854d0e; border-color:#fde047; }
.qty-bg-some   { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.qty-bg-normal { background:#dcfce7; color:#15803d; border-color:#86efac; }
.qty-bg-plenty { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }

/* ── フォーム ── */
.page-wrap  { max-width:860px; margin:0 auto; padding:1.25rem 1rem 3rem; }
.page-heading { font-size:1.2rem; font-weight:700; margin-bottom:.75rem; }
.back-link  { color:var(--muted); font-size:.85rem; display:inline-flex; align-items:center; gap:.3rem; margin-bottom:.75rem; }
.back-link:hover { color:var(--accent); }
.card       { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-body  { padding:1.25rem; }
.form-group { margin-bottom:1rem; }
label       { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem; }
input[type=text], input[type=date], select, textarea {
  width:100%; padding:.55rem .75rem;
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:.95rem; font-family:inherit; color:var(--text);
  background:#fff; appearance:none;
  transition:border-color .15s;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
textarea { resize:vertical; min-height:80px; }
.form-row { display:flex; gap:1rem; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:160px; }

/* ── ボタン ── */
.btn {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.45rem .85rem; border-radius:var(--radius);
  font-size:.85rem; font-family:inherit; font-weight:500;
  cursor:pointer; border:none; text-decoration:none;
  transition:background .15s, opacity .15s;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-h); color:#fff; }
.btn-danger  { background:var(--danger);  color:#fff; }
.btn-danger:hover { opacity:.85; color:#fff; }
.btn-ghost   { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg); }
.btn-use     { background:#ecfdf5; color:#16a34a; border:1px solid #bbf7d0; }
.btn-use:hover { background:#d1fae5; }
.btn-sm  { padding:.3rem .6rem; font-size:.8rem; }
.btn-icon{ padding:.4rem .55rem; font-size:.95rem; }
.text-danger { color:var(--danger); }
.flex-between { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* ── テーブル ── */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { padding:.65rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
th { background:var(--bg); font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#fafbfc; }

/* ── フラッシュ ── */
.flash { padding:.7rem 1rem; border-radius:var(--radius); margin:.5rem .75rem; font-size:.88rem; }
.flash.success { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.flash.error   { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }

/* ── 空状態 ── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty-state .icon { font-size:3rem; margin-bottom:.5rem; }

/* ── 一括登録 ── */
.settings-bar {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:.85rem 1rem;
  margin-bottom:1.25rem; display:flex; gap:.85rem; flex-wrap:wrap; align-items:flex-end;
}
.section-label { font-size:.8rem; font-weight:700; color:var(--muted); margin-bottom:.45rem; display:flex; align-items:center; gap:.35rem; }
.preset-grid { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.1rem; }
.preset-btn {
  padding:.38rem .85rem; border-radius:20px; border:1.5px solid var(--border);
  background:#fff; font-size:.88rem; font-family:inherit; cursor:pointer;
  transition:filter .12s, transform .1s; user-select:none; font-weight:500;
}
.preset-btn:hover  { filter:brightness(.94); }
.preset-btn:active { transform:scale(.95); }
.preset-btn.unregistered { background:#fff; color:var(--text); border-color:var(--border); }
.preset-btn.unregistered:hover { background:#eff6ff; border-color:#93c5fd; }
.preset-delete-btn {
  padding:.3rem .7rem; border-radius:16px; border:1px solid #fecaca;
  background:#fee2e2; color:#b91c1c; font-size:.82rem; font-family:inherit; cursor:pointer;
}
.preset-delete-btn:hover { background:#fecaca; }
.extra-section { margin-top:1.75rem; padding-top:1.25rem; border-top:2px dashed var(--border); }
.extra-section-title { font-size:.95rem; font-weight:700; margin-bottom:.75rem; }