/* =====================================================================
   業務画面の詰め（静岡牛乳）— DADS公式のCSSの「あと」に読み込む1枚
   ---------------------------------------------------------------------
   DADS は初めて来た人がスマホで一度使う行政の手続き向け。
   うちの画面は同じ人が毎日、何十枚も流して見るので、公式のままだと大きく間延びする。
   2026-11-05、手書きの見本（伝票一覧_dads.html）と公式の部品だけの見本を並べて、
   ユーザーが「文字の大きさ・間の取り方・名前の太字は手書きの方が良い」と選んだ分だけをここで詰める。

   決まり
   - 公式のCSSは書き換えない。直すのはここだけ
   - 色・字はDADSの変数（--color-*）だけ。数値は rem（16px割り）、罫線だけ px
   - 1つずつ「なぜ」を書く。理由の書けない上書きは足さない
   - キーボードで動かしたときの公式のフォーカス枠（黒＋黄）は消さない
   - Jinja の include で取り込むことがあるので、このファイルに Jinja の記号を書かない
   ===================================================================== */


/* ---------- 色の試し（2026-11-06・試し中） ----------
   量販店の試作画面の赤・黄（#C8283A / #F2C230）を、公式の赤・黄の代わりに使ってみる。
   公式の部品は色をこの変数から引くので、変数の値だけ差し替える（部品のCSSは触らない）。
   やめるときはこの塊を消せば公式の色に戻る。
   - 赤：字・印・枠・札・ボタンの赤は全部 #C8283A（ユーザー指定、白地で 5.5）。薄い地の色（50〜200）だけはそのまま
   - 黄：字・印・枠・帯・縁の黄は全部 #F2C230（ユーザー指定、2026-11-06）。
     薄い地の色（50〜200）だけはそのまま。#F2C230 は白地で 1.7 なので、黄の字は薄く見える
*/
:root {
  --color-primitive-red-300: #c8283a;
  --color-primitive-red-400: #c8283a;
  --color-primitive-red-500: #c8283a;
  --color-primitive-red-600: #c8283a;
  --color-primitive-red-700: #c8283a;
  --color-primitive-red-800: #c8283a;
  --color-primitive-red-900: #c8283a;
  --color-primitive-red-1000: #c8283a;
  --color-primitive-red-1100: #c8283a;
  --color-primitive-red-1200: #c8283a;
  --color-primitive-yellow-300: #f2c230;
  --color-primitive-yellow-400: #f2c230;
  --color-primitive-yellow-500: #f2c230;
  --color-primitive-yellow-600: #f2c230;
  --color-primitive-yellow-700: #f2c230;
  --color-primitive-yellow-800: #f2c230;
  --color-primitive-yellow-900: #f2c230;
  --color-primitive-yellow-1000: #f2c230;
  --color-primitive-yellow-1100: #f2c230;
  --color-primitive-yellow-1200: #f2c230;
}


/* ---------- 表（dads-table data-size="dense"） ----------
   公式の dense は 1行の上下12px・左右16px。伝票を一画面に多く並べたいので上下8px・左右12px に。
   文字は中身16pxのまま、見出しだけ14pxにして中身と見分ける */
.dads-table[data-size="dense"] {
  --_padding: calc(8 / 16 * 1rem) calc(12 / 16 * 1rem);
  line-height: 1.4;
}
.dads-table__table :is(td, th) {
  vertical-align: middle;          /* 公式は baseline。チェック枠・札と字の高さがずれるので真ん中にそろえる */
}

/* 列見出し：公式は濃い灰（gray-100）＋黒の下線で重い。一覧を毎日見る画面では薄い灰に */
.dads-table__col-header {
  background-color: var(--color-neutral-solid-gray-50);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.5;
  white-space: nowrap;
}
.dads-table :last-of-type > .dads-table__col-header {
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
}

/* まとまりの見出し行（コースごと等）：th.dads-table__row-header に .g-group-row を付けて使う。
   公式の行見出しは灰の地＋右に黒の線（表の左端の見出し列のための形）。
   ここは区切りの小見出しなので、白地・14px太字・上に少し間をあけ、右の線は消す */
