/* アマレンジャー管理コンソール
   配色・寸法はすべて自前。現行サービスのCSSは使っていない。 */

:root {
  --brand: #c8102e;
  --brand-dark: #8f0b20;
  --ink: #222;
  --line: #d8d8d8;
  --bg: #f4f5f7;
  --panel: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.7;
}

a { color: var(--brand-dark); }

/* ── ヘッダー ── */
.global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #2b2b2b;
  color: #fff;
}
.global-logo { margin: 0; font-weight: bold; letter-spacing: .04em; }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-user { font-size: 12px; color: #ccc; }
.logout-form { margin: 0; }
.logout-form button {
  padding: 5px 14px;
  border: 1px solid #777;
  border-radius: 3px;
  background: #444;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.logout-form button:hover { background: #555; }

/* ── 全体 ── */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - 92px); }

/* ── 左メニュー ── */
.side-nav { width: 190px; flex: 0 0 190px; background: #3a3a3a; }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li { border-bottom: 1px solid #4a4a4a; }
.side-nav a {
  display: block;
  padding: 12px 14px;
  color: #eee;
  text-decoration: none;
  font-size: 13px;
}
.side-nav a:hover { background: #4a4a4a; }
.side-nav li.is-current a {
  background: var(--brand);
  color: #fff;
  font-weight: bold;
}

/* ── 本文 ── */
.main { flex: 1; padding: 18px 26px; min-width: 0; }
.page-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--brand);
  font-size: 20px;
}

.breadcrumb {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 12px;
  color: #666;
}
.breadcrumb li + li::before { content: "＞ "; }

.sub-nav {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0 0 -1px;
  padding: 0;
  flex-wrap: wrap;
}
.sub-nav li a {
  display: block;
  padding: 7px 16px;
  background: #e6e6e6;
  border: 1px solid var(--line);
  border-radius: 3px 3px 0 0;
  text-decoration: none;
  color: #444;
  font-size: 13px;
}
.sub-nav li.is-current a {
  background: var(--panel);
  border-bottom-color: var(--panel);
  color: var(--brand-dark);
  font-weight: bold;
}

.content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 4px 4px 4px;
  padding: 20px;
}

/* ── お知らせ表示 ── */
.flash-ok {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #eaf7ea;
  border: 1px solid #9ccf9c;
  color: #1f6b1f;
  border-radius: 3px;
}
.flash-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #ffeaea;
  border: 1px solid #e4a0a0;
  color: #b02020;
  border-radius: 3px;
}
.flash-error ul { margin: 0; padding-left: 18px; }

/* 運用の異常（自動処理が止まっている等）。見落とされては困るので強く出す */
.ops-alert {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: #fff4e0;
  border: 2px solid #e08a00;
  border-radius: 3px;
  color: #7a4a00;
}
.ops-alert p { margin: 0 0 4px; }
.ops-alert p:last-child { margin-bottom: 0; }

