/* ============================================================
   style.css - 串管理システム
   ============================================================
   INDEX
   1.  CSS変数・リセット
   2.  レイアウト基盤（body・header・tabs・content）
   3.  共通ボタン
   4.  共通フォーム要素
   5.  共通モーダル
   6.  トースト通知
   7.  テンキー（global-keypad）
   8.  仕込みタブ
   9.  解凍タブ
   10. 在庫タブ
   11. 履歴タブ（日次）
   12. 履歴タブ（月次）
   13. 設定モーダル
   14. 店舗切り替えメニュー
   15. 閲覧モード
   16. アラートバナー・バッジ
   17. アニメーション定義
   ============================================================ */


/* ============================================================
   1. CSS変数・リセット
   ============================================================ */
:root {
  --bg-base:        #1a0a00;
  --bg-card:        #2a1500;
  --bg-card-deep:   #1e0e02;
  --border:         #3a2010;
  --border-mid:     #4a2800;
  --gold:           #e8c97a;
  --gold-mid:       #c4a060;
  --gold-dark:      #c4771a;
  --gold-light:     #e8a030;
  --muted:          #7a5c3a;
  --red:            #e05a3a;
  --blue:           #1a6ab4;
  --blue-light:     #2a8ad4;
  --grad-gold:      linear-gradient(135deg, #c4771a, #e8a030);
  --grad-blue:      linear-gradient(135deg, #1a6ab4, #2a8ad4);
  --grad-header:    linear-gradient(135deg, #2a1200, #3a1800);
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --transition:     0.15s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-base);
  font-family: 'Noto Serif JP', serif;
  color: var(--gold);
  min-height: 100vh;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--bg-base) inset !important;
  -webkit-text-fill-color: var(--gold) !important;
}

.hidden { display: none; }


/* ============================================================
   2. レイアウト基盤
   ============================================================ */
.header {
  background: var(--grad-header);
  border-bottom: 1px solid var(--border-mid);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left {
  display: flex;
  flex-direction: column;
}

.logo-text {
  user-select: none;
  -webkit-user-select: none;
}

.tabs {
  display: flex;
  margin: 20px 16px 0;
  gap: 8px;
}

.tab {
  flex: 1;
  padding: 12px 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--muted);
  font-size: 11px;
  font-family: 'Noto Serif JP', serif;
  transition: background var(--transition), color var(--transition);
}

.tab.active {
  background: var(--grad-gold);
  color: var(--bg-base);
  font-weight: 700;
}

.content {
  padding: 20px 16px;
}

/* スマホ：タブをフッターに固定 */
@media (max-width: 600px) {
  .tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 8px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-mid);
    z-index: 1000;
    gap: 6px;
  }

  .content {
    padding-bottom: 80px;
  }
}


/* ============================================================
   3. 共通ボタン
   ============================================================ */

/* 保存ボタン（全幅・主要アクション） */
.btn-save {
  width: 100%;
  padding: 18px;
  margin-top: 8px;
  margin-bottom: 200px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 2px;
  font-family: 'Noto Serif JP', serif;
  position: static;
}

.btn-green,
.btn-green-glow {
  background: var(--grad-gold);
  color: var(--bg-base);
  box-shadow: 0 4px 20px rgba(196, 119, 26, 0.4);
}

.btn-blue,
.btn-blue-sub {
  background: var(--grad-blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26, 106, 180, 0.4);
}

/* 設定画面内の保存ボタンは余白リセット */
.setting-save-btn {
  margin-bottom: 0;
  margin-top: 0;
}

.btn-margin-top {
  margin-top: 12px;
}

