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;
}

/* =========================================================================
   FaceWeb 固有オーバーライド
   顔認証SDK(abicoco-sdk-face.js / -deco.js)が生成する
   顔認証・顔追加・顔撮影・再読み込みボタンは btn-warning（黄系）だが、
   ブランド配色（プライマリ青）に合わせて青系へ上書きする。
   SDK は Activity 配下にも複製がある共有ファイルのため JS は変更せず、
   ここ（FaceWeb 独自CSS）で .btn-warning を再定義する。
   色トークンは theme-variables.css の :root 変数を参照（読み込み順に依存しない）。
   ========================================================================= */
.btn-warning,
.btn-warning:visited {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.35);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  color: #fff;
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* 塗りボタン（primary/danger/warning）のラベルは SDK が <span> で入れるため、
   共通テーマの span 既定色（暗色）に負けて黒く見えてしまう。塗りボタン内の
   テキストは白で固定する（打刻ボタン「チェックイン」「弁当」等）。
   ※ .btn-secondary / .btn-outline-* は明色背景なので対象外（暗色文字のまま）。 */
.btn-primary, .btn-primary *,
.btn-danger, .btn-danger *,
.btn-warning, .btn-warning * {
  color: #fff;
}

/* -------------------------------------------------------------------------
   顔認証メニュー（SDK が .faceMenu / #faceMenu に注入する 顔認証・顔追加 等）の
   余白調整。既定は card p-2＋行間なしで窮屈なので、パディング/マージンを広げる。
   SDK(abicoco-sdk-face.js)は共有ファイルのため JS は変更せず CSS で調整する。
   ------------------------------------------------------------------------- */
.faceMenu.card {
  padding: 1.5rem !important; /* p-2(0.5rem) を上書き */
}

.faceMenu > .container,
#faceMenu > .container {
  padding-left: 0;
  padding-right: 0;
}

/* タイトル行と操作ボタン行の間隔 */
.faceMenu .row + .row,
#faceMenu .row + .row {
  margin-top: 1rem;
}

/* 操作ボタンをゆったりさせる */
.faceMenu .btn-lg,
#faceMenu .btn-lg {
  padding: 0.85rem 1.75rem;
}

/* ボタン内アイコンと文字の間隔 */
.faceMenu .btn i,
#faceMenu .btn i {
  margin-right: 0.5rem;
}