/* ----- 共通 ----------------------------------- */
:root {
  --header-h: 56px;
}

@media (min-width: 992px) {
  :root {
    --header-h: 60px;
  }
}

body {
  padding-top: var(--header-h);
}

.navbar-text {
  white-space: nowrap;
}

.navbar-collapse.collapse.show {
  transition: height .2s ease;
}

.bi {
  vertical-align: -.125em;
}

.hidden {
  display: none !important;
}

/* ----- ログインフォーム ----------------------------------- */
.login-card {
  width: 100%;
  max-width: 420px;
}

/* ----- 出勤退勤ボタン ----------------------------------- */
.pressable {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
  transition: transform .05s ease-in, box-shadow .05s ease-in;
}

.pressable:active {
  transform: translateY(2px) scale(.97);
  box-shadow: 0 .15rem .45rem rgba(0, 0, 0, .25) inset;
}

.pressable:focus-visible {
  outline: 4px solid rgba(0, 123, 255, .5);
  outline-offset: 2px;
}

.btn-workstart {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

.btn-workstart:hover,
.btn-workstart:focus {
  background-color: #157347;
  border-color: #146c43;
  color: #fff;
}

.btn-workstart:active {
  background-color: #146c43;
  border-color: #13653f;
  color: #fff;
}

.btn-workend {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.btn-workend:hover,
.btn-workend:focus {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}

.btn-workend:active {
  background-color: #b02a37;
  border-color: #a52834;
  color: #fff;
}