html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    /* 一覧性を高めるため、Bootstrap標準より全体を少し小さく表示する。 */
    font-size: 15px;
  }
}

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* 組織一覧の操作欄を1行に保ち、縦方向の一覧性を優先する。 */
.organization-name-input { min-width: 10rem; }
.organization-reason-input { min-width: 9rem; }

/* 操作できる要素を見分けやすくし、マウス移動時の現在位置を示す。 */
details > summary {
  cursor: pointer;
  padding: .4rem .6rem;
  border-radius: .375rem;
  transition: background-color .15s ease-in-out;
}

details > summary:hover,
details > summary:focus-visible {
  background-color: rgba(13, 110, 253, .10);
}

.table-hover > tbody > tr {
  transition: background-color .15s ease-in-out;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(13, 110, 253, .12);
}

.form-select,
.form-control,
.form-check-input,
button,
.btn,
a.nav-link {
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select:not(:disabled):hover,
.form-control:not(:disabled):not([readonly]):hover {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12);
}

.form-select:not(:disabled):hover {
  cursor: pointer;
}

/* チェックボックスとラジオボタンも、マウス操作できる状態を視覚的に示す。 */
.form-check-input:not(:disabled):hover {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .16);
  cursor: pointer;
}

/* Navbarのメニューをボタンとして認識しやすくし、プルダウン内でも現在位置を示す。 */
.navbar .navbar-nav .nav-link {
  border-radius: .375rem;
  margin-inline: .1rem;
  padding-inline: .65rem;
  border: 0;
  background-color: transparent;
}

.navbar .navbar-nav a.nav-link:hover,
.navbar .navbar-nav a.nav-link:focus-visible,
.navbar .navbar-nav button.nav-link:hover,
.navbar .navbar-nav button.nav-link:focus-visible {
  color: #084298 !important;
  background-color: rgba(13, 110, 253, .12);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .18);
  text-decoration: none;
}

.navbar .navbar-brand {
  min-width: 0;
  border-radius: .375rem;
  padding: .35rem .55rem;
  transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.navbar-brand-logo {
  max-height: 36px;
  max-width: 120px;
  object-fit: contain;
}

.navbar-brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.navbar-brand-system-name {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.navbar-brand-header-text {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-secondary-color);
  font-size: .75rem;
}

.navbar .dropdown-item {
  transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
  color: #084298;
  background-color: rgba(13, 110, 253, .12);
  box-shadow: inset .2rem 0 0 #0d6efd;
  outline: 0;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus-visible {
  background-color: rgba(13, 110, 253, .10);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .15);
}

@media (prefers-reduced-motion: reduce) {
  details > summary,
  .table-hover > tbody > tr,
  .form-select,
  .form-control,
  .form-check-input,
  button,
  .btn,
  a.nav-link {
    transition: none;
  }

  .navbar .navbar-brand {
    transition: none;
  }

  .navbar .dropdown-item {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand-system-name,
  .navbar-brand-header-text {
    max-width: 14rem;
  }

  .navbar-brand-logo {
    max-width: 72px;
  }
}

/* 狭い画面のバックアップ履歴を、キーボードでも横スクロールできることを示す。 */
.backup-history:hover,
.backup-history:focus-visible,
/* URL共有診断もキーボードで横スクロールできる対象だと示す。 */
.urlshare-history:hover,
.urlshare-history:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* アドレス帳は狭い画面でも列を読める幅を保ち、表内だけ横スクロールする。 */
.address-book-table { min-width: 980px; }
/* 長文原稿の改行と狭い画面での宛先一覧を保持する。 */
.mass-mail-body { white-space: pre-wrap; }
.mass-mail-recipients { min-width: 800px; }
.table-responsive[tabindex="0"]:hover,
.table-responsive[tabindex="0"]:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
details > summary:hover, details > summary:focus-visible { background-color: #e7f1ff; outline: 2px solid #0d6efd; }
.address-book-table th:nth-child(3) { min-width: 240px; }
.address-book-table th:nth-child(4) { min-width: 220px; }
.address-book-table th:nth-child(5) { min-width: 210px; }
.address-book-scroll:hover,
.address-book-scroll:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }

/* 診断表は狭い画面で縦一文字ずつにならないよう、表内だけを横スクロールする。 */
.urlshare-history > table {
  min-width: 900px;
}

/* URL共有の1ファイル用ドロップ領域。クリック・キーボード・通常のファイル選択も維持する。 */
.file-drop-zone {
  border: 2px dashed #6c757d;
  border-radius: .5rem;
  background-color: #fff;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.file-drop-zone:hover,
.file-drop-zone:focus-visible,
.file-drop-zone.is-dragover {
  border-color: #0d6efd;
  background-color: rgba(13, 110, 253, .08);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18);
  outline: 0;
}

.file-drop-zone.is-dragover {
  border-style: solid;
}

@media (prefers-reduced-motion: reduce) {
  .file-drop-zone { transition: none; }
}

/* 狭い画面では監査表だけ横スクロールし、概要を一文字ずつ折り返さない。 */
.audit-log-table { min-width: 64rem; }
/* お知らせ専用のLight Blue見出し。#はタイトル相当、以下は比例縮小する。 */
.notice-markdown { overflow-wrap: anywhere; font-size: 1rem; line-height: 1.8; }
.notice-markdown h2, .notice-markdown h3, .notice-markdown h4,
.notice-markdown h5, .notice-markdown h6 {
  margin: 1.25rem 0 .75rem; padding: .5rem .75rem;
  color: #154b71; background: #f0f8fd; border-radius: .25rem;
  font-weight: 700; line-height: 1.4;
}
.notice-markdown h2 { font-size: calc(1.275rem + .3vw); border-left: .3rem solid #3987bc; }
.notice-markdown h3 { font-size: 1.25rem; border-left: .25rem solid #74afd6; background: #f4f9fd; }
.notice-markdown h4 { font-size: 1.125rem; border-bottom: 1px solid #b7d8ed; background: #f8fbfe; }
.notice-markdown h5 { font-size: 1.05rem; }
.notice-markdown h6 { font-size: 1rem; }
@media (min-width: 1200px) {
  .notice-markdown h2 { font-size: 1.5rem; }
}
.notice-markdown .notice-unsupported { white-space: pre-wrap; }
.notice-markdown td p, .notice-markdown th p, .notice-markdown li > p { margin-bottom: .25rem; }