/* =====================================================================
   Bill Buddy theme
   Bootstrap 5.3 の上に重ねる最小限のテーマ。
   方針: フラット・装飾なし。プライマリーカラーは藍色。
   ===================================================================== */

:root {
  /* Neutrals */
  --bb-bg:        #f5f6f8;   /* page background */
  --bb-surface:   #ffffff;   /* card surface */
  --bb-surface-2: #eef0f3;   /* inset / table head */
  --bb-ink:       #1f2933;   /* primary text */
  --bb-ink-soft:  #52606d;   /* secondary text */
  /* captions: 使用される全背景 (surface / bg / wash) で WCAG AA 4.5:1 を満たす濃度 */
  --bb-ink-faint: #626e7b;
  --bb-border:    #dde1e6;
  --bb-border-strong: #c5cbd3;

  /* 藍色 (Japanese indigo) primary */
  --bb-primary:      #165e83;
  --bb-primary-deep: #114a68;
  --bb-primary-wash: #e9f1f6;
  --bb-primary-line: #bcd4e1;

  /* Status colors (wash 背景上で AA コントラストを満たす濃度) */
  --bb-amber:      #8a5c00;
  --bb-amber-wash: #f8f0dc;
  --bb-green:      #287046;
  --bb-green-wash: #e6f2ea;
  --bb-red:        #b02e25;
  --bb-red-wash:   #f9e9e7;
  --bb-slate:      #5c6670;
  --bb-slate-wash: #edeff1;

  --bb-radius: 6px;

  --bb-font-body: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --bb-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
body {
  font-family: var(--bb-font-body);
  color: var(--bb-ink);
  background-color: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bb-primary); text-underline-offset: 2px; }
a:hover { color: var(--bb-primary-deep); }

/* キーボード操作時のフォーカスリング (Bootstrap 標準が無い要素も含めて統一) */
a:focus-visible,
.bb-chip:focus-visible,
.bb-fold__summary:focus-visible,
.upload-area:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4, h5, h6 { font-family: var(--bb-font-body); }

.bb-mono, .font-monospace, code, kbd {
  font-family: var(--bb-font-mono) !important;
  font-feature-settings: "tnum" 1;
}

/* 数値: テーブル/メトリクスで桁が揃うよう等幅 */
.bb-num { font-family: var(--bb-font-mono); font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------------------ */
/* Navbar                                                              */
/* ------------------------------------------------------------------ */
.navbar.bg-light {
  background-color: var(--bb-surface) !important;
  border-bottom: 1px solid var(--bb-border);
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.navbar-brand {
  font-weight: 700;
  color: var(--bb-ink) !important;
}
.navbar .nav-link {
  color: var(--bb-ink-soft);
  font-weight: 500;
  font-size: 0.92rem;
}
.navbar .nav-link:hover { color: var(--bb-primary); }
.navbar .nav-link.active { color: var(--bb-primary); font-weight: 600; }
.navbar .navbar-text { color: var(--bb-ink-faint); font-size: 0.85rem; }

/* ------------------------------------------------------------------ */
/* Page title                                                          */
/* ------------------------------------------------------------------ */
main .container-fluid { max-width: 1320px; }

/* ページ見出し (h1)。視覚上は従来の h5 相当のサイズを維持する */
main .bb-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bb-ink);
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */
.card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: none;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--bb-border);
  font-weight: 600;
  color: var(--bb-ink);
  padding: 0.85rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
.table {
  --bs-table-bg: transparent;
  color: var(--bb-ink);
  margin-bottom: 0;
}
.table > thead > tr > th {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--bb-ink-faint);
  border-bottom: 1px solid var(--bb-border-strong);
  white-space: nowrap;
}
.table > tbody > tr > td {
  border-bottom: 1px solid var(--bb-border);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: var(--bb-primary-wash);
  --bs-table-hover-color: var(--bb-ink);
}
/* ジョブ一覧は内側スクロールを持たせず、スクロールはページに一本化する
   (テーブル内の独立スクロールバーが「二重スクロール」になるため)。
   テーブルの最小内容幅 (~800px) を下回る狭幅のみ横スクロールへフォールバック */
