/* myproject/static/css/components.css */

/* ===== ステータスボックス ===== */
.order-status, .customer-status, .visit-status, .sales-status {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
}

.order-status {
    background-color: #e7f3fe;
    border: 1px solid #4682b4;

    /* 親を唯一の横スクロール元に固定（注文一覧） */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

.sales-status {
    background-color: #F0E4E4;
    border: 1px solid #e9bebe;
}

.visit-status {
    background-color: #F1FAF6;
    border: 1px solid #47b5a3;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

.customer-status {
    background-color: #f0f0f0;
    border: 1px solid #cccccc;

    /* 親を唯一の横スクロール元に固定（店舗一覧） */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

/* ===== アイテムスタイル（共通） ===== */
.order-item, .visit-item {
    display: flex;
    align-items: center;
    padding: 3px 0;
}

.order-item {
    /* 行はスクロールさせない“板”にする（親が横スクロールを所有） */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow-x: visible;
    border-bottom: 1px solid #82bded;
}
.order-item > * { flex: 0 0 auto; }
.order-item p{
  margin:0;
  min-width: max-content;  /* Safari対策 */
}

.visit-item {
    justify-content: space-between; /* 左：本文／右：ボタンを明確に分割 */
    gap:12px;
    border-bottom: 1px solid #47b5a3;
    min-width: 650px; /* 横スクロールを確保する最小幅 */
    width: 100%;
    display: flex; /* 既存ですが明示 */
}
.visit-item p{
  margin:0;
  flex:1 1 auto;
  min-width:0;               /* ← これが無いと和文が1文字ずつ縦折れします */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 以下のスタイルを追加 */
.visit-item .button-group {
  flex-shrink: 0; /* ボタン群が縮小しないように */
  min-width: max-content; /* 内容に応じた最小幅を確保 */
}

/* 店舗一覧の行（クラス揺れを吸収：.store-item / .customer-item） */
.customer-status .store-item,
.customer-status .customer-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow-x: visible;
}
.customer-status .store-item > *,
.customer-status .customer-item > *{ flex: 0 0 auto; }
.customer-status .store-item p,
.customer-status .customer-item p{ margin:0; min-width:max-content; }

/* 行内ボタン帯：改行禁止＋タッチ操作を横パン優先に */
.order-item .button-group,
.customer-status .store-item .button-group,
.customer-status .customer-item .button-group{
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.order-item .button-group,
.order-item .button-group form,
.order-item .button-group button,
.customer-status .button-group,
.customer-status .button-group form,
.customer-status .button-group button{
  touch-action: pan-x;
  white-space: nowrap;
}

.order-item form, .visit-item form { margin: 0 5px; }

/* ===== ボタングループ共通 ===== */
.button-group { display: flex; gap: 0px; }

/* ===== フォーム等 ===== */
.form-group { margin-bottom: 15px; }

.btn {
    padding:2px 1px;
    margin: -3px;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}

.list-btn-red {
    padding:2px 2px;
    margin: -2px;
    color: #fff;
    background-color: #F44336;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}
.list-btn-red:hover { background-color: #D32F2F; }

.list-btn-green1 {
    padding:2px 2px;
    margin: -2px;
    color: #fff;
    background-color: #28a745;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}
.list-btn-green1:hover { background-color: #218838; }

.list-btn-green2 {
    padding:2px 2px;
    margin: -2px;
    color: #fff;
    background-color: #155724;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}
.list-btn-green2:hover { background-color: #0b3d1c; }

.list-btn-blue {
    padding:2px 2px;
    margin: -2px;
    color: #fff;
    background-color: #2196F3;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}
.list-btn-blue:hover { background-color: #1976D2; }

.time-edit-btn,
.extension-btn{
    padding: 0px 1px;
    margin: 1px;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}

.btn--primary{ background:#2b6cb0; color:#fff; }
.btn--danger { background:#c53030; color:#fff; }

/* ===== モーダル ===== */
.modal {
    position:fixed;
    inset:0; display:none;
    align-items:center;
    justify-content:center;
}
.modal.is-open { display:flex; }

.modal-content {
    background:#fff;
    border-radius:8px;
    width: clamp(200px, 90vw, 350px);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding: 12px 16px;
}
.modal-header{ padding:8px 12px; border-bottom:1px solid #e5e5e5; font-weight:600; text-align:center; }
.modal-body  { padding:12px; }
.modal-footer{ padding:8px 12px; border-top:1px solid #e5e5e5; display:flex; justify-content:center; gap:10px; }
.modal-buttons{ display:flex; gap:8px; justify-content:center; }

.list { display:grid; gap:8px; }
.list-item {
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:10px;
    background:#fff;
}

/* ===== コンテナ ===== */
.checkout-container { max-width: 800px; margin: 0 auto; }

/* ===== 注文メニュー／精算内訳 ===== */
.checkout-menu-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checkout-menu-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.2rem;
}
.checkout-menu-item:nth-child(even) { background-color: #f9f9f9; }
.checkout-menu-name { font-weight: 500; }
.checkout-menu-details { color: #666; font-size: 0.9rem; margin-left: 0.5rem; }
.checkout-menu-price { font-weight: bold; color: #2c3e50; }

.checkout-settlement-item {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.2rem;
}
.checkout-settlement-item:nth-child(even) { background-color: #f9f9f9; }

.section-title {
    font-size: 1.25rem;
    color: #2c3e50;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 0.5rem;
    margin: 1rem 0 0.8rem;
}

.checkout-price-card { background-color: #f8f9fa; border-radius: 8px; padding: 0.8rem; margin: 0.8rem 0; border-left: 4px solid #4CAF50; }
.checkout-price-item { display: flex; justify-content: space-between; margin-bottom: 0.4rem; padding: 0.2rem 0; }
.checkout-price-label { color: #555; font-weight: 500; }
.checkout-price-value { font-weight: bold; color: #2c3e50; }

.checkout-total-section { background-color: #e8f5e9; border-radius: 8px; padding: 0.5rem; margin: 0.5rem 0; border: 1px solid #c8e6c9; }
.checkout-total-row { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: bold; margin: 0.5rem 0; color: #2e7d32; }

.checkout-split-section { background-color: #fff3e0; border-radius: 8px; padding: 0.8rem; margin: 0.8rem 0; border: 1px solid #ffcc80; }
.checkout-split-info { text-align: center; font-weight: 500; color: #ef6c00; }

/* ===== 精算内訳フォーム ===== */
.form-row { margin-bottom: 1rem; }
.asuka-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333; }
.asuka-input, .asuka-select { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }

.checkbox-row { display: flex; align-items: center; margin-bottom: 1rem; }
.checkbox-row input[type="checkbox"] { margin-right: 0.5rem; }

.error-messages { color: #dc3545; margin-top: 0.5rem; padding-left: 1rem; }
.error-messages li { list-style-type: disc; }

/* ===== テーブル ===== */
.asuka-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    table-layout: fixed;
}
.asuka-table .action-btn {
    padding: 4px 8px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}
.asuka-table th {
    background-color: #f8f9fa;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    color: #495057;
}
.asuka-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}
.asuka-table--compact th, .asuka-table--compact td { padding: 0.5rem; }
.asuka-table tbody tr:hover { background-color: #f8f9fa; }

.asuka-table .button-container form { display: inline; margin: 0; padding: 0; }
.asuka-table .action-btn.edit { background-color: #2196F3; }
.asuka-table .action-btn.edit:hover { background-color: #1976D2; }
.asuka-table .action-btn.delete { background-color: #F44336; }
.asuka-table .action-btn.delete:hover { background-color: #D32F2F; }

.asuka-table th.col-actions,
.asuka-table td.col-actions {
    text-align: center !important;
    white-space: nowrap;
}
.asuka-table td.col-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

/* ===== 顧客向けメニュー行（S210） ===== */
.menu-list{ list-style: none; padding: 0; margin: 8px 0 20px; }
.menu-item{ padding: 8px 6px; border-bottom: 1px solid #eee; }
.menu-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.menu-name{ display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.menu-name strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.menu-price{ white-space: nowrap; font-weight: 600; color: #2c3e50; }
.menu-qty{
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 180px; justify-content: flex-end;
}
.menu-qty label{ white-space: nowrap; color: #555; }
.menu-qty input[type="number"]{
  width: 88px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px;
}

/* 共通ステッパー */
.asuka-qty-stepper { display: inline-flex; align-items: center; gap: 6px; }
.asuka-qty-input { width: 64px; text-align: right; padding: 6px 8px; border-radius: 10px; border: 1px solid #cfd6de; background: #fff; }
.asuka-step { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #cfd6de; background: #f7f9fb; font-size: 18px; line-height: 1; cursor: pointer; user-select: none; }
.asuka-step:active { transform: translateY(1px); }
.asuka-step.asuka-plus { font-weight: 700; }

/* ===== レスポンシブ ===== */
@media (max-width: 560px){
  .menu-row{ flex-wrap: wrap; }
  .menu-qty{ flex: 1 0 100%; justify-content: flex-end; margin-top: 6px; }
}
@media (max-width: 768px) {
    .asuka-table td.col-actions { flex-direction: column; gap: 0.25rem; }
}
@media (max-width: 768px) {
    .checkout-price-item,
    .checkout-total-row,
    .checkout-menu-item,
    .checkout-settlement-item { flex-direction: column; }
    .checkout-price-value,
    .checkout-menu-price { margin-top: 0.25rem; margin-left: 1.5rem; }
}
@media (max-width: 768px) {
    .asuka-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .asuka-table th, .asuka-table td { white-space: nowrap; }
}

/* ===== 汎用ユーティリティ ===== */
.text-right { text-align: right; }
.nowrap     { white-space: nowrap; }

/* ===== 注文メニュー依頼確認テーブル ===== */
.asuka-table--order-confirm col.col-name      { width: auto;     }
.asuka-table--order-confirm col.col-qty       { width: 6.5rem;   }
.asuka-table--order-confirm col.col-subtotal  { width: 8.5rem;   }
.asuka-table--order-confirm td.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asuka-table--order-confirm td.qty, .asuka-table--order-confirm td.amount { text-align: right; white-space: nowrap; }
.asuka-table--order-confirm th.th-qty, .asuka-table--order-confirm th.th-amount { text-align: right; padding-right: 0.5rem; }
.asuka-table--order-confirm td.qty, .asuka-table--order-confirm td.amount { font-variant-numeric: tabular-nums; }

/* ===== フォーム横並び（共通） ===== */
.form-row--h { display: flex; align-items: center; gap: 12px; }
.form-row--h .asuka-label { flex: 0 0 10rem; white-space: nowrap; }
.form-row--h .asuka-input, .form-row--h .asuka-select { width: 100%; max-width: 320px; min-width: 160px; flex: 0 0 auto; }

.form-buttons--center { justify-content: center; gap: 12px; flex-wrap: nowrap; }

@media (max-width:560px){
  .form-row--h{ flex-direction:column; align-items:stretch; }
  .form-row--h .asuka-label{ width:auto; }
  .form-row--h .asuka-input, .form-row--h .asuka-select{ max-width:100%; }
  .form-buttons--center{ flex-direction:column; }
}

/* 操作ボタン行は必ず中央寄せ */
.button-container,
.form-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

/* 狭幅フォーム用ユーティリティ */
.container--sm { max-width: 600px; margin: 0 auto; }

/* 共通フォーム標準（クラス未指定にも適用） */
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  box-sizing: border-box;
}

/* 横並び行での幅制御（.asuka-* 未指定要素にも適用） */
.form-row--h input[type="text"],
.form-row--h input[type="number"],
.form-row--h input[type="email"],
.form-row--h input[type="password"],
.form-row--h select,
.form-row--h textarea { max-width: 320px; }

/* ログイン画面用 */
.form-row--center { display: flex; flex-direction: column; align-items: center; }
.form-row--center .asuka-input { width: 100%; max-width: 360px; }

/* 上段ナビ */
.toolbar{ display:flex; flex-wrap:wrap; justify-content:center; column-gap:12px; row-gap:8px; margin:16px 0; clear:both; }
.toolbar a{ min-width:110px; }

/* アラート */
.alert { border-radius: 6px; padding: 1rem; margin: 1rem 0; font-size: 1rem; }
.alert--error { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.alert-warning { background: #fff7e6; border: 1px solid #f5c97a; color: #5c3c00; }

/* スマホ時：縦積みで発生するラベルの10rem確保を無効化 */
@media (max-width:560px){
  .form--compact .form-row--h .asuka-label{ flex: 0 0 auto !important; }
}

/* selectable list (カード風リスト) */
.list--selectable { padding: 0; margin: 0; list-style: none; max-height: 55vh; overflow: auto; }
.list--selectable li { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.list--selectable li + li { margin-top: 8px; }
.list--selectable .customer-item { cursor: pointer; }
.list--selectable .customer-item:hover { background:#f7f9fb; border-color:#d7dfe8; }

/* ===== A60タブレット向け横スクロール改善 ===== */

/* 既存の .order-status と .customer-status を強化 */
.order-status, .customer-status {
    /* 既存のスタイルはそのままに、以下を追加 */
    width: 100%;
    min-width: 100%;
    display: block;
    position: relative;
}

/* タブレット向けのメディアクエリを追加（既存コードの最後に追記） */
@media (max-width: 1024px) {
    .order-status, .customer-status {
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
        touch-action: pan-x pan-y;
    }
    
    /* スクロールバーを常に表示（古いAndroid対策） */
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.3);
        border-radius: 4px;
    }
}

/* アイテムの最小幅を確保（既存の .order-item スタイルに追加） */
.order-item, 
.customer-status .store-item, 
.customer-status .customer-item {
    min-width: 600px; /* 横スクロールが必要な十分な幅 */
}

/* A60タブレット向けの特別なスタイルを追加 */
@media (max-width: 800px) and (orientation: portrait) {
    .order-item, .visit-item {
        padding: 8px 0;
        font-size: 14px;
    }
    
    .button-group {
        flex-wrap: nowrap;
        gap: 4px;
    }
    
    .button-group button {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 60px;
    }
    
    /* タッチターゲットを大きく */
    .btn, .list-btn-red, .list-btn-green1, .list-btn-green2, .list-btn-blue {
        min-height: 32px;
        min-width: 60px;
        padding: 6px 8px;
    }
}

/* ===== 退店予定アラートのスタイル（新規追加） ===== */

/* 点滅アニメーションの定義 */
.退店間近 {
    /* CSSアニメーションがサポートされない環境用の固定色 */
    background-color: #fffacd;
    border-left: 4px solid #ffd700;
    
    /* アニメーションサポート環境用 */
    animation: dashPulseDashboard 1s ease-in-out infinite alternate;
}

.超過 {
    /* CSSアニメーションがサポートされない環境用の固定色 */
    background-color: #ffebee;
    border-left: 4px solid #f44336;
    
    /* アニメーションサポート環境用 */
    animation: dashPulseDashboard 0.5s ease-in-out infinite alternate;
}

/* アニメーションがサポートされない場合のフォールバック */
.visit-item.退店間近.is-blink {
    background-color: #fffacd !important;
}

.visit-item.超過.is-blink {
    background-color: #ffebee !important;
}

/* アニメーションキーフレーム */
@keyframes dashPulseDashboard {
    0% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* 古いAndroid用のベンダープレフィックス */
@-webkit-keyframes dashPulseDashboard {
    0% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* A60タブレット向けの特別なスタイル */
@media (max-width: 1024px) {
    .visit-status {
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
    }
    
    .visit-item {
        min-width: 600px; /* タブレットでは少し小さく */
    }
    
    .visit-item p {
        max-width: 60%; /* テキスト領域の最大幅を制限 */
    }
    
}

/* スクロールバーのスタイリング */
.visit-status::-webkit-scrollbar {
    height: 6px;
}

.visit-status::-webkit-scrollbar-thumb {
    background-color: #47b5a3;
    border-radius: 3px;
}

.visit-status::-webkit-scrollbar-track {
    background-color: #f1faf6;
}

/* ===== お問い合わせフォーム用 ===== */

.contact-page .section-title {
  text-align: center;    /* ★ 見出しを中央揃え */
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group.full {
  grid-column: span 2;
}
.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
}
.form-group.required label::after {
  content: " *";
  color: #dc2626; /* 赤系で必須マーク */
  font-weight: 700;
}
.form-group input,
.form-group textarea,
.form-group select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
}
.form-group textarea {
  min-height: 140px;
  resize: vertical;
}