/* R1 の作り直し（more）2026-10-08。app.css の後に読む
   経費（c1・c2）・ダッシュボード（c5）・ギャラリー（c6）・顧客リクエスト（d1・d2）・設定（f4）・音声の確認 */

/* ---------- 共通：入力の 2 列・セレクトの印 ---------- */
.exp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.exp-select select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.exp-select::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--t2); border-bottom: 1.5px solid var(--t2); transform: rotate(45deg); pointer-events: none;
}
.ui-input-wrap input[type="date"] { -webkit-appearance: none; appearance: none; color: var(--ink); }
.ui-input-wrap select { color: var(--ink); }
.modal-header-actions button svg { display: block; }

/* ---------- 経費（c1） ---------- */
#expense-list-body .exp-total { font-variant-numeric: tabular-nums; }
.exp-kpis { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.exp-kpis::-webkit-scrollbar { display: none; }
.exp-kpis .ui-kpi { flex: 0 0 calc((100% - 16px) / 3); min-width: 108px; }
.exp-kpis .ui-kpi-v { font-size: 20px; }
.exp-row .ui-row-end { max-width: 48%; }
#expense-list-body .ui-btns .ui-btn:not(.pri) { background: var(--s1); color: var(--ink); }
#expense-list-body .ui-btns .ui-btn:disabled { background: var(--s2); color: var(--t3); }

/* 記録シート：経費（c2） */
.exp-receipt { margin: 4px 20px 0; }
.exp-receipt-row { margin: 0; cursor: pointer; }
.exp-receipt[hidden] { display: none; }
.exp-receipt .receipt-scan-status { padding: 4px 0 0; }
.exp-receipt .receipt-scan-status:empty { display: none; }
.exp-cat-chips { padding-top: 12px; padding-bottom: 4px; }
#expense-add-item-form .ui-sec { padding-bottom: 10px; }
#expense-create-form { padding-bottom: 8px; }

/* ---------- ダッシュボード（c5） ---------- */
.dash-kpis .ui-kpi { padding: 12px 14px 14px; }
.dash-kpis .ui-kpi-v { font-size: 24px; }
.dash-bars .ui-bars-row { grid-template-columns: 84px minmax(0, 1fr) 86px; }
.dash-bars .ui-bars-row > :first-child { color: var(--ink); }
.dash-bars .ui-bars-track { height: 6px; border-radius: 3px; }
.dash-bars .ui-bars-fill { border-radius: 3px; }
#purchase-dashboard-body .ui-note { padding-top: 4px; }

/* ---------- ギャラリー（c6） ---------- */
.sel-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 220px; }
.sel-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-chip-c { font-size: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.sel-chip select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; cursor: pointer; }
.gallery-r1 { padding-top: 12px; row-gap: 12px; }
.gallery-r1 .ui-grid-item { color: var(--ink); font: inherit; }
.gallery-r1 .ui-grid-item:active .ui-grid-ph { transform: scale(.97); }
.gallery-r1 .ui-grid-ph { transition: transform var(--t-press); }
.gallery-detail-grid { padding-top: 6px; }
.gallery-detail-grid .ui-grid-ph:only-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* ---------- 顧客リクエスト（d1・d2） ---------- */
#customer-request-body .ui-chips { padding-bottom: 6px; }
.cr-row { width: 100%; }
.cr-row .cr-note { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#cr-form-body .ui-sec { padding-bottom: 10px; }
#cr-form-body textarea { min-height: 50px; }

/* ---------- 設定（f4） ---------- */
.set-row { position: relative; cursor: pointer; }
.set-row .ui-row-end { flex-direction: row; align-items: center; gap: 6px; }
.set-chev { font-weight: 600; }
/* 既定の通貨：行いっぱいに透明のセレクトを重ねる（値は #settings-currency-value に出す） */
.set-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.set-row:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.set-budget input {
  width: 128px; border: 0; background: transparent; padding: 6px 0; text-align: right; outline: none;
  font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
.set-budget input::placeholder { color: var(--t2); font-weight: 500; }
.set-budget:focus-within input { border-bottom: 1.5px solid var(--ink); }

/* 音声の確認：値は折り返さない */
.vc-nowrap { white-space: nowrap; }
#voice-check-body .ui-lead.mark svg { display: block; }
#voice-check-body .ui-lead.mark:not(.ok):not(.err) { color: var(--t2); }

/* ---------- PC（1024px〜） ---------- */
@media (min-width: 1024px) {
  .exp-kpis .ui-kpi { flex-basis: 150px; }
  .gallery-r1 { grid-template-columns: repeat(4, 1fr); }
}