#jobs-table .table-responsive {
  overflow-x: visible;
}
#jobs-table .table a.text-decoration-none {
  overflow-wrap: anywhere;
}
/* 行全体をクリック可能にするテーブル行 (data-href) */
tr[data-href] { cursor: pointer; }
.table > tbody > tr:last-child > td { border-bottom: none; }
.table a.text-decoration-none { color: var(--bb-primary); font-weight: 500; }
.table a.text-decoration-none:hover { text-decoration: underline !important; }

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */
.badge {
  font-weight: 600;
  font-size: 0.74rem;
  padding: 0.4em 0.65em;
  border-radius: 4px;
}
.badge.bg-secondary { background: var(--bb-slate-wash) !important; color: var(--bb-slate) !important; }
.badge.bg-warning   { background: var(--bb-amber-wash) !important; color: var(--bb-amber) !important; }
.badge.bg-success   { background: var(--bb-green-wash) !important; color: var(--bb-green) !important; }
.badge.bg-danger    { background: var(--bb-red-wash)  !important; color: var(--bb-red)  !important; }
.badge.bg-info      { background: var(--bb-primary-wash) !important; color: var(--bb-primary) !important; }
.badge.bg-primary   { background: var(--bb-primary-wash) !important; color: var(--bb-primary) !important; }
.badge.bg-light     { background: var(--bb-surface-2) !important; color: var(--bb-ink-soft) !important; }
.bb-job-creator-badge {
  display: inline-block;
  max-width: min(11rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

@media (max-width: 800px) {
  #jobs-table .table-responsive {
    overflow-x: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn { font-weight: 500; border-radius: var(--bb-radius); }
/* btn-sm の実効高 (~29px) はクリックターゲットとして小さすぎるため
   パディングで ~34px に広げる (見た目の密度は維持) */
.btn-sm, .btn-group-sm > .btn { padding: 0.35rem 0.7rem; }
.btn-primary {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--bb-primary-deep);
  border-color: var(--bb-primary-deep);
  color: #fff;
}
.btn-success { background: var(--bb-green); border-color: var(--bb-green); }
.btn-success:hover { background: #27693f; border-color: #27693f; }
.btn-secondary { background: var(--bb-slate); border-color: var(--bb-slate); }
.btn-outline-primary { color: var(--bb-primary); border-color: var(--bb-primary-line); }
.btn-outline-primary:hover { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }
.btn-outline-secondary { color: var(--bb-ink-soft); border-color: var(--bb-border-strong); }
.btn-outline-secondary:hover { background: var(--bb-ink-soft); border-color: var(--bb-ink-soft); color: #fff; }
.btn-outline-info { color: var(--bb-primary); border-color: var(--bb-primary-line); }
.btn-outline-info:hover { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }
.btn-outline-warning { color: var(--bb-amber); border-color: #e3cf9b; }
.btn-outline-warning:hover { background: var(--bb-amber); border-color: var(--bb-amber); color: #fff; }
.btn-outline-danger { color: var(--bb-red); border-color: #e6c2bd; }
.btn-outline-danger:hover { background: var(--bb-red); border-color: var(--bb-red); color: #fff; }

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */
.form-control, .form-select {
  border: 1px solid var(--bb-border-strong);
  border-radius: var(--bb-radius);
  color: var(--bb-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(22, 94, 131, 0.15);
}
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--bb-ink-soft); }
.form-check-input:checked { background-color: var(--bb-primary); border-color: var(--bb-primary); }
.form-check-input:focus { border-color: var(--bb-primary); box-shadow: 0 0 0 3px rgba(22, 94, 131, 0.15); }

/* ------------------------------------------------------------------ */
/* Alerts                                                              */
/* ------------------------------------------------------------------ */
.alert { border-radius: var(--bb-radius); border: 1px solid transparent; }
.alert-info    { background: var(--bb-primary-wash); color: var(--bb-primary-deep); border-color: var(--bb-primary-line); }
.alert-success { background: var(--bb-green-wash); color: var(--bb-green); border-color: #bedccA; }
.alert-danger  { background: var(--bb-red-wash); color: var(--bb-red); border-color: #e6c2bd; }
.alert-light   { background: var(--bb-surface-2); color: var(--bb-ink-soft); border-color: var(--bb-border); }

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */
.page-link { color: var(--bb-primary); border-color: var(--bb-border); }
.page-link:hover { background: var(--bb-primary-wash); color: var(--bb-primary-deep); }
.page-item.active .page-link { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
footer.bg-light {
  background-color: transparent !important;
  border-top: 1px solid var(--bb-border);
}
footer.bg-light p { color: var(--bb-ink-faint); font-size: 0.8rem; }

/* ===================================================================== */
/* Component: 統計 (jobs list) — ヒーロー1枠 + 従属3枠                    */
/* ===================================================================== */
.bb-stats {
  display: grid;
  grid-template-columns: 1.4fr 2.6fr;
  gap: 1px;
  background: var(--bb-border);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
}
@media (max-width: 768px) { .bb-stats { grid-template-columns: 1fr; } }

.bb-stats__hero {
  background: var(--bb-primary);
  color: #fff;
  padding: 1.25rem 1.5rem;
}
.bb-stats__hero .bb-stats__period {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex; align-items: center; gap: 0.45rem;
}
.bb-stats__hero .bb-stats__value {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 0.3rem 0 0.1rem;
  font-feature-settings: "tnum" 1;
}
.bb-stats__hero .bb-stats__label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }

.bb-stats__grid {
  background: var(--bb-surface);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 540px) { .bb-stats__grid { grid-template-columns: 1fr; } }
.bb-stats__cell {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--bb-border);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bb-stats__grid .bb-stats__cell:last-child { border-right: none; }
@media (max-width: 540px) {
  .bb-stats__cell { border-right: none; border-bottom: 1px solid var(--bb-border); }
  .bb-stats__grid .bb-stats__cell:last-child { border-bottom: none; }
}
.bb-stats__cell .bb-stats__cap {
  font-size: 0.78rem;
  color: var(--bb-ink-faint);
  display: flex; align-items: center; gap: 0.4rem;
}
.bb-stats__cell .bb-stats__cap i { color: var(--bb-primary); }
.bb-stats__cell .bb-stats__n {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--bb-ink);
  font-feature-settings: "tnum" 1;
}

/* ===================================================================== */
/* Component: 空状態 (workflow explainer)                                 */
/* ===================================================================== */
.bb-empty { text-align: center; padding: 2.5rem 1.5rem 2rem; }
.bb-empty__mark {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: var(--bb-radius);
  display: grid; place-items: center;
  background: var(--bb-primary-wash);
  color: var(--bb-primary);
  font-size: 1.4rem;
}
.bb-empty__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bb-ink);
  margin-bottom: 0.4rem;
}
.bb-empty__lead { color: var(--bb-ink-soft); max-width: 34rem; margin: 0 auto 1.5rem; }

.bb-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 1.6rem;
  max-width: 44rem;
}
.bb-flow__step {
  flex: 1 1 0;
  min-width: 8.5rem;
  padding: 0.9rem 0.75rem;
  text-align: center;
}
.bb-flow__num {
  font-size: 0.75rem;
  color: var(--bb-primary);
  display: block;
  margin-bottom: 0.4rem;
}
.bb-flow__icon {
  width: 40px; height: 40px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bb-primary-wash);
  color: var(--bb-primary);
}
.bb-flow__label { font-size: 0.9rem; font-weight: 600; color: var(--bb-ink); }
.bb-flow__sub { font-size: 0.78rem; color: var(--bb-ink-faint); margin-top: 0.15rem; }
.bb-flow__arrow {
  align-self: center;
  color: var(--bb-border-strong);
  font-size: 0.85rem;
}
@media (max-width: 560px) { .bb-flow__arrow { transform: rotate(90deg); } }

/* ===================================================================== */
/* Component: 詳細「概要」ヘッダー                                        */
/* ===================================================================== */
.bb-jobhead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.bb-jobhead__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bb-ink);
  overflow-wrap: anywhere;
}
.bb-jobhead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--bb-ink-soft);
}
.bb-jobhead__item { display: inline-flex; align-items: center; gap: 0.2rem; }
.bb-jobhead__item i { color: var(--bb-ink-faint); margin-right: 0.25rem; }
.bb-jobhead__item b { font-weight: 700; color: var(--bb-ink); }
.bb-jobhead__item b.bb-jobhead__fail { color: var(--bb-red); }
.bb-jobhead__sep { color: var(--bb-border-strong); }

