/* 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;
}

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

.visit-status {
    background-color: #F1FAF6;
    border: 1px solid #47b5a3;
}

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

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

.order-item {
    border-bottom: 1px solid #82bded;
}

.visit-item {
    display:flex;                   /* 既に上で指定済みですが明示 */
    align-items:center;
    justify-content: space-between; /* 左：本文／右：ボタンを明確に分割 */
    gap:12px;
    padding:3px 0;                  /* 既存と同値 */
    border-bottom: 1px solid #47b5a3;
}

.order-item p{
  margin:0;
  flex:1;
}

/* 来客一覧：本文は1行省略で潰れないようにする */
.visit-item p{
  margin:0;
  flex:1 1 auto;
  min-width:0;               /* ← これが無いと和文が1文字ずつ縦折れします */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

.form-group {
    margin-bottom: 15px;
}

.form-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.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 {
    padding:2px 2px;
    margin: -2px;
    background-color: #D32F2F;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}

.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 {
    padding:2px 2px;
    margin: -2px;
    background-color: #218838;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}

.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 {
    padding:2px 2px;
    margin: -2px;
    background-color: #0b3d1c;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}

.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 {
    padding:2px 2px;
    margin: -2px;
    background-color: #1976D2;
    border:1px solid #050505;
    border-radius:4px;
    cursor:pointer;
}

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

.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);  /* 最小px、画面の90%、最大px */
    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;
}

.modal-body  {
    padding:12px;
}

.modal-footer{
    padding:8px 12px;
    border-top:1px solid #e5e5e5;
}

.modal-buttons{
    display:flex;
    gap:8px;
    justify-content:start;
}

.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;
}

.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;
}

.error-messages li {
    list-style-type: disc;
}

/* --- アクション列（th/td）だけ中央寄せ＆ボタン横並び --- */
.asuka-table th.col-actions,
.asuka-table td.col-actions {
    text-align: center !important;
    white-space: nowrap;  /* ボタン改行防止（任意） */
}

/* td自体をフレックス化して中身（a, form）を中央に寄せる */
.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;               /* 1行を維持（スマホは後述で縦積み） */
}

.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;
}

/* スマホは個数ブロックを下に縦積み */
@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 を流用。列幅を固定し、数量・小計は右寄せ＆改行防止 */
.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;           /* 商品名が長くても1行で省略 */
}

.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;  /* 既存 td と揃える */
}

/* 桁の縦ぶれ防止（必要な場合のみ） */
.asuka-table--order-confirm td.qty,
.asuka-table--order-confirm td.amount {
  font-variant-numeric: tabular-nums;
}

/* === フォーム横並びの標準レイアウト（共通） === */
.form-row--h {                    /* 既存 .form-row の水平版 */
  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 {           /* 既存 .form-buttons の修飾子 */
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;              /* PCで縦落ちさせない */
}

/* スマホ時のみ縦積み */
@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%;
}

/* components.css に追加：狭幅フォーム用ユーティリティ */
.container--sm { max-width: 600px; }   /* 400pxより少し余裕。必要なら数値調整 */

/* === 共通フォーム標準（クラス未指定の input/select/textarea にも適用） === */
.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;
}

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