/* =========================================================
   担当D：販売・会計専用（pos / orders / quotes / invoices / receipts / payments / plans …）
   共通部品（base.css）に無い最小限の表現だけを sm-d- 接頭辞で定義する。色は必ずトークン。
   ========================================================= */

/* ── 小さな指標の並び（カード上部） ── */
.sm-d-stats { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.sm-d-stats > button, .sm-d-stats > div { flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px; padding: 12px var(--sp-5); border: 0; border-left: 1px solid var(--line); background: none; text-align: left; color: var(--ink); min-width: 0; font: inherit; }
.sm-d-stats > :first-child { border-left: 0; }
.sm-d-stats > button { cursor: pointer; }
.sm-d-stats > button:hover { background: var(--surface-2); }
.sm-d-stats > button.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
.sm-d-stats span { font-size: var(--fs-sm); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.sm-d-stats strong { font-family: var(--font-num); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.sm-d-stats strong small { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.sm-d-stats .is-warn strong { color: var(--warn); } .sm-d-stats .is-danger strong { color: var(--danger); } .sm-d-stats .is-ok strong { color: var(--ok); }
@media (max-width: 768px) { .sm-d-stats > button, .sm-d-stats > div { flex-basis: 45%; border-left: 0; border-top: 1px solid var(--line); } .sm-d-stats > :nth-child(-n+2) { border-top: 0; } }

.sm-d-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.sm-d-sub { display: block; font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.sm-d-docs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sm-d-docs a { font-size: var(--fs-xs); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sm-d-docs a:hover { border-color: var(--accent); color: var(--accent); }

/* ── 明細エディタ ── */
.sm-d-items { width: 100%; border-collapse: collapse; }
.sm-d-items th { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sm-d-items td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sm-d-items .is-num { text-align: right; }
.sm-d-items input, .sm-d-items select { width: 100%; min-width: 0; }
.sm-d-items .sm-d-col-name { min-width: 200px; }
.sm-d-items .sm-d-col-qty { width: 72px; } .sm-d-items .sm-d-col-price { width: 116px; } .sm-d-items .sm-d-col-disc { width: 96px; } .sm-d-items .sm-d-col-rate { width: 84px; } .sm-d-items .sm-d-col-sub { width: 110px; } .sm-d-items .sm-d-col-act { width: 40px; }
.sm-d-items-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.sm-d-learners { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.sm-d-learners .sm-chip { height: 22px; font-size: var(--fs-xs); }
.sm-d-totals { margin-left: auto; width: min(360px, 100%); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: var(--fs-sm); }
.sm-d-totals dt { color: var(--ink-2); } .sm-d-totals dd { margin: 0; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.sm-d-totals .is-grand { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); border-top: 1px solid var(--line-strong); padding-top: 6px; }
@media (max-width: 768px) {
  .sm-d-items thead { display: none; }
  .sm-d-items tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
  .sm-d-items td { border: 0; padding: 0; }
  .sm-d-items td.sm-d-col-name { grid-column: 1 / -1; }
  .sm-d-items td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--ink-3); }
}

/* ── 編集ページ（課金詳細・見積詳細）：本文＋右の要約 ── */
.sm-d-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; }
.sm-d-edit__side { position: sticky; top: calc(var(--sp-6) + 96px); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 1100px) { .sm-d-edit { grid-template-columns: 1fr; } .sm-d-edit__side { position: static; } }

/* ── POS ── */
.sm-d-pos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-5); align-items: start; }
.sm-d-pos__cart { position: sticky; top: calc(var(--sp-6) + 96px); }
@media (max-width: 1100px) { .sm-d-pos { grid-template-columns: 1fr; } .sm-d-pos__cart { position: static; } }
.sm-d-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.sm-d-product { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 112px; font: inherit; transition: border-color var(--dur), background var(--dur); }
.sm-d-product:hover { border-color: var(--accent); }
.sm-d-product:active { background: var(--accent-soft); }
.sm-d-product:disabled { opacity: .5; cursor: not-allowed; }
.sm-d-product__kind { font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.sm-d-product__name { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sm-d-product__price { margin-top: auto; font-family: var(--font-num); font-weight: 700; font-size: var(--fs-md); }
.sm-d-product__stock { position: absolute; right: 10px; top: 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.sm-d-product__stock.is-low { color: var(--warn); font-weight: 600; }
.sm-d-cart-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.sm-d-cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px var(--sp-5); border-top: 1px solid var(--line); }
.sm-d-cart-row:first-child { border-top: 0; }
.sm-d-cart-row__name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sm-d-cart-row__sub { font-size: var(--fs-sm); color: var(--ink-3); }
.sm-d-cart-row__amt { font-family: var(--font-num); font-weight: 600; text-align: right; }
.sm-d-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }
.sm-d-qty button { border: 0; background: var(--surface-2); width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; }
.sm-d-qty span { min-width: 30px; text-align: center; font-family: var(--font-num); }
.sm-d-cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px var(--sp-5); border-top: 1px solid var(--line); }
.sm-d-cart-total strong { font-family: var(--font-num); font-size: 26px; font-weight: 700; }
.sm-d-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sm-d-keypad button { height: 48px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-2); font-family: var(--font-num); font-size: 18px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sm-d-keypad button:hover { background: var(--surface-2); }
.sm-d-keypad button:active { background: var(--accent-soft); }
.sm-d-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-d-display { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface-2); }
.sm-d-display strong { font-family: var(--font-num); font-size: 28px; font-weight: 700; }
.sm-d-display.is-change strong { color: var(--ok); }
.sm-d-display.is-short strong { color: var(--danger); }
.sm-d-register { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 10px var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); margin-bottom: var(--sp-4); }
.sm-d-register .sm-dot { margin-right: 2px; }

/* ── プラン ── */
.sm-d-plan-courses { display: flex; flex-wrap: wrap; gap: 4px; }
.sm-d-course-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
.sm-d-course-pick:first-child { border-top: 0; }
.sm-d-pick-list { border: 1px solid var(--line); border-radius: var(--r-3); max-height: 320px; overflow-y: auto; background: var(--surface); }

/* ── メールプレビュー ── */
.sm-d-mail { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); padding: 12px 14px; white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.7; max-height: 320px; overflow-y: auto; }
.sm-d-mail__subject { font-weight: 600; margin-bottom: 6px; white-space: normal; }