/* 処理中 */
.btn-save.processing {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 小ボタン共通 */
.btn-del,
.btn-refresh {
  background: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
}

.btn-del    { border: 1px solid var(--gold-dark); color: var(--gold-dark); }
.btn-refresh { border: 1px solid var(--border-mid); color: var(--muted); }

/* ログアウト */
.btn-logout {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--gold-dark);
  border-radius: 10px;
  color: var(--gold-dark);
  font-size: 14px;
  font-family: 'Noto Serif JP', serif;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

/* 設定歯車ボタン */
.setting-btn {
  background: var(--bg-card);
  border: 1px solid var(--gold-mid);
  border-radius: var(--radius-sm);
  color: var(--gold);
  padding: 8px 14px;
  font-size: 18px;
  cursor: pointer;
}

/* スピナー */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(232, 201, 122, 0.3);
  border-top: 2px solid var(--gold);
  border-radius: 50%;
  margin-right: 8px;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* タブレット横画面：保存ボタン中央寄せ */
@media (min-width: 601px) and (orientation: landscape) {
  .btn-save,
  #save-kaito-btn {
    max-width: 400px;
    margin: 20px auto 150px;
    display: block;
  }
}

/* スマホ：保存ボタン余白縮小 */
@media (max-width: 600px) {
  .btn-save,
  #save-kaito-btn {
    margin-bottom: 20px;
  }
}


/* ============================================================
   4. 共通フォーム要素
   ============================================================ */
select,
input[type="date"],
input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--gold);
  font-size: 16px;
  outline: none;
  appearance: none;
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 12px;
}

/* セクション共通レイアウト */
.section-title  { color: var(--gold-mid); font-size: 13px; margin-bottom: 20px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-header.compact { margin-bottom: 16px; }
.header-actions { display: flex; gap: 8px; }
.hidden-panel   { display: none; }
.load-more-wrap { display: none; text-align: center; margin-top: 16px; }

/* メッセージ */
.msg { padding: 10px; border-radius: var(--radius-sm); margin-bottom: 12px; text-align: center; font-size: 13px; }
.msg.ok  { background: #002a10; color: #4ac47a; }
.msg.err { background: #2a0a00; color: var(--red); }


/* ============================================================
   5. 共通モーダル
   ============================================================ */

/* オーバーレイ共通 */
#custom-kushi-modal,
#custom-name-modal,
#kaito-generic-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* モーダル小窓共通 */
#custom-kushi-modal > div,
#custom-name-modal > div,
#kaito-generic-modal > div {
  position: relative;
  width: 85%;
  max-width: 380px;
  background-color: var(--bg-base);
  border: 2px solid var(--gold-mid);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  animation: modalPop 0.2s ease-out;
}

/* モーダル内ボタン共通 */
.modal-btn {
  width: 100%;
  height: 54px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 1.1rem;
  font-family: 'Noto Serif JP', serif;
  cursor: pointer;
}

/* モーダル内：選択・入力ボタン（三モーダル共通） */
#custom-kushi-modal button:not(.modal-cancel-btn),
#custom-name-modal  button:not(.modal-cancel-btn),
#kaito-generic-modal button:not(.modal-cancel-btn) {
  margin-bottom: 8px;
  height: 54px;
  font-size: 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--gold);
  border-radius: var(--radius-sm);
}

.modal-cancel-btn {
  width: 100%;
  height: 48px;
  margin-top: 12px;
  background: none;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-sm);
  color: var(--gold-dark);
  font-size: 1rem;
  font-family: 'Noto Serif JP', serif;
  cursor: pointer;
}

.modal-content-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   6. トースト通知
   ============================================================ */
#custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--bg-base);
  color: var(--gold);
  border: 1px solid var(--gold-mid);
  border-radius: var(--radius-sm);
  padding: 30px 20px;
  width: 260px;
  text-align: center;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  z-index: 210000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

#custom-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#custom-toast.error {
  top: 80px;
  transform: translateX(-50%) scale(0.9);
  background: #2a0800;
  color: var(--red);
  border-color: var(--red);
  padding: 14px 20px;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#custom-toast.error.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


/* ============================================================
   7. テンキー（global-keypad）
   ============================================================ */