.dads-table .g-group-row > .dads-table__row-header {
  padding-top: calc(16 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  border-right: 0;
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
  font-size: calc(14 / 16 * 1rem);
  text-align: left;
}

/* 行の主役（得意先名・商品名）は太字：td に .g-key。目が名前を拾いやすいように */
.dads-table td.g-key {
  font-weight: bold;
  color: var(--color-neutral-solid-gray-900);
}
/* 番号・日付などの脇役：td に .g-sub（灰・14px）。.g-mono で等幅（伝票No.など） */
.dads-table td.g-sub {
  font-size: calc(14 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-600);
  white-space: nowrap;
}
.dads-table td.g-mono { font-family: var(--font-family-mono); }
/* 金額：td・th に .g-num（右寄せ・桁そろえ） */
.dads-table :is(td, th).g-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---------- 状態の札（dads-chip-label） ----------
   公式は16px・高さ32px。表の1行に収めると行が太るので14px・高さ24px、アイコンも小さく */
.dads-chip-label {
  min-height: calc(24 / 16 * 1rem);
  padding: calc(2 / 16 * 1rem) calc(7 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  font-size: calc(14 / 16 * 1rem);
  white-space: nowrap;
}
.dads-chip-label__icon {
  --_icon-size: calc(16 / 16 * 1rem);
  width: var(--_icon-size);
  height: var(--_icon-size);
  margin-right: calc(2 / 16 * 1rem);
}


/* ---------- お知らせ（dads-notification-banner） ----------
   公式は見出し20px・上下24〜32px・アイコン44pxで、本文とボタンが無くても高さ約100px（あると約245px）。
   画面の上の「未発行が6件」程度の知らせには大きすぎるので、1行（高さ約50px）に。
   左の色の帯（data-style="color-chip"）と組み合わせると目に入りやすい */
.dads-notification-banner {
  grid-template-columns: calc(24 / 16 * 1rem) 1fr auto;
  grid-template-rows: auto;
  padding: calc(10 / 16 * 1rem) calc(16 / 16 * 1rem);
  column-gap: calc(12 / 16 * 1rem);
  row-gap: calc(4 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
}
.dads-notification-banner[data-style="color-chip"] {
  padding-left: calc(20 / 16 * 1rem);
  box-shadow: inset calc(8 / 16 * 1rem) 0 0 0 var(--_color-chip-color);
}
.dads-notification-banner__icon {
  margin: 0;
  width: calc(24 / 16 * 1rem);
  height: calc(24 / 16 * 1rem);
  padding: 0;
}
.dads-notification-banner__heading-text {
  padding-top: 0;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.5;
}
.dads-notification-banner__body { font-size: calc(14 / 16 * 1rem); line-height: 1.5; }
@media (min-width: 48rem) {
  /* 公式は 48rem 以上でさらに大きくするので、そこも同じ値に戻す */
  .dads-notification-banner {
    grid-template-columns: calc(24 / 16 * 1rem) 1fr auto;
    padding: calc(10 / 16 * 1rem) calc(16 / 16 * 1rem);
    column-gap: calc(12 / 16 * 1rem);
  }
  .dads-notification-banner[data-style="color-chip"] {
    padding-left: calc(20 / 16 * 1rem);
    box-shadow: inset calc(8 / 16 * 1rem) 0 0 0 var(--_color-chip-color);
  }
  .dads-notification-banner__icon { margin: 0; width: calc(24 / 16 * 1rem); height: calc(24 / 16 * 1rem); }
  .dads-notification-banner__heading-text { padding-top: 0; font-size: calc(16 / 16 * 1rem); line-height: 1.5; }
}

/* 注意・エラーのお知らせ：左の太い帯は付けない（ユーザー指定、2026-11-06）。
   中のボタンの字は公式のまま（注意は黄、エラーは赤） */
.dads-notification-banner[data-type="warning"][data-style="color-chip"],
.dads-notification-banner[data-type="error"][data-style="color-chip"] {
  padding-left: calc(16 / 16 * 1rem);
  box-shadow: none;
}
/* 注意のお知らせの中の枠つきボタン：枠は黄のまま、枠の中の字は黒（ユーザー指定、2026-11-06）。
   公式は枠の色を字の色（currentcolor）から取るので、枠の色を別に指定する */
.dads-notification-banner[data-type="warning"] .dads-button[data-type="outline"] {
  border-color: var(--button-color);
  color: var(--color-neutral-solid-gray-900);
}
@media (hover: hover) {
  .dads-notification-banner[data-type="warning"] .dads-button[data-type="outline"]:hover {
    color: var(--color-neutral-black);
  }
}
.dads-notification-banner[data-type="warning"] .dads-button[data-type="outline"]:active {
  color: var(--color-neutral-black);
}

/* ---------- 説明リスト（dads-description-list） ----------
   公式は 項目名（太字）の下に中身を字下げ。右のパネルのような狭い所で行数が倍になるので、
   .g-inline を付けたときだけ「項目名｜中身」の横並びにする */
.dads-description-list.g-inline {
  grid-template-columns: 6.5em 1fr;
  gap: calc(4 / 16 * 1rem) calc(12 / 16 * 1rem);
  line-height: 1.5;
}
.dads-description-list.g-inline > .dads-description-list__item { display: contents; }
.dads-description-list.g-inline dt {
  font-weight: normal;
  font-size: calc(14 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-600);
  padding-top: calc(1 / 16 * 1rem);
}
.dads-description-list.g-inline dd { margin-left: 0; }


/* ---------- チェックボックス・ラジオのフォーカス ----------
   公式は :focus で枠を出すので、マウスで押しただけでも黒＋黄の枠が残る（「キモい」と言われた）。
   キーボードで動かしたとき（:focus-visible）は公式の枠のまま */
.dads-checkbox__input:focus:not(:focus-visible),
.dads-radio__input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ---------- 表の中の「□ 有効」のような名前つきチェック ----------
   公式は表のセルにチェックだけが入る形を想定し、セルいっぱいに広げて縦に並べる（grid）。
   名前がつくと名前が下の段に落ちてセルからはみ出し、表の枠に縦のスクロールバーが出ていた。
   名前つきのときだけ普通の横並びに戻す */
.dads-table td > .dads-checkbox:only-child:has(.dads-checkbox__label:not(:empty)),
.dads-table td > .dads-radio:only-child:has(.dads-radio__label:not(:empty)) {
  position: static;
  display: flex;
  width: fit-content;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

/* ---------- 入力欄・選ぶ欄のフォーカス ----------
   入力欄はマウスで押しても :focus-visible になるので、公式の黒4px＋黄の枠が打つたびに出る（「すごいいや」と言われた）。
   業務画面では入力欄を行き来するのが普段の操作なので、枠を黒の2pxに太らせるだけにする（色は黒でいい、2026-11-06）。
   ボタン・リンク・タブなど押すものは公式の枠のまま */
.dads-input-text__input:focus-visible,
.dads-input-text__input:focus-visible:not(:read-only):hover,
.dads-select__select:focus-visible,
.dads-select__select:focus-visible:hover,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-neutral-black);
  box-shadow: 0 0 0 calc(1 / 16 * 1rem) var(--color-neutral-black);
}


/* ---------- 表の中の入力欄・選ぶ欄（data-size="xs"） ----------
   公式の入力欄は sm でも高さ40px・左右16px。伝票の明細のように表の1行ごとに入力欄が並ぶと
   行が太り一画面に入らないので、表の中だけ高さ32px・左右8px の xs を足す（公式に無い大きさ） */
.dads-input-text__input[data-size="xs"] {
  height: calc(32 / 16 * 1rem);
  padding: 0 calc(8 / 16 * 1rem);
  border-radius: calc(6 / 16 * 1rem);
}
.dads-select__select[data-size="xs"] {
  height: calc(32 / 16 * 1rem);
  padding-left: calc(8 / 16 * 1rem);
  padding-right: calc(28 / 16 * 1rem);
  border-radius: calc(6 / 16 * 1rem);
}
.dads-select__select[data-size="xs"] + .dads-select__chevron { right: calc(8 / 16 * 1rem); }
/* 数の入力は右寄せ・桁そろえ：input に .g-num */
.dads-input-text__input.g-num { text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- 取り消し・削除のボタン（.g-danger） ----------
   公式のボタンは色の種類を持たない（色は key 色だけ）。取り消しのように戻しにくい操作だけ、
   枠・文字ボタンの色を DADS の error 色にして、ふつうの操作と見分ける */
.dads-button.g-danger {
  --button-color: var(--color-semantic-error-1);
  --button-hover-color: var(--color-semantic-error-2);
  --button-active-color: var(--color-semantic-error-2);
  --button-outline-hover-bg-color: var(--color-primitive-red-50);
  --button-outline-active-bg-color: var(--color-primitive-red-100);
}