html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* 列が多い照会表。折り返さずに横スクロールさせる。
   幅を固定すると列数の多い表で商品名だけが潰れるため、nowrap で内容に合わせる。 */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

/* エラーが無いときの検証サマリ。alert の枠だけが赤く出るのを防ぐ。
   エラーがあると ASP.NET Core が validation-summary-errors に付け替えるので表示される。 */
.validation-summary-valid {
    display: none;
}

/* ファンクションキーの表示(画面の下)。shortcuts.js が作る。
   マウスを使わずに操作できるよう、今の画面で使えるキーを常に出しておく。 */
.fn-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    background: #212529;
    color: #dee2e6;
    font-size: .75rem;
    overflow-x: auto;
}

.fn-key {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .05rem .4rem;
    border: 1px solid #495057;
    border-radius: .2rem;
    background: #343a40;
    color: #f8f9fa;
    white-space: nowrap;
}

.fn-key:hover { background: #495057; }
.fn-key .fn-num { color: #9ec5fe; font-weight: 700; }
.fn-key.fn-empty { opacity: .35; }
.fn-note { margin-left: auto; padding-left: 1rem; opacity: .75; white-space: nowrap; }

/* バーの分だけ本文の下に余白を作る */
body.has-fn-bar { margin-bottom: 0; padding-bottom: 2.4rem; }

@media (max-width: 767px) {
    .fn-note { display: none; }
}

@media print {
    .fn-bar { display: none; }
}

/* ------------------------------------------------------------------------
   伝票入力の固定画面(標準様式。以前のシステムの売上入力に合わせた見た目)
   見出しの欄は青、明細の見出しは緑、明細は白と薄い黄色の交互。
   明細は5行ぶんの高さに固定し、それを超えたら枠の中でスクロールする。
   ------------------------------------------------------------------------ */
.slip-screen { font-size: .82rem; }
.slip-screen .form-control,
.slip-screen .form-select { font-size: .82rem; padding: .1rem .3rem; min-height: 0; height: 1.6rem; border-radius: 0; }
.slip-screen .form-select { padding-right: 1.4rem; background-position: right .25rem center; }
.slip-screen .slip-toolbar { display: flex; gap: .25rem; align-items: center; padding: .25rem; background: #f1f3f5;
                             border: 1px solid #adb5bd; margin-bottom: .4rem; }
.slip-screen .slip-toolbar .btn { font-size: .8rem; padding: .15rem .6rem; border-radius: 0; }

.slip-head { width: 100%; border-collapse: collapse; margin-bottom: .4rem; }
.slip-head th { background: #1f4e79; color: #fff; font-weight: normal; white-space: nowrap; padding: .1rem .4rem;
                border: 1px solid #fff; width: 6.5rem; }
.slip-head td { padding: .1rem .2rem; border: 1px solid #dee2e6; }
.slip-head .slip-fixed { display: inline-block; background: #fff3cd; border: 1px solid #adb5bd; padding: 0 .5rem; min-width: 5rem; }

.slip-grid { height: calc(2.05rem + 5 * 3.45rem + 8px); overflow-y: auto; border: 1px solid #6c757d; background: #fff; }
.slip-grid table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.slip-grid thead th { position: sticky; top: 0; z-index: 1; background: #2e7d5b; color: #fff; font-weight: normal;
                      text-align: center; padding: 0 .2rem; border: 1px solid #fff; line-height: 1.05rem; height: 2.05rem; }
.slip-grid tbody tr { height: 3.45rem; }
.slip-grid tbody tr:nth-child(even) { background: #fffbe6; }
.slip-grid tbody td { border: 1px solid #ced4da; padding: .05rem .15rem; vertical-align: middle; }
.slip-grid tbody td > * + * { margin-top: .1rem; }
.slip-grid .slip-seq { text-align: center; color: #1f4e79; font-weight: 700; }
.slip-grid .slip-num { text-align: right; padding-right: .3rem; }
.slip-grid .slip-sub { color: #6c757d; font-size: .75rem; }

.slip-foot { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.slip-foot th { background: #1f4e79; color: #fff; font-weight: normal; white-space: nowrap; padding: .1rem .4rem; border: 1px solid #fff; }
.slip-foot td { border: 1px solid #ced4da; padding: .1rem .4rem; }
.slip-foot td.slip-num { text-align: right; min-width: 7rem; background: #f8f9fa; }

/* 一覧の固定画面(請求書発行など)。1行1段で、画面の残りの高さいっぱいにしてスクロールする */
.slip-grid.slip-list { height: auto; min-height: 16rem; max-height: calc(100vh - 21rem); }
.slip-grid.slip-list tbody tr { height: 1.7rem; }
.slip-grid.slip-list tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-grid.slip-list thead th { height: 1.6rem; }

/* メニュー画面のボタン。業務ごとに薄い色を敷いてボタンらしく見せる(見出しは少し濃く、マウスを乗せるとさらに濃く) */
.menu-card { --menu-bg: #eef4fb; --menu-head: #d6e4f5; --menu-hover: #dbe8f7; --menu-line: #c9d9ee; }
.menu-card.menu-purchase { --menu-bg: #eef7f1; --menu-head: #d3ecdb; --menu-hover: #dcefe2; --menu-line: #c4e2cd; }
.menu-card.menu-stock    { --menu-bg: #fdf5e9; --menu-head: #f7e3c4; --menu-hover: #f9ead2; --menu-line: #eedcbd; }
.menu-card.menu-master   { --menu-bg: #f4f1fa; --menu-head: #e2dbf1; --menu-hover: #e8e2f4; --menu-line: #d8cfeb; }
.menu-card { border-color: var(--menu-line); background: var(--menu-bg); }
.menu-card .card-header { background: var(--menu-head); font-weight: 700; border-bottom-color: var(--menu-line); }
.menu-card .list-group-item { background: var(--menu-bg); border-color: var(--menu-line); }
.menu-card .list-group-item-action:hover,
.menu-card .list-group-item-action:focus { background: var(--menu-hover); color: inherit; }

/* 画面コード(お問い合わせのときに画面を特定するための番号)。見出しの前に出す */
.screen-code { display: inline-block; font-family: Consolas, "BIZ UDGothic", monospace; font-size: .8em; font-weight: 700;
               color: #fff; background: #495057; border-radius: .2rem; padding: .05rem .4rem; margin-right: .5rem;
               vertical-align: middle; letter-spacing: .03em; }

/* エントリ系の画面の HELP 行(entry.js)。ファンクションキーの帯の上に固定し、入力中の欄の説明を出す。
   入力規約に合わないときは赤字(.help-error) */
.help-line { position: fixed; left: 0; right: 0; bottom: 1.95rem; z-index: 1029; display: flex; align-items: center; gap: .6rem;
             min-height: 1.9rem; padding: .2rem .75rem; background: #fffbe6; border-top: 1px solid #e0c870;
             font-size: .82rem; color: #333; }
.help-line .help-tag { flex: none; font-weight: 700; font-size: .72rem; color: #fff; background: #1f4e79; border-radius: .2rem; padding: .05rem .4rem; }
.help-line.help-error { background: #fdecea; border-top-color: #e57373; color: #c62828; font-weight: 700; }
.help-line.help-error .help-tag { background: #c62828; }
body:has(.help-line) { padding-bottom: 4.6rem; }

/* 郵便番号の住所検索: 複数の住所は欄の下に一覧で出す */
.zip-field { position: relative; }
.zip-choices { position: absolute; z-index: 20; min-width: 26rem; max-width: 90vw; max-height: 16rem; overflow-y: auto;
               margin-top: .25rem; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .15); }

/* 商品マスタに無い図番(登録時に商品マスタへ足す) */
input.new-code { border-color: #e0a100; background-color: #fff8e1; }