/* 本数入力枠 */
.honsu-display {
  min-height: 40px;
  padding: 10px;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 18px;
  background: var(--bg-base);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.honsu-display.active {
  background: var(--gold-dark);
  color: var(--bg-base);
  box-shadow: 0 0 15px rgba(196, 119, 26, 0.4);
}

/* テンキー本体 */
/* left / width はJS(setKeypadCenter / keypadConfig)で管理。CSSは非表示・表示切替のみ担当 */
#global-keypad {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 0;          /* JS起動前の仮置き。setupKeypadCustomizer()で上書きされる */
  width: 360px;     /* JS起動前の仮置き。同上 */
  background: var(--bg-card);
  padding: 15px;
  box-sizing: border-box;
  border: 2px solid var(--gold-mid);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  z-index: 100000;
  touch-action: manipulation;
  transition: opacity 0.2s ease;
}

#global-keypad.show {
  display: block;
  animation: keypadSlideUp 0.3s ease-out;
}

#global-keypad.customizing {
  outline: 2px dashed var(--gold-mid);
  outline-offset: 4px;
}

/* キーパッドグリッド */
.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.keypad-btn {
  background: #d48f3e;
  color: var(--bg-base);
  border: 1px solid var(--gold-mid);
  border-radius: 10px;
  height: 60px;
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  z-index: 100001;
  pointer-events: auto;
}

.keypad-btn:active {
  background: var(--gold-light);
  transform: scale(0.96);
}

/* 確定ボタン */
#keypad-close {
  grid-column: span 3;
  width: 100%;
  height: 65px;
  margin-top: 15px;
  background: #d48f3e;
  border: 1px solid var(--gold-mid);
  border-radius: 10px;
  color: var(--bg-base);
  font-size: 24px;
  font-weight: bold;
}

/* リサイズハンドル（JSで動的生成・show付与） */
.resize-handle {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.resize-handle.show {
  opacity: 1;
  pointer-events: auto;
}

.handle-tl { top: 0;    left: 0;  border-top: 4px solid var(--gold-mid); border-left: 4px solid var(--gold-mid); }
.handle-tr { top: 0;    right: 0; border-top: 4px solid var(--gold-mid); border-right: 4px solid var(--gold-mid); }
.handle-bl { bottom: 0; left: 0;  border-bottom: 4px solid var(--gold-mid); border-left: 4px solid var(--gold-mid); }
.handle-br { bottom: 0; right: 0; border-bottom: 4px solid var(--gold-mid); border-right: 4px solid var(--gold-mid); }

/* テンキー表示中スペーサー */
.keypad-spacer { height: 0; transition: height 0.3s ease; }
body.keypad-open .keypad-spacer { height: 500px; }

/* タブレット横画面 */
@media (min-width: 601px) and (orientation: landscape) {
  #global-keypad {
    bottom: 20px;
    padding: 8px;
  }

  .keypad-btn {
    height: 48px;
    font-size: 22px;
  }

  #keypad-close {
    height: 52px;
    font-size: 20px;
  }
}

/* ============================================================
   8. 仕込みタブ
   ============================================================ */

/* 行共通ベース（仕込み・解凍で共用） */
.shikomi-row,
.kaito-row {
  display: flex;
  flex-direction: row;
  scroll-margin-top: 100px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(196, 119, 26, 0.05);
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(196, 119, 26, 0.2);
}

.shikomi-row-top,
.shikomi-row-bottom,
.kaito-row-top,
.kaito-row-bottom {
  display: contents;
}

/* 行内セレクトボックス共通 */
.shikomi-row select,
.shikomi-row input[type="date"],
.shikomi-row .kushi-select-box,
.shikomi-row-bottom .name-select-box,
.kaito-row .kushi-select-box,
.kaito-row .date-select-box,
.kaito-row .honsu-select-box,
.kaito-row .id-display {
  flex: 1;
  height: 64px;
  box-sizing: border-box;
  border: 2px solid rgba(196, 119, 26, 0.4);
  background: var(--bg-base);
  color: var(--gold);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  min-width: 0;
  padding: 0 12px;
  margin: 0;
  outline: none;
  appearance: none;
  display: flex;
  align-items: center;
  line-height: normal;
  cursor: pointer;
  justify-content: center;
}