/* ── ヘルプ（使い方） ── */
.sm-d-help ol { padding-left: 1.4em; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sm-d-help li strong { display: block; }
.sm-d-help .sm-panel { margin-top: var(--sp-4); }

/* ── 領収書設定のプレビュー ── */
.sm-d-preview { border: 1px solid var(--line); border-radius: var(--r-3); background: #fff; color: #1a1a1a; padding: 16px; font-size: 11px; line-height: 1.6; overflow: hidden; }
.sm-d-preview__bar { height: 5px; margin: -16px -16px 12px; }
.sm-d-preview h4 { font-size: 16px; letter-spacing: .25em; margin: 0 0 6px; font-weight: 600; }
.sm-d-preview__row { display: flex; justify-content: space-between; gap: 12px; }
.sm-d-preview__issuer { text-align: right; position: relative; }
.sm-d-preview__seal { position: absolute; right: 0; top: -4px; width: 44px; height: 44px; object-fit: contain; opacity: .85; }
.sm-d-preview__total { margin: 10px 0; padding: 6px 10px; background: #f5f5f2; font-size: 14px; font-weight: 700; border-left: 3px solid currentColor; }
.sm-d-preview__foot { margin-top: 10px; color: #666; border-top: 1px solid #e3e1dc; padding-top: 6px; }

.sm-d-inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sm-d-inline-form .sm-field { flex: 1 1 140px; min-width: 0; }
.sm-d-product:has(.sm-d-product__stock) .sm-d-product__kind { padding-right: 56px; }