/* ===================================================================== */
/* Component: 統合アップロード (一覧ページ)                                */
/* ===================================================================== */
.bb-drop__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--bb-primary);
}
.bb-drop__title { font-weight: 600; color: var(--bb-ink); }
.bb-drop__sub { font-size: 0.82rem; color: var(--bb-ink-faint); margin-top: 0.15rem; }
.bb-drop__config { margin-top: 1rem; }
.bb-drop__controls {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.bb-drop__field { flex: 1 1 240px; }
.bb-drop__field--type { flex: 0 1 160px; }
.bb-drop__actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* ===================================================================== */
/* Component: 一覧フィルタ (検索 + ステータスチップ)                       */
/* ===================================================================== */
.bb-filter {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.bb-filter__search { max-width: 280px; }
.bb-filter__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bb-chip {
  border: 1px solid var(--bb-border-strong);
  background: var(--bb-surface);
  color: var(--bb-ink-soft);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.bb-chip:hover { border-color: var(--bb-primary); color: var(--bb-primary); }
.bb-chip--active {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: #fff;
}

/* ===================================================================== */
/* Component: 突合ワークスペース (詳細ページ)                              */
/* ===================================================================== */
.bb-ws__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.bb-ws__title { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bb-ws__totals { font-size: 0.9rem; font-weight: 600; color: var(--bb-primary-deep); }
.bb-ws__actions { display: flex; gap: 0.5rem; }

/* シートは常に自然な高さで描画し、長い場合はページスクロールに任せる */
.bb-ws {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.bb-ws__sheet {
  flex: 1 1 55%;
  min-width: 0;
}
.bb-ws__sheetmeta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--bb-ink-soft);
}
.bb-ws__sheetmeta b { color: var(--bb-ink); font-weight: 700; }

/* 原本 PDF は視線の起点になるよう左側に置く (DOM 順も PDF が先) */
.bb-ws__pdf {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
}
.bb-ws__pdfbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--bb-surface-2);
  border-bottom: 1px solid var(--bb-border);
}
.bb-ws__pdfname {
  font-size: 0.85rem;
  color: var(--bb-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-ws__pdfframe { border: 0; width: 100%; flex: 1; min-height: 0; }

/* PDF 並列時: シートをページスクロールしても原本が画面に残るよう固定する */
.bb-ws--split .bb-ws__pdf {
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  height: calc(100vh - 2rem);
}

/* フラットテーマに合わせ、v4 が inline 指定するグリッドの影を消す */
.jspreadsheet-container .jexcel_content { box-shadow: none !important; }

/* スクロールはシート本体 (.jexcel_content: v4 が縦横 auto を設定) に一本化する。
   このラッパー自体はスクロールさせない (二重スクロール防止) */
.jspreadsheet-container {
  max-width: 100%;
  overflow: visible;
  margin-top: 10px;
}

/* シートタブは折り返さず 1 行 + 横スクロール (Excel/Sheets ライク)。
   セレクタは v4 の tabs() がコンテナ直下に [タブ見出し div, 本体 div] の
   2 子要素を作る構造に依存する (vendor 更新時は要確認) */
.bb-ws__sheet .jexcel_tabs > div:first-child {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bb-ws__sheet .jexcel_tabs > div:first-child::-webkit-scrollbar {
  height: 8px;
}

.bb-ws__sheet .jexcel_tabs .jexcel_tab_link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* PDF 並列時はタブ行の上端を PDF 枠の上端に揃える */
.bb-ws--split .bb-ws__sheet > .jspreadsheet-container {
  margin-top: 0;
}


@media (max-width: 1100px) {
  .bb-ws { flex-direction: column; }
  .bb-ws--split .bb-ws__sheet { order: 1; }
  .bb-ws--split .bb-ws__pdf {
    order: 2;
    align-self: stretch;
    position: static;
    height: auto;
  }
  .bb-ws__pdfframe { min-height: 50vh; }
}

/* ===================================================================== */
/* Component: 折りたたみセクション (details)                              */
/* ===================================================================== */
.bb-fold {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
}
.bb-fold__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  color: var(--bb-ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.bb-fold__summary::-webkit-details-marker { display: none; }
.bb-fold__chev { font-size: 0.75rem; color: var(--bb-ink-faint); transition: transform 0.15s ease; }
.bb-fold[open] > .bb-fold__summary { border-bottom: 1px solid var(--bb-border); }
.bb-fold[open] > .bb-fold__summary .bb-fold__chev { transform: rotate(90deg); }
.bb-fold__body { padding: 1.25rem; }

/* ファイル一覧テーブル内の失敗表示 */
.bb-fileerr-inline {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--bb-red);
}

/* ===================================================================== */
/* Component: アップロードフォーム (create.html)                          */
/* ===================================================================== */
.bb-section {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
.bb-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bb-ink);
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1rem;
}
.bb-section__title i { color: var(--bb-primary); }

.upload-area {
  border: 1.5px dashed var(--bb-primary-line) !important;
  border-radius: var(--bb-radius) !important;
  background: var(--bb-primary-wash);
  cursor: pointer;
}
.upload-area:hover,
.upload-area.is-dragover { border-color: var(--bb-primary) !important; }

/* アップロード進捗バー */
.bb-upload-progress .progress {
  height: 0.5rem;
  background: var(--bb-surface-2);
  border-radius: 4px;
}
.bb-upload-progress .progress-bar {
  background-color: var(--bb-primary);
  transition: width 0.2s ease;
}
.upload-area .upload-content i { color: var(--bb-primary) !important; }
.upload-area .upload-content h5 { color: var(--bb-ink-soft) !important; }

/* ===================================================================== */
/* Login                                                                 */
/* ===================================================================== */
body.bb-login { background-color: var(--bb-bg); }
.bb-login__wrap { min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem; }
.bb-login__card { width: 100%; max-width: 26rem; }
.bb-login__brand { text-align: center; margin-bottom: 1.5rem; }
.bb-login__logo {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--bb-ink);
}
.bb-login__logo .bb-login__dot { color: var(--bb-primary); }
.bb-login__tagline {
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--bb-ink-faint);
}