/* ===== 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: auto; }
.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;
}
.nav-pill-minus{
  background:transparent !important;
  border:1px solid var(--c-minus)!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;
}


/* ===== Tables: horizontal scroll & no overlap ===== */
/* 横スクロール（一覧と同じ挙動に統一） */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* テーブルが潰れないように最低幅を確保（必要なら数値を上げる） */
.table-scroll table{
  min-width: 1100px;
}

/* 折り返し禁止（日時・控除後売上高などが折れない） */
.table-scroll th,
.table-scroll td{
  white-space: nowrap;
}

/* table-layout: fixed があると文字が被ったり潰れやすいので、スクロール表だけ auto にする */
/* .table-scroll .table-minimal{*/
/*   table-layout: auto;*/
/*}*/

/* ===== モバイルで表が縦積み崩れするのを防ぐ（最重要） ===== */

/* 見出し/セルを「1文字改行」させない */
.table-minimal th,
.table-minimal td{
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* 横スクロール時はテーブルを縮めない（一覧と同じ挙動） */
.table-scroll{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* bootstrap の table{width:100%} で潰れないようにする */
.table-scroll > table{
  width: max-content !important;
  min-width: 1100px; /* 列が多いので最低幅を持たせる（必要なら1200/1400へ） */
}

/* 横スクロール時に列が潰れて崩れるのを防ぐ（必要なテーブルに付与） */
.table-min-w{ min-width: 1100px; }

/* 折り返し防止したい列に付与 */
.nowrap{ white-space: nowrap !important; }


/* --- Salary UI (summary) --- */
.salary-card { border: 1px solid rgba(0,0,0,.06); }
.salary-name { text-decoration: none; }
.salary-name:hover { text-decoration: underline; }

.salary-total{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.3rem;
  line-height: 1.1;
}

.salary-lines{
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.salary-line{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .75rem;
  padding: .6rem .75rem;
  border-radius: .75rem;
  background: rgba(0,0,0,.03);
}

.salary-label{
  font-weight: 600;
  font-size: .95rem;
}

.salary-formula{
  grid-column: 1 / 2;
  color: rgba(0,0,0,.55);
  font-size: .85rem;
  line-height: 1.2;
}

.salary-amount{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .2px;
  white-space: nowrap;
}

.rate{
  font-weight: 700;
  color: rgba(0,0,0,.65);
}

/* スマホでも崩れにくく */
@media (max-width: 420px){
  .salary-line{
    grid-template-columns: 1fr;
  }
  .salary-amount{
    grid-column: 1 / 2;
    grid-row: auto;
    justify-self: end;
    margin-top: .25rem;
  }
}

/* ===== Salary Card Design ===== */

.salary-box{
  background: #f7f7f7;
  border: 2px solid #000;
  border-radius: 28px;
  padding: 28px;
}

.salary-header{
  margin-bottom: 18px;
}

.salary-name{
  font-size: 1.2rem;
  font-weight: 600;
}

.salary-name a{
  text-decoration: none;
  color: #000;
}

.salary-name a:hover{
  text-decoration: underline;
}

.salary-count{
  font-size: .85rem;
  color: #666;
  margin-top: 4px;
}

.salary-table{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.salary-row{
  display: grid;
  grid-template-columns: 1.4fr 1fr .6fr 1fr;
  align-items: center;
  font-size: .95rem;
}

.salary-head{
  font-weight: 600;
  color: #555;
}

.salary-row .bold{
  font-weight: 700;
}

.salary-total-box{
  margin-top: 18px;
  padding: 14px 18px;
  background: #e9ecef;   /* ← Bootstrap table-light と同系色 */
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
}

.salary-grand-total{
  font-size: 1.6rem;
  letter-spacing: 1px;
}

/* スマホ対応 */
@media (max-width: 768px){
  .salary-row{
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
  }

  .salary-row div:nth-child(3),
  .salary-row div:nth-child(4){
    text-align: right;
  }
}

/* =========================
   Salary summary (summary.html)
   ========================= */

.salary-card{
  border: 1px solid #e9ecef;
  border-radius: 24px;
  background: #fff;
  padding: 24px 22px;
}

.salary-name{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.salary-name a{
  text-decoration: underline;
}

.salary-meta{
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 14px;
}

.salary-grid{
  margin-top: 8px;
}

/* 4列（項目 / 売上 / 料率 / 報酬） */
.salary-row{
  display: grid;
  grid-template-columns: 1fr 140px 80px 140px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}

.salary-row > div:nth-child(2),
.salary-row > div:nth-child(3),
.salary-row > div:nth-child(4){
  text-align: right;
  white-space: nowrap;
}

.salary-head{
  color: #6c757d;
  font-size: 13px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}

.bold{ font-weight: 800; }

/* 合計（グレー帯） */
.salary-total-box{
  margin-top: 14px;
  background: #f1f3f5;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.salary-total-box > div:first-child{
  font-size: 22px;
  font-weight: 800;
}

.salary-grand-total{
  font-size: 28px;
  font-weight: 900;
  white-space: nowrap;
}

/* 小さめ画面は列幅を少し詰める */
@media (max-width: 576px){
  .salary-row{
    grid-template-columns: 1fr 110px 70px 120px;
    gap: 10px;
  }
  .salary-grand-total{ font-size: 24px; }
}

.salary-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ===== Fix: mobile table collapse ===== */
.table-scroll table,
.table-scroll .table-minimal{
  table-layout: auto !important;
}

.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll > table{
  width: max-content !important;
  min-width: 1500px;
}

.table-scroll > table{
  width: max-content !important;
  min-width: 1500px;
}


/* CSV 売上 */
.csv-sales{
  border:1px solid var(--c-plus) !important;
}

/* CSV 費用 */
.csv-expense{
  border:1px solid var(--c-minus) !important;
}

.csv-sales .btn-primary{
  background:var(--c-plus);
  border-color:var(--c-plus);
}

.csv-expense .btn-primary{
  background:var(--c-minus);
  border-color:var(--c-minus);
}