/* 本数ボックス共通 */
.shikomi-row-bottom .honsu-display,
.kaito-row .btn-del {
  flex: 0 0 64px;
  height: 64px;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.shikomi-row-bottom .honsu-display {
  background: var(--bg-base);
  border: 2px solid var(--gold-mid);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--gold-mid);
}

/* 行内削除ボタン共通 */
.shikomi-row-bottom button,
.kaito-row .btn-del {
  flex: 0 0 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold-dark);
  color: var(--gold-dark);
  background: var(--bg-base);
  cursor: pointer;
  font-weight: bold;
  padding: 0;
}

/* 解凍：IDは操作不可スタイル */
.kaito-row .id-display {
  cursor: default;
  background: rgba(26, 10, 0, 0.8);
  border-color: rgba(196, 119, 26, 0.2);
  color: var(--gold-mid);
}

/* セレクトボックス（名前・串） */
.kushi-select-box {
  flex: 1.5;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border: 2px solid rgba(196, 119, 26, 0.4);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  min-width: 0;
}

.name-select-box {
  flex: 1;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border: 2px solid rgba(196, 119, 26, 0.4);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  min-width: 0;
}

/* スマホ：2段レイアウト */
@media (max-width: 600px) {
  .shikomi-row,
  .kaito-row {
    flex-direction: column;
    padding: 8px;
    gap: 6px;
  }

  .shikomi-row-top,
  .shikomi-row-bottom,
  .kaito-row-top,
  .kaito-row-bottom {
    display: flex;
    width: 100%;
    gap: 6px;
  }

  /* 高さを統一 */
  .shikomi-row select,
  .shikomi-row input[type="date"],
  .shikomi-row .kushi-select-box,
  .shikomi-row-bottom .name-select-box,
  .shikomi-row-bottom .honsu-display,
  .shikomi-row-bottom button,
  .kaito-row .kushi-select-box,
  .kaito-row .date-select-box,
  .kaito-row .honsu-select-box,
  .kaito-row .id-display,
  .kaito-row .btn-del {
    height: 56px;
    min-height: 56px;
  }

  /* 仕込み比率 */
  .shikomi-row-top .kushi-select-box  { flex: 1.5; }
  .shikomi-row-top input[type="date"] { flex: 1; }
  .shikomi-row-bottom .honsu-display  { flex: 0 0 52px; }
  .shikomi-row-bottom .name-select-box { flex: 1; }
  .shikomi-row-bottom button          { flex: 0 0 44px; }

  /* 解凍比率 */
  .kaito-row-top .kushi-select-box  { flex: 1.5; }
  .kaito-row-top .date-select-box   { flex: 1; }
  .kaito-row-bottom .honsu-select-box { flex: 1; }
  .kaito-row-bottom .id-display     { flex: 1; }
  .kaito-row-bottom .btn-del        { flex: 0 0 44px; }
}


/* ============================================================
   9. 解凍タブ
   （行スタイルはセクション8の共通定義で対応済み）
   ============================================================ */
/* 解凍固有のスタイルが必要になればここに追記 */


/* ============================================================
   10. 在庫タブ
   ============================================================ */
