/* ===== Global font (all pages) ===== */
body{
  font-family: "Meiryo","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
input,select,textarea,button{ font-family: inherit; }

:root{
  --card-radius: 14px;

  /* Color Tokens */
  --c-plus:  #ffc1cc; /* 加算 */
  --c-minus: #c7ddd8; /* 控除 */
  --c-total: #996c4a; /* 会計 */
}

.app-card{ border-radius: var(--card-radius); }
.app-shadow{ box-shadow: 0 10px 30px rgba(0,0,0,.06); }

/* 数字の桁揃え（等幅フォントは使わない） */
.num{ font-variant-numeric: tabular-nums; }

/* 合計表示用input */
.sumbox{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: .5rem;
}

/* カード内で「合計」を最下部に固定する */
.card-stack{
  display:flex;
  flex-direction:column;
  height:100%;
}
.card-stack .stack-grow{ flex:1 1 auto; }
.card-stack .stack-sum{ margin-top:auto; }

/* 金額エラー時（控除 > 売上） */
.sum-error{
  background-color:#fdecec !important;
  border-color:#dc3545 !important;
  color:#b02a37;
}
.sum-error-text{
  color:#dc3545;
  font-weight:600;
}

/* ===== 一覧 / 明細（ミニマル） ===== */
.table-minimal{ font-size:0.88rem; }
.table-minimal > :not(caption) > * > *{ border-bottom-color: rgba(0,0,0,0.06); }
.table-minimal thead th{
  border-bottom-color: rgba(0,0,0,0.10);
  font-weight:600;
  color:#111;
}
.table-minimal tbody tr:hover{ background: rgba(0,0,0,0.02); }

/* ヘッダー色分け */
.th-plus{  color:#d85b76; font-weight:700; }
.th-minus{ color:#2f6f62; font-weight:700; }
.th-total{ color:var(--c-total); font-weight:800; }

/* ブロックの区切り */
.table thead th.th-sep{ border-right:1px solid rgba(0,0,0,0.10) !important; }
.table tbody td.th-sep{ border-right:1px solid rgba(0,0,0,0.08) !important; }

/* 一覧の数字は「文字色だけ」 */
.pill{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  min-width:auto !important;
}
.pill-sales{ color:#d85b76 !important; }
.pill-ded{   color:#2f6f62 !important; }
.pill-total{ color:var(--c-total) !important; }
.pill-strong{ font-weight:800 !important; }

/* メモ列：長文でも表を崩さない */
.table-minimal{ table-layout: fixed; }
.note-cell{
  max-width:260px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.note-link{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-decoration:none;
  border-bottom:1px dotted rgba(0,0,0,0.35);
}
.note-link:hover{ border-bottom-style:solid; }

/* ===== Badges (入力ページの +項目 / -項目) ===== */
.badge-plus{
  background:transparent !important;
  border:1px solid var(--c-plus) !important;
  color:#2b1b12 !important;
  font-weight:600;
}
.badge-minus{
  background:transparent !important;
  border:1px solid var(--c-minus) !important;
  color:#2b1b12 !important;
  font-weight:600;
}
.badge-total{
  background:transparent !important;
  border:1px solid var(--c-total) !important;
  color:#2b1b12 !important;
  font-weight:600;
}

/* ===== Header Nav ===== */
.nav-pill-plus{
  background:transparent !important;
  border:1px solid var(--c-plus) !important;
  color:#2b1b12 !important;
}
.nav-pill-total{
  background:transparent !important;
  border:1px solid var(--c-total) !important;
  color:#2b1b12 !important;
}
.navbar .btn{ font-size:0.9rem; }

/* 入力：%入力グループ幅 */
.discount-percent-group{ width:120px; }

.stat-card{
  padding: 14px 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: rgba(0,0,0,.015);
}
.stat-label{
  font-size: 12px;
  color: #7a7a7a;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.stat-value{
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* 既存の色味に合わせて文字色だけ付ける（pillの色を流用したいなら調整） */
.pill-sales-text{ color: #d24b5a; }
.pill-ded-text{ color: #2f7d6d; }
.pill-total-text{ color: #a86a2a; }


.breakdown td{
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: middle;
}
.breakdown .pill{
  font-variant-numeric: tabular-nums;
}



.breakdown .amount-col{
  width: 120px;              /* ここを 100〜140pxで調整 */
}

.breakdown td.text-end{
  font-variant-numeric: tabular-nums;
}
.amount-col{
  width: 110px;          /* 90〜140で好み調整 */
  text-align: right;
  display: inline-block; /* spanでも幅が効くように */
  font-variant-numeric: tabular-nums;
}
.group-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: #fff;
}

.group-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.group-title{
  font-size: 16px;
  color: #080808;
  letter-spacing: .03em;
}

.group-total{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.group-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 12px 0 10px;
}

.group-subtitle{
  font-size: 11px;
  color: #8a8a8a;
  margin-bottom: 6px;
}

.group-rows{
  display: grid;
  gap: 6px;
}

.group-row{
  display: grid;
  grid-template-columns: 1fr 110px; /* ←金額列固定で“内訳感” */
  align-items: center;
}

.group-row .label{
  font-size: 13px;
  color: #555;
}

.group-row .value{
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* カテゴリごとの“ニュアンス色”（既存のpill色に寄せてもOK） */
.group-sales .group-total{ color: #d24b5a; }
.group-ded   .group-total{ color: #2f7d6d; }
.group-total .group-total{ color: #a86a2a; }

/* list_detail の No列を細くする */
.no-col{
  width: 42px;              /* ここは 32〜50px で好み調整OK */
  white-space: nowrap;
}

/* 入力ページのセクションを色分け（薄く上品） */
.panel-plus{
  background: rgba(255, 193, 204, .14);   /* --c-plus ベース */
  border: 1px solid rgba(255, 193, 204, .35);
  border-left: 6px solid var(--c-plus);
}
.panel-minus{
  background: rgba(199, 221, 216, .18);   /* --c-minus ベース */
  border: 1px solid rgba(199, 221, 216, .45);
  border-left: 6px solid var(--c-minus);
}
.panel-total{
  background: rgba(153, 108, 74, .06);    /* --c-total ベース */
  border: 1px solid rgba(153, 108, 74, .20);
  border-left: 6px solid var(--c-total);
}

/* 見出しの強調（余計な派手さは出さない） */
.panel-title{
  display:flex; align-items:center; justify-content:space-between;
  font-weight: 700;
}
.panel-chip{
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
}

/* 金額の末尾に「円」を付ける（表示だけ） */
.yen::after{
  content: "円";
  margin-left: 2px;
  font-size: 0.85em;
  color: rgba(0,0,0,0.55);
  font-weight: 500;
}

/* ===== 円を入力欄に重ねる（おしゃれ版） ===== */
.money-wrap{
  position: relative;
}

.money-wrap .money{
  padding-right: 2.2rem; /* 円の分だけ余白 */
}

.money-wrap::after{
  content: "円";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  color: rgba(0,0,0,0.45);
  pointer-events: none; /* クリック邪魔しない */
  line-height: 1;
}