/* ── レジ（iPadで指で押す。ボタンを大きく、間隔を広く）── */
.pos-menu {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.pos-button {
  display: block;
  padding: 22px 18px;
  min-height: 96px;
  border: 2px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
  color: var(--brand-dark);
  text-decoration: none;
  text-align: center;
}
a.pos-button:hover { background: #fff3f4; }
.pos-button.is-pending {
  border-color: var(--line);
  color: #999;
  background: #fafafa;
}
.pos-button-title { display: block; font-size: 20px; font-weight: bold; }
.pos-button-note { display: block; margin-top: 6px; font-size: 12px; color: #777; }

.pos-member {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: #2b2b2b;
  color: #fff;
  border-radius: 6px;
}
.pos-member-name { margin: 0; font-size: 20px; font-weight: bold; }
.pos-member-name span { font-size: 13px; color: #bbb; font-weight: normal; }
.pos-member-balance { margin: 0; font-size: 30px; font-weight: bold; color: #ffd34d; }
.pos-member-balance span { font-size: 15px; }

.pos-products {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.pos-products form { margin: 0; }
.pos-product {
  width: 100%;
  min-height: 84px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.pos-product:hover { border-color: var(--brand); background: #fff8f8; }
.pos-product.is-short { opacity: .5; }
.pos-product-name { display: block; font-size: 15px; font-weight: bold; color: var(--ink); }
.pos-product-point { display: block; margin-top: 4px; font-size: 17px; color: var(--brand-dark); font-weight: bold; }
.pos-product-stock { display: block; margin-top: 2px; font-size: 11px; color: #888; }

.pos-confirm-button { font-size: 18px; padding: 14px 28px; }

.pos-cart {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 2px solid var(--brand);
  border-radius: 6px;
  background: var(--panel);
}
.pos-cart .section-title { margin-top: 0; }
.pos-cart-total { margin: 10px 0; font-size: 20px; text-align: right; }
.pos-cart-total strong { font-size: 28px; color: var(--brand-dark); }
.btn-small.is-selected { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── HOME ── */
.kpi-list {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  flex-wrap: wrap;
}
.kpi-list li {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 18px;
  background: #fafafa;
}
.kpi-list h2 { margin: 0 0 6px; font-size: 13px; color: #555; }
.kpi-value { margin: 0; font-size: 30px; font-weight: bold; text-align: center; color: #999; }
.kpi-note { margin: 4px 0 0; font-size: 11px; color: #888; text-align: center; }

.tile-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
.tile-list a {
  display: block;
  padding: 26px 10px;
  text-align: center;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.tile-list a:hover { background: var(--brand-dark); }

.home-sub-link { margin: 18px 0 0; text-align: center; }
.placeholder-note { margin: 0; color: #666; }

/* ── フッター ── */
.global-footer {
  padding: 12px 18px;
  background: #2b2b2b;
  color: #bbb;
  font-size: 12px;
  text-align: center;
}

/* ── ログイン画面 ── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #2b2b2b;
}
.login-box { width: 380px; padding: 30px 34px; background: #fff; border-radius: 6px; }
.login-logo { margin: 0 0 4px; font-size: 17px; color: var(--brand); text-align: center; }
.login-title { margin: 0 0 4px; font-size: 15px; text-align: center; }
.login-lead { margin: 0 0 18px; font-size: 12px; color: #666; text-align: center; }
.login-error {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #ffeaea;
  border: 1px solid #e4a0a0;
  color: #b02020;
  font-size: 13px;
  border-radius: 3px;
}
.login-fields { margin: 0; }
.login-fields dt { font-size: 12px; color: #555; margin-bottom: 4px; }
.login-fields dd { margin: 0 0 14px; }
.login-fields input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 14px;
}
.login-remember { font-size: 12px; color: #555; }
.login-submit { margin: 16px 0 0; }
.login-submit button {
  width: 100%;
  padding: 11px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.login-submit button:hover { background: var(--brand-dark); }

/* ── 共通フォーム（後続スライスで使う） ── */
.form-table { width: 100%; border-collapse: collapse; }
.form-table th,
.form-table td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.form-table th { width: 210px; background: #f7f7f7; font-weight: normal; }
.badge-required,
.badge-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 2px;
  font-size: 11px;
  color: #fff;
}
.badge-required { background: var(--brand); }
.badge-optional { background: #999; }
.field-note { margin: 5px 0 0; font-size: 11px; color: #777; }

.btn-row { list-style: none; display: flex; gap: 10px; margin: 20px 0 0; padding: 0; }
.btn-primary,
.btn-secondary {
  padding: 10px 26px;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn-primary { background: var(--brand); color: #fff; font-weight: bold; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: #ddd; color: #333; }
.btn-secondary:hover { background: #ccc; }

/* ── 見出し・検索結果 ── */
.lead { margin: 0 0 16px; color: #555; }
.section-title {
  margin: 24px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
  font-size: 15px;
}
.section-title:first-child { margin-top: 0; }
.result-count { font-size: 13px; color: var(--brand-dark); }
.empty-note {
  margin: 0;
  padding: 14px;
  background: #f7f7f7;
  border: 1px dashed var(--line);
  color: #666;
  text-align: center;
}
.btn-secondary-link {
  display: inline-block;
  padding: 10px 26px;
  background: #ddd;
  color: #333;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.btn-secondary-link:hover { background: #ccc; }
.pagination-area { margin-top: 16px; }

textarea, input[type="text"], input[type="password"], select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
}

/* ── 配信対象の要約 ── */
.segment-summary {
  margin: 20px 0;
  padding: 14px 18px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.segment-summary h3 { margin: 0 0 8px; font-size: 14px; }
.segment-conditions { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.segment-count { margin: 0; font-size: 14px; }
.segment-count strong { font-size: 18px; color: var(--brand-dark); }
.segment-warning {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #fff6e5;
  border: 1px solid #e8c37a;
  color: #8a5a00;
  font-size: 13px;
  border-radius: 3px;
}

/* ── スタンプ ── */
.search-row { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; }
.stamp-balance { font-size: 20px; color: var(--brand-dark); }
.count-minus { color: #b02020; }
.inline-form { display: flex; gap: 4px; align-items: center; margin: 0; }
.btn-small {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #eee;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.btn-small:hover { background: #ddd; }
.revoked-mark { color: #999; font-size: 12px; }
.grant-form { margin-top: 16px; }

.action-row { margin: 0 0 14px; }
.btn-primary-link {
  display: inline-block;
  padding: 9px 22px;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}
.btn-primary-link:hover { background: var(--brand-dark); }

.badge-active, .badge-inactive {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 2px;
  font-size: 11px;
  color: #fff;
}
.badge-active { background: #2b8a3e; }
.badge-inactive { background: #999; }

.token-text {
  display: inline-block;
  padding: 4px 8px;
  background: #f2f2f2;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

.notice-box {
  margin: 20px 0;
  padding: 14px 18px;
  background: #eef4fb;
  border: 1px solid #a8c4e0;
  border-radius: 4px;
}
.notice-box h3 { margin: 0 0 8px; font-size: 14px; color: #1c4d80; }
.notice-box p { margin: 0 0 8px; font-size: 13px; }
.notice-box p:last-child { margin-bottom: 0; }

/* ── クーポン ── */
.pre-line { white-space: pre-line; }
.coupon-image { max-width: 320px; height: auto; border: 1px solid var(--line); border-radius: 3px; }
.notice-line {
  margin: 16px 0;
  padding: 10px 14px;
  background: #f7f7f7;
  border-left: 4px solid #999;
  font-size: 13px;
  color: #555;
}
.form-table label { margin-right: 16px; }

/* ── 使い方 ── */
.pending-list { margin: 8px 0; padding-left: 20px; font-size: 13px; }
.pending-list li { margin-bottom: 4px; }

/* ── 分析 ── */
.kpi-value-real { color: var(--brand-dark); }
.external-link-row { margin: 12px 0 0; font-size: 12px; }

/* ── メニュー ── */
.delete-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

/* ── ニュース ── */
.news-image {
  max-width: 220px;
  height: auto;
  margin: 0 8px 8px 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  vertical-align: top;
}
.reselect-images { margin: 16px 0; }

/* ── プッシュ通知 ── */
.not-sent-mark { color: #8a5a00; font-size: 12px; }

/* ── 一覧表 ── */
.list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.list-table th,
.list-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.list-table th { background: #f7f7f7; font-weight: normal; color: #555; }
.list-table tbody tr:nth-child(even) { background: #fafafa; }

/* ══════════════════════════════════════════════════════════════
   スマホ・タブレットの縦画面（2026-09-05）

   管理画面はもともとパソコン専用の作りで、幅の狭い画面で開くと
   左メニュー（190px）が画面の半分を食い、本文が潰れて読めなかった。

   ★パソコンでの見た目は変えない。ここから下は、画面の幅が 900px 以下のとき
   （スマホ・iPadの縦画面）だけ効く。iPadでレジを使うので、そこまで含める。
   ══════════════════════════════════════════════════════════════ */

/* パソコンではアイコンとMENUボタンを出さない（今までどおり名前だけ） */
.nav-icon,
.side-nav-toggle,
.side-nav-backdrop { display: none; }

@media (max-width: 900px) {

  /* ── ヘッダー（高さを詰めて、本文を広く使う）── */
  .global-header { padding: 8px 12px; }
  .global-logo { font-size: 13px; }
  /* 誰でログインしているかは、メニューを開けば分かる。狭い画面では省く */
  .header-user { display: none; }
  .logout-form button { padding: 4px 10px; font-size: 11px; }

  .layout { min-height: calc(100vh - 76px); }

  /* ── 左メニュー：アイコンだけの細い帯にする ── */
  .side-nav {
    width: 52px;
    flex: 0 0 52px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
  }
  .side-nav a {
    padding: 11px 0;
    text-align: center;
    font-size: 11px;
  }
  .nav-icon {
    display: block;
    font-size: 19px;
    line-height: 1.2;
  }
  .nav-label { display: none; }

  /* MENUボタン。帯の一番上に置く（指がいちばん届きやすい） */
  .side-nav-toggle {
    display: block;
    width: 100%;
    padding: 10px 0 8px;
    border: 0;
    border-bottom: 1px solid #4a4a4a;
    background: #2b2b2b;
    color: #eee;
    font-family: inherit;
    cursor: pointer;
  }
  .side-nav-toggle-icon { display: block; font-size: 17px; line-height: 1; }
  .side-nav-toggle-label { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .04em; }

  /* 開いたとき：名前つきのメニューを本文の上に重ねる */
  .side-nav.is-open {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 208px;
    flex-basis: 208px;
    max-height: none;
    z-index: 60;
    box-shadow: 4px 0 14px rgba(0, 0, 0, .35);
  }
  .side-nav.is-open a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    text-align: left;
    font-size: 13px;
  }
  .side-nav.is-open .nav-icon { font-size: 16px; }
  .side-nav.is-open .nav-label { display: inline; }
  .side-nav.is-open .side-nav-toggle-label { font-size: 12px; }

  /* 開いているあいだ、後ろを押すと閉じられるようにする */
  .side-nav.is-open ~ .side-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .45);
  }

  /* ── 本文 ── */
  .main { padding: 12px 12px 28px; }
  .page-title { font-size: 17px; }
  .content { padding: 12px; border-radius: 0 3px 3px 3px; }
  .section-title { font-size: 15px; }
  .lead { font-size: 13px; }

  /* サブタブは折り返す（横に伸びて画面からはみ出さないように） */
  .sub-nav li a { padding: 6px 11px; font-size: 12px; }

  /* ── 入力の表：見出しと欄を縦に積む ──
     横に並べると、狭い画面では欄が数文字ぶんまで潰れて入力できない */
  .form-table,
  .form-table tbody,
  .form-table tr,
  .form-table th,
  .form-table td { display: block; width: auto; }
  .form-table tr { margin-bottom: 12px; border: 1px solid var(--line); }
  .form-table th,
  .form-table td { border: 0; padding: 9px 11px; }
  .form-table th { width: auto; border-bottom: 1px solid var(--line); font-weight: bold; font-size: 13px; }
  .form-table input[type="text"],
  .form-table input[type="password"],
  .form-table input[type="number"],
  .form-table input[type="date"],
  .form-table input[type="datetime-local"],
  .form-table select,
  .form-table textarea { max-width: 100%; }
  .form-table label { display: inline-block; margin-bottom: 4px; }

  /* ── 一覧の表：はみ出さずに横へスクロールさせる ──
     縮めて文字を折り返すと、どの列がどの値か分からなくなる */
  .list-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .list-table th,
  .list-table td { padding: 8px 10px; }

  /* ── ボタン・検索の行 ── */
  .btn-row { flex-wrap: wrap; gap: 8px; }
  .btn-primary,
  .btn-secondary { padding: 10px 18px; }
  .search-row { flex-wrap: wrap; }
  .search-row input[type="text"],
  .search-row select { flex: 1 1 150px; min-width: 0; }
  .inline-form { flex-wrap: wrap; }

  /* ── HOME ── */
  .kpi-list { gap: 10px; margin-bottom: 16px; }
  .kpi-list li { flex: 1 1 100%; padding: 11px 13px; }
  .kpi-value { font-size: 24px; }
  /* 現行アプリと同じ3列に並べる */
  .tile-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tile-list a { padding: 18px 4px; font-size: 12px; }

  /* ── レジ（iPadの縦画面でも指で押せる大きさを保つ）── */
  .pos-menu { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pos-button { padding: 16px 10px; min-height: 78px; }
  .pos-button-title { font-size: 16px; }
  .pos-button-note { font-size: 11px; }
  /* 商品ボタンは幅に応じて自動で列数が変わる（もとの設定のまま）。
     iPadでは4列、スマホでは2列になり、どちらでも指で押せる大きさを保つ */
  .pos-member { flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 14px; }
  .pos-member-name { font-size: 16px; }
  .pos-member-balance { font-size: 26px; }
  .pos-cart { padding: 11px 13px; }
  .pos-cart-total strong { font-size: 24px; }

  /* 付与と交換のフォームは縦に積む（横に並べると両方とも潰れる） */
  .point-forms { flex-direction: column; gap: 16px; }
  .point-forms .grant-form { min-width: 0; }
}

/* 画面がとても狭いとき（小さめのスマホ） */
@media (max-width: 400px) {
  .tile-list a { padding: 14px 2px; font-size: 11px; }
  .pos-menu { grid-template-columns: 1fr; }
}