.zaiko-item {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

.bar-bg   { background: var(--bg-base); border-radius: 4px; height: 6px; overflow: hidden; margin: 8px 0 4px; }
.bar-fill { height: 100%; background: var(--grad-gold); border-radius: 4px; }

.total-box {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  text-align: center;
}


/* ============================================================
   11. 履歴タブ（日次）
   ============================================================ */
.history-card {
  background: var(--bg-card-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.history-card.open { border-color: #8a4e0e; }

.history-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.history-card-header:active { background: rgba(196, 119, 26, 0.06); }

.history-date    { color: var(--gold); font-weight: bold; font-size: 0.95rem; flex-shrink: 0; }
.history-total   { color: var(--gold-mid); font-size: 0.82rem; flex: 1; }
.history-warning-badge { color: var(--red); font-size: 0.78rem; flex-shrink: 0; }
.history-chevron { color: #5a4030; font-size: 0.7rem; flex-shrink: 0; transition: transform 0.2s; }
.history-chevron.open { transform: rotate(180deg); }

.history-card-body        { padding: 0 10px 10px; display: none; }
.history-card-body.open   { display: block; }

.history-block { background: var(--bg-card); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; }
.history-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.history-block-header:active { background: rgba(196, 119, 26, 0.08); }

.history-block-label { color: var(--gold-mid); font-size: 0.88rem; flex: 1; }
.history-block-count { color: var(--gold); font-size: 0.85rem; font-weight: bold; }

.history-block-body      { padding: 4px 14px 10px; display: none; border-top: 1px solid rgba(58, 32, 16, 0.6); }
.history-block-body.open { display: block; }

.history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(58, 32, 16, 0.4);
  font-size: 0.85rem;
  flex-wrap: nowrap;
}
.history-row:last-child { border-bottom: none; }
.history-row.warning    { background: rgba(224, 90, 58, 0.07); border-radius: 4px; padding-left: 6px; }

.history-kushi-name  { color: var(--gold); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-kushi-val   { color: var(--gold-mid); font-size: 0.82rem; }
.history-kushi-alert { color: var(--red); font-size: 0.78rem; }
.history-empty       { color: #5a4030; font-size: 0.82rem; padding: 8px 0; text-align: center; }
.history-status      { color: #5a4030; text-align: center; padding: 40px 16px; font-size: 0.88rem; }
.history-status.error { color: var(--red); }

/* シェアグラフ */
.share-chart { margin-bottom: 14px; padding-top: 4px; }
.share-row   { display: flex; align-items: center; gap: 8px; padding: 3px 0; flex-wrap: nowrap; }
.share-label    { color: var(--gold); width: 76px; flex-shrink: 0; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-bar-wrap { flex: 1; background: #3a1e00; border-radius: 3px; height: 9px; overflow: hidden; }
.share-bar      { height: 100%; background: var(--gold-dark); border-radius: 3px; transition: width 0.4s ease; }
.share-pct      { color: var(--gold-mid); width: 38px; text-align: right; flex-shrink: 0; font-size: 0.78rem; }

/* もっと読むボタン */
.btn-load-more {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--gold-mid);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.88rem;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: background 0.15s;
}
.btn-load-more:active { background: var(--border-mid); }

/* 管理パネル */
.manage-section       { margin-bottom: 24px; }
.manage-section-title { color: var(--gold-mid); font-size: 13px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

.manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  gap: 8px;
}
.manage-row.used { opacity: 0.5; }

.manage-row-info    { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.manage-kushi       { color: var(--gold); font-size: 14px; }
.manage-honsu       { color: var(--gold-mid); font-size: 13px; }
.manage-meta        { color: var(--muted); font-size: 11px; }
.manage-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.manage-used-label  { color: var(--muted); font-size: 11px; }

.btn-del-action,
.btn-edit-action {
  background: none;
  font-family: 'Noto Serif JP', serif;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.btn-del-action  { border: 1px solid var(--red);      color: var(--red); }
.btn-edit-action { border: 1px solid var(--gold-mid); color: var(--gold-mid); }


/* ============================================================
   12. 履歴タブ（月次）
   ============================================================ */

/* 今月サマリーカード */
.monthly-summary-card {
  background: linear-gradient(135deg, #2a1200, var(--bg-card-deep));
  border: 1px solid var(--gold-dark);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.monthly-summary-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.monthly-summary-title   { color: var(--gold); font-weight: bold; font-size: 1rem; }
.monthly-summary-badge   { color: var(--red); font-size: 0.82rem; }
.monthly-summary-metrics { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.monthly-metric          { color: var(--gold-mid); font-size: 0.85rem; }
.monthly-metric strong   { color: var(--gold); font-size: 0.95rem; }
.monthly-summary-warn    { color: var(--red); font-size: 0.82rem; margin-bottom: 10px; }
.monthly-summary-link {
  background: none;
  border: 1px solid var(--border-mid);
  color: var(--gold-dark);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  width: 100%;
}
.monthly-summary-link:active { background: rgba(196, 119, 26, 0.1); }

/* 月次セクション */
.monthly-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

/* 月次カード（history-cardと構造が同じなので共通化） */
.monthly-card,
.history-card {
  background: var(--bg-card-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.monthly-card.open { border-color: #8a4e0e; }

.monthly-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.monthly-card-header:active { background: rgba(196, 119, 26, 0.06); }

.monthly-month        { color: var(--gold); font-weight: bold; font-size: 0.95rem; flex: 1; }
.monthly-card-summary { color: var(--gold-mid); font-size: 0.8rem; }

.monthly-card-body      { padding: 0 10px 10px; display: none; }
.monthly-card-body.open { display: block; }

/* 月次ブロック（history-blockと同構造） */
.monthly-block        { background: var(--bg-card); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; }
.monthly-block-header {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.monthly-block-header:active { background: rgba(196, 119, 26, 0.08); }
.monthly-block-label  { color: var(--gold-mid); font-size: 0.88rem; flex: 1; }
.monthly-block-body   { padding: 4px 14px 10px; display: none; border-top: 1px solid rgba(58, 32, 16, 0.6); }
.monthly-block-body.open { display: block; }

/* 担当者行 */
.tantousha-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid rgba(58, 32, 16, 0.4);
  cursor: pointer; user-select: none;
}
.tantousha-row:last-child { border-bottom: none; }
.tantousha-row:active { background: rgba(196, 119, 26, 0.06); }
.tantousha-name  { color: var(--gold); flex: 1; font-size: 0.88rem; }
.tantousha-total { color: var(--gold-mid); font-size: 0.85rem; font-weight: bold; }

.tantousha-detail      { display: none; padding: 6px 0 4px 12px; }
.tantousha-detail.open { display: block; }
.tantousha-kushi-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid rgba(58, 32, 16, 0.3); font-size: 0.82rem;
}
.tantousha-kushi-row:last-child { border-bottom: none; }
.tantousha-kushi-name { color: var(--gold); flex: 1; }
.tantousha-kushi-val  { color: var(--gold-mid); }

/* 月次データ行 */
.monthly-metric-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid rgba(58, 32, 16, 0.4); font-size: 0.85rem;
}
.monthly-metric-row:last-child { border-bottom: none; }
.monthly-metric-row.warn { background: rgba(224, 90, 58, 0.07); border-radius: 4px; padding-left: 6px; }
.monthly-kushi-name { color: var(--gold); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monthly-val        { color: var(--gold-mid); font-size: 0.82rem; }
.monthly-val-warn   { color: var(--red); font-size: 0.82rem; }

/* 曜日グリッド */
.youbi-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 0; }
.youbi-item  { background: var(--bg-card-deep); border-radius: 6px; padding: 8px 10px; }
.youbi-label { color: #5a4030; font-size: 0.75rem; margin-bottom: 2px; }
.youbi-val   { color: var(--gold); font-size: 0.88rem; font-weight: bold; }
.youbi-section-label { color: #5a4030; font-size: 0.75rem; padding: 4px 0; }

/* データ行（在庫・鮮度・回転・分布共通） */
.monthly-data-row {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px;
  padding: 8px 0; border-bottom: 1px solid rgba(58, 32, 16, 0.4); font-size: 0.82rem;
}
.monthly-data-row:last-child { border-bottom: none; }
.monthly-data-row.warn { background: rgba(224, 90, 58, 0.07); border-radius: 4px; padding-left: 6px; }
.monthly-data-name  { color: var(--gold); width: 100%; font-size: 0.85rem; margin-bottom: 2px; }
.monthly-data-item  { display: flex; flex-direction: column; flex: 1; min-width: 70px; }
.monthly-data-label { color: #5a4030; font-size: 0.72rem; margin-bottom: 2px; }
.monthly-data-val   { color: var(--gold-mid); font-size: 0.85rem; }


/* ============================================================
   13. 設定モーダル
   ============================================================ */
#setting-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 1000;
}

#setting-modal {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  max-height: 85vh;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-mid);
  border-radius: 0 0 20px 20px;
  z-index: 1001;
  overflow-y: auto;
  padding: 20px 16px;
  transition: top 0.3s ease;
}
#setting-modal.open { top: 0; }

/* 設定内レイアウト */
.setting-section  { padding-bottom: 40px; }
.setting-header   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.setting-title    { color: var(--gold-mid); font-size: 15px; font-weight: 700; }
.setting-close    { background: none; border: 1px solid var(--border-mid); border-radius: var(--radius-sm); color: var(--muted); font-size: 20px; padding: 4px 12px; cursor: pointer; }
.setting-group    { margin-bottom: 16px; }
.setting-group-title { color: var(--gold-dark); font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 0 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.setting-block    { background: var(--bg-card); border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px; border: 1px solid var(--border); }
.setting-label    { color: var(--muted); font-size: 11px; letter-spacing: 1px; margin-bottom: 10px; }
.setting-list     { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 32px; }

.setting-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  padding: 6px 12px;
  color: var(--gold);
  font-size: 13px;
}

.btn-chip-del { background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 0; line-height: 1; }
.btn-chip-del:hover { color: var(--red); }

.setting-input-row { display: flex; gap: 8px; align-items: center; }
.setting-input-row input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 0;
  background: var(--bg-base);
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.btn-add-main {
  height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--grad-gold);
  color: var(--bg-base);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
  white-space: nowrap;
}

.theme-row { display: flex; gap: 8px; }
.btn-theme {
  flex: 1;
  height: 44px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--muted);
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  transition: all var(--transition);
}
.btn-theme.active { background: var(--bg-card); border-color: var(--gold-mid); color: var(--gold); }

/* パスワード変更 */
#current-pw,
#new-pw,
#new-pw-confirm {
  padding: 14px 16px;
  background: var(--bg-base);
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: 8px;
}

.pw-new-row { display: flex; gap: 8px; margin: 8px 0 0; }
.pw-new-row input { flex: 1; margin-bottom: 0; min-width: 0; }

/* 設定アクションエリア */
.setting-action-area { margin: 20px 0; text-align: center; }

/* 警告スライダー */
.slider-card {
  background-color: #2a1f0f;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  color: #fff;
}
.slider-header { font-weight: bold; font-size: 16px; margin-bottom: 8px; }

.range-slider-container {
  position: relative;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
}
.range-slider-container input[type="range"] {
  position: absolute;
  width: 100%;
  pointer-events: none;
  appearance: none;
  background: none;
}
.range-slider-container input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; border: none; }
.range-slider-container input[type="range"]::-moz-range-track              { height: 4px; background: transparent; border: none; }
.range-slider-container input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  position: relative;
  top: 50%;
  transform: translate(-50%, 30%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.range-slider-container input[type="range"]::-webkit-slider-thumb:active {
  transform: translate(-50%, 30%) scale(1.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.low-range::-webkit-slider-thumb { background: gold; z-index: 2; }
.imm-range::-webkit-slider-thumb { background: red;  z-index: 1; }

.slider-badge-row { display: flex; justify-content: space-between; margin-top: 4px; }
.badge            { font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.badge-low        { background-color: #b8860b; color: #fff; }
.badge-imm        { background-color: #ff4500; color: #fff; }
.slider-card.active-low { outline: 2px solid gold; }
.slider-card.active-imm { outline: 2px solid red; }

.btn-sort-order {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
  width: 100%;
}
.btn-sort-order:active {
  background: var(--bg-card);
}

/* ============================================================
   14. 店舗切り替えメニュー
   ============================================================ */
.store-switch-btn {
  background: var(--bg-card);
  border: 1px solid var(--gold-mid);
  border-radius: 10px;
  color: var(--gold);
  padding: 8px 14px;
  font-size: 14px;
  font-family: 'Noto Serif JP', serif;
  cursor: pointer;
  white-space: nowrap;
}

.store-menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
}

.store-menu {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 480px;
  background: var(--bg-base);
  border: 2px solid var(--gold-mid);
  border-radius: var(--radius-lg);
  z-index: 201;
  overflow: hidden;
  animation: modalPop 0.2s ease-out;
}

.store-menu-inner { display: flex; }

.store-list { flex: 0 0 40%; border-right: 1px solid var(--border-mid); }
.store-list-item {
  padding: 16px;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  font-family: 'Noto Serif JP', serif;
  border-bottom: 1px solid var(--bg-card);
  transition: all var(--transition);
}
.store-list-item.active { color: var(--gold); background: var(--bg-card); border-left: 3px solid var(--gold-mid); }
.store-list-item:hover:not(.active) { color: var(--gold); background: rgba(42, 21, 0, 0.5); }

.feature-list { flex: 1; }
.feature-item {
  padding: 16px;
  color: var(--gold);
  cursor: pointer;
  font-size: 15px;
  font-family: 'Noto Serif JP', serif;
  border-bottom: 1px solid var(--bg-card);
  transition: all var(--transition);
}
.feature-item:hover    { background: var(--bg-card); }
.feature-item.locked   { color: var(--muted); }
.feature-item.disabled { color: var(--border-mid); cursor: not-allowed; }


/* ============================================================
   15. 閲覧モード
   ============================================================ */
.viewing-badge {
  background-color: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
  animation: pulse-viewing 2.0s infinite ease-in-out;
}

body[data-view-mode="true"] .btn-save,
body[data-view-mode="true"] .btn-add,
body[data-view-mode="true"] .btn-del {
  opacity: 0.4;
  filter: grayscale(1);
  pointer-events: none;
  cursor: not-allowed;
}

.tab-lock-icon { margin-right: 4px; opacity: 0.8; }


/* ============================================================
   16. アラートバナー・バッジ
   ============================================================ */
#stock-alert-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300000;
  background: var(--bg-base);
  border-bottom: 2px solid var(--gold-mid);
  padding: 10px 16px;
  animation: slideDown 0.3s ease-out;
}

.banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}

.banner-label { font-size: 12px; font-weight: 700; color: var(--gold-mid); white-space: nowrap; }
.banner-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.banner-item  { font-size: 12px; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.banner-item.danger { background: rgba(224, 90, 58, 0.15); border: 1px solid rgba(224, 90, 58, 0.5); color: var(--red); }
.banner-item.warn   { background: rgba(232, 160, 48, 0.15); border: 1px solid rgba(232, 160, 48, 0.5); color: var(--gold-light); }

.stock-alert-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}
.stock-alert-inline span {
  padding: 2px 8px;
  border-radius: 10px;
}
.stock-alert-inline.danger span { 
  background: rgba(224,90,58,0.15); 
  border: 1px solid rgba(224,90,58,0.5); 
  color: var(--red); 
}
.stock-alert-inline.warn span { 
  background: rgba(232,160,48,0.15); 
  border: 1px solid rgba(232,160,48,0.5); 
  color: var(--gold-light); 
}


/* ============================================================
   17. アニメーション定義
   ============================================================ */
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes keypadSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-viewing {
  0%   { opacity: 1.0; transform: scale(1);    }
  50%  { opacity: 0.4; transform: scale(0.98); }
  100% { opacity: 1.0; transform: scale(1);    }
}

@keyframes shake {
  0%   { transform: translateX(0);   }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px);  }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px);  }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px);  }
  100% { transform: translateX(0);   }
}