/* ヘッダー全体 */
    header {
      background: #fff;
    }

    /* 中央寄せコンテナ（PC 基本レイアウト） */
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 8px 16px;
      box-sizing: border-box;

      /* ★ ここで order.css の設定を上書き */
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* 1段目：テーブル選択まわり（左側のかたまり） */
    .header-top {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .header-top .admin-picker {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* 2段目：注文履歴ボタン + ハンバーガー（右側のかたまり） */
    .header-bottom {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* 注文履歴ボタン用ラッパー */
    .history-wrapper {
      flex: 0 0 auto;
    }

    /* ボタンの幅＆中央寄せの margin をこのページだけ上書き */
    .history-wrapper .view-history-btn {
      display: block;
      width: 220px;
      /* PC で少し広めの幅。お好みで調整可 */
      max-width: 100%;
      margin: 0;
      /* order.css の margin: 0 auto を打ち消す */
    }

    /* 「選択中：◯テーブル」チップ（ヘッダー＆モーダル共通） */
    .selected-table-chip {
      display: none;
      padding: 6px 12px;
      border-radius: 999px;
      background: #f3f4f6;
      color: #111;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      border: 1px solid #e5e7eb;
      /* 常時点滅させる */
      animation: selected-table-blink 1s linear infinite;
    }

    .selected-table-chip.show {
      display: inline-flex;
    }

    /* 点滅アニメーション */
    @keyframes selected-table-blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.25;
      }
    }

    /* 注文確認モーダル内の「選択中：◯テーブル」をド派手に表示 */
    #orderSummaryModal .selected-table-chip {
      justify-content: center;
      margin: 6px auto 12px;

      /* 2まわりほど大きく */
      font-size: 20px;
      padding: 8px 18px;

      /* 蛍光色っぽい緑＋ネオン風の光り方 */
      color: #000000;
      background: #ddec39;
      /* 蛍光ライム系 */
      border-color: #e7bc30;

      /* ヘッダー用のゆるい点滅を上書きして、派手なネオン点滅に */
      animation: selected-table-neon-blink 1.5s ease-in-out infinite;

      text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
      box-shadow: 0 0 12px rgba(197, 175, 34, 0.85);
    }

    #orderSummaryModal .selected-table-chip.show {
      display: flex;
    }

    /* ネオン風の派手な点滅アニメーション */
    @keyframes selected-table-neon-blink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 12px rgba(226, 230, 120, 0.85);
      }

      50% {
        opacity: 0.4;
        transform: scale(1.05);
        box-shadow: 0 0 22px rgb(231, 231, 104);
      }
    }

    /* ログイン中スタッフ表示用チップ */
    .staff-chip {
      display: none;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef2ff;
      color: #111;
      font-size: 13px;
      line-height: 1;
      white-space: nowrap;
      border: 1px solid #e5e7eb;
    }

    .staff-chip.show {
      display: inline-flex;
    }

    /* フッターボタン周り */
    .order-footer-buttons {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .back-btn.hidden {
      display: none;
    }

    .view-order-btn.disabled {
      opacity: .5;
      pointer-events: none;
    }

    /* モーダル（既存） */
    .modal.hidden {
      display: none;
    }

    .modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .35);
      z-index: 1000;
    }

    .modal-content {
      background: #fff;
      color: #222;
      border-radius: 14px;
      padding: 16px 18px;
      width: min(92vw, 680px);
      max-height: 86vh;
      overflow: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    }

    .order-summary-content h2 {
      margin-top: 0;
    }

    .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0;
    }

    .quantity-control button {
      font-size: 18px;
    }

    .modal-buttons,
    .summary-buttons {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }

    .order-summary-item {
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }

    .order-name-line {
      font-weight: 600;
      margin-bottom: 4px;
    }

    .btn-with-bubble {
      position: relative;
      display: inline-flex;
      align-items: center;
      overflow: visible;
    }

    .price-bubble {
      position: absolute;
      right: 0;
      top: -56px;
      /* ボタンの少し上に固定 */
      z-index: 2;
      /* 見た目 */
      background: #fff;
      color: #111;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .18);

      /* テキストを中央に＆下付き防止 */
      display: flex;
      align-items: center;
      justify-content: center;

      /* 文字サイズ・余白 */
      font-size: 14px;
      line-height: 1.4;
      padding: 10px 12px;

      /* 幅の制御：内容に合わせて広がるが上限あり */
      width: max-content;
      /* 内容幅にフィット */
      max-width: min(86vw, 440px);
      /* 画面／PCでの上限 */
      white-space: normal;
      /* 折り返しOK */
      overflow-wrap: anywhere;
      /* 長い数値も折り返す */
      word-break: break-word;

      /* アニメーション */
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .18s ease, transform .18s ease;

      /* クリックを邪魔しない（任意） */
      pointer-events: none;
    }

    .price-bubble.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 600px) {
      .header-actions {
        flex: 1 1 auto;
        min-width: 0;
      }
    }

    /* スマホ向けの微調整（下付きに見えるのを防ぐ） */
    @media (max-width: 480px) {
      .price-bubble {
        top: -52px;
        /* ほんの少しだけ近づける */
        font-size: 14px;
        line-height: 1.5;
        padding: 8px 12px;
        max-width: 90vw;
        /* 画面幅めいっぱいに近づける */
      }
    }

    /* PCで大きめに（見やすさ重視） */
    @media (min-width: 900px) {
      .price-bubble {
        top: -60px;
        font-size: 15px;
        padding: 12px 14px;
        max-width: 520px;
      }
    }

    /* グローバル × */
    .modal-close.global-top-right {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1100;
    }

    .modal-close.hidden {
      display: none;
    }

    /* PCのときだけ更に安全側に：ヘッダー右端の余白を確保 */
    @media (min-width: 900px) {
      .header-inner {
        padding-right: 24px;
      }
    }

    /* ===== 履歴モーダル（#orderHistoryModal）内のキャンセル系ボタン ===== */

    /* 共通ベース（小さめ・行内で自然に並ぶ） */
    #orderHistoryModal .order-history-row .order-cancel-btn,
    #orderHistoryModal .order-history-row .order-undo-btn {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      margin-left: 8px;
      /* 行テキストとの間隔 */
      font-size: 13px;
      line-height: 1.2;
      border-radius: 8px;
      border: 1px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      vertical-align: middle;
      /* モバイルでの下付き防止 */
      text-decoration: none;
      /* 親の取り消し線の影響を最小化 */
      box-sizing: border-box;
    }

    /* キャンセル（赤） */
    #orderHistoryModal .order-history-row .order-cancel-btn {
      background: #ef4444;
      /* red-500 */
      color: #fff;
      border-color: #ef4444;
    }

    #orderHistoryModal .order-history-row .order-cancel-btn:hover {
      background: #dc2626;
      border-color: #dc2626;
    }

    #orderHistoryModal .order-history-row .order-cancel-btn:active {
      background: #b91c1c;
      border-color: #b91c1c;
    }

    /* キャンセル取り消し（緑） */
    #orderHistoryModal .order-history-row .order-undo-btn {
      background: #10b981;
      /* emerald-500 */
      color: #fff;
      border-color: #10b981;
    }

    #orderHistoryModal .order-history-row .order-undo-btn:hover {
      background: #059669;
      border-color: #059669;
    }

    #orderHistoryModal .order-history-row .order-undo-btn:active {
      background: #047857;
      border-color: #047857;
    }

    /* フォーカス可視化（キーボード操作用） */
    #orderHistoryModal .order-history-row .order-cancel-btn:focus-visible,
    #orderHistoryModal .order-history-row .order-undo-btn:focus-visible {
      outline: 2px solid #2563eb;
      /* blue-600 */
      outline-offset: 2px;
    }

    /* 処理中の見た目 */
    #orderHistoryModal .order-history-row .order-cancel-btn:disabled,
    #orderHistoryModal .order-history-row .order-undo-btn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    /* 「キャンセル済み」チップ（行内で灰色のラベルに） */
    #orderHistoryModal .order-history-row .order-canceled {
      display: inline-block;
      margin-left: 8px;
      padding: 3px 8px;
      font-size: 12px;
      line-height: 1.2;
      border-radius: 9999px;
      background: #f3f4f6;
      color: #374151;
      border: 1px solid #e5e7eb;
    }

    /* 行の余白だけ軽く（レイアウトは既存に合わせて block のまま） */
    #orderHistoryModal .order-history-row {
      margin: .4rem 0;
    }

    /* ===== 管理者用：その場限りの特別注文フォーム ===== */
    .free-item-form {
      margin-top: 16px;
      padding: 12px;
      border-radius: 12px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
    }

    .free-item-form h3 {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 600;
    }

    .free-item-form .field-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-end;
      margin-bottom: 8px;
    }

    .free-item-form label {
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .free-item-form input[type="text"],
    .free-item-form input[type="number"] {
      padding: 4px 8px;
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid #d1d5db;
      min-width: 0;
    }

    .free-item-form button {
      font-size: 14px;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid #2563eb;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }

    .free-item-form button:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    .free-item-form button:active {
      background: #1e40af;
      border-color: #1e40af;
    }


    /* ===== 管理者ヘッダー右上のハンバーガーメニュー ===== */
    .admin-nav {
      flex: 0 0 auto;
      position: relative;
      display: flex;
      align-items: center;
    }

    .hamburger-btn {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 0;
    }

    .hamburger-btn span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: #111;
    }

    .hamburger-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      min-width: 140px;
      padding: 8px 0;
      background: #ffffff;
      color: #111111;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
      z-index: 900;
    }

    .hamburger-menu a {
      display: block;
      padding: 8px 12px;
      font-size: 14px;
      text-decoration: none;
      color: inherit;
      white-space: nowrap;
    }

    .hamburger-menu a:hover {
      background: #f3f4f6;
    }

    /* ★ スマホ用レイアウト：縦2段にして「左ボタン / 右ハンバーガー」を維持 */
    @media (max-width: 600px) {
      .header-inner {
        flex-direction: column;
        /* 上：テーブル行 / 下：履歴＋ハンバーガー */
        align-items: stretch;
      }

      .header-bottom {
        width: 100%;
        justify-content: space-between;
        /* 履歴ボタンは左、ハンバーガーは右 */
        margin-top: 8px;
      }

      .history-wrapper {
        flex: 1 1 auto;
        /* 左側を広めにとる */
      }

      .history-wrapper .view-history-btn {
        width: 100%;
        /* スマホではラッパーいっぱいに広げる */
      }
    }