/*
 * スマブロ ダッシュボード 共通スタイル（AdminLTE 4 / Bootstrap 5.3 の上書き）
 *
 * 2026-09-23 新設：ブランドカラー、白いサイドバー、見出し・カードの余白を整理
 */

/* ------------------------------------------------------------ */
/* ブランドカラー（ロゴの青〜緑のグラデーションから）              */
/* ------------------------------------------------------------ */
:root,
[data-bs-theme=light] {
  --sb-navy: #13306b;
  --sb-blue: #1a6fd6;
  --sb-teal: #14b8a6;
  --sb-ink: #1e293b;
  --sb-muted: #64748b;
  --sb-line: #e5e9f0;
  --sb-page-bg: #f4f6fa;
  --sb-accent-grad: linear-gradient(180deg, var(--sb-blue), var(--sb-teal));

  --bs-primary: #1a6fd6;
  --bs-primary-rgb: 26, 111, 214;
  --bs-primary-text-emphasis: #0e3f7a;
  --bs-primary-bg-subtle: #e6f0fc;
  --bs-primary-border-subtle: #b3d0f5;
  --bs-link-color: #1a6fd6;
  --bs-link-color-rgb: 26, 111, 214;
  --bs-link-hover-color: #13509c;
  --bs-link-hover-color-rgb: 19, 80, 156;
  --bs-body-color: var(--sb-ink);
  --bs-border-color: var(--sb-line);
  --sb-input-bg: #f6f7f9;       /* 入力枠の背景（白いカードの上で入力欄とわかるように。2026-09-30） */
  --sb-input-border: #d3d9e2;
}

.btn-primary {
  --bs-btn-bg: #1a6fd6;
  --bs-btn-border-color: #1a6fd6;
  --bs-btn-hover-bg: #155fb8;
  --bs-btn-hover-border-color: #155fb8;
  --bs-btn-active-bg: #13509c;
  --bs-btn-active-border-color: #13509c;
  --bs-btn-disabled-bg: #1a6fd6;
  --bs-btn-disabled-border-color: #1a6fd6;
}
.btn-outline-primary {
  --bs-btn-color: #1a6fd6;
  --bs-btn-border-color: #1a6fd6;
  --bs-btn-hover-bg: #1a6fd6;
  --bs-btn-hover-border-color: #1a6fd6;
  --bs-btn-active-bg: #155fb8;
  --bs-btn-active-border-color: #155fb8;
  --bs-btn-disabled-color: #1a6fd6;
  --bs-btn-disabled-border-color: #1a6fd6;
}
.text-bg-primary { background-color: #1a6fd6 !important; }
.progress-bar.bg-primary, .progress-bar:not([class*="bg-"]) { background-color: #1a6fd6; }

/* ------------------------------------------------------------ */
/* ページ全体                                                    */
/* ------------------------------------------------------------ */
body.bg-body-tertiary,
.app-main {
  background-color: var(--sb-page-bg) !important;
}

.app-content {
  padding-bottom: 2.5rem;
}

/* ページタイトル（各画面の app-content-header） */
.app-content-header {
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
}
.app-content-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sb-ink);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.app-content-header h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1.35em;
  border-radius: 3px;
  background: var(--sb-accent-grad);
}
.app-content-header .breadcrumb {
  font-size: .8rem;
  margin-top: .45rem;
}
.app-content-header .breadcrumb-item.active { color: var(--sb-muted); }

/* ------------------------------------------------------------ */
/* ヘッダー                                                      */
/* ------------------------------------------------------------ */
.app-header {
  border-bottom: 1px solid var(--sb-line);
  box-shadow: none;
}

/* ------------------------------------------------------------ */
/* サイドバー（白）                                              */
/* ------------------------------------------------------------ */
.app-sidebar.sb-sidebar {
  --lte-sidebar-color: #334155;
  --lte-sidebar-hover-bg: #f1f5f9;
  --lte-sidebar-hover-color: var(--sb-ink);
  --lte-sidebar-active-color: var(--sb-blue);
  --lte-sidebar-menu-active-bg: var(--bs-primary-bg-subtle);
  --lte-sidebar-menu-active-color: #13509c;
  background-color: #fff !important;
  border-right: 1px solid var(--sb-line);
  box-shadow: 2px 0 12px rgba(15, 23, 42, .04);
}
.sb-brand {
  height: 3.5rem;
  padding: .2rem 1rem;
  justify-content: center;
  background: #fff;
}
.sb-logo {
  height: 48px;
  width: auto;
  display: block;
}
.app-sidebar.sb-sidebar .sidebar-menu {
  padding: .5rem .5rem 1rem;
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-item {
  margin-bottom: 2px;
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-link {
  border-radius: .5rem;
  padding: .55rem .75rem;
  font-size: .925rem;
  font-weight: 500;
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-link .nav-icon {
  color: #94a3b8;
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-link.active {
  font-weight: 700;
  position: relative;
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-link.active .nav-icon {
  color: var(--sb-blue);
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  bottom: .5rem;
  width: 3px;
  border-radius: 3px;
  background: var(--sb-accent-grad);
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #94a3b8;
  padding: 1.1rem .75rem .35rem;
}
.app-sidebar.sb-sidebar .sidebar-menu .nav-link-button {
  color: var(--lte-sidebar-color);
}

/* ------------------------------------------------------------ */
/* カード                                                        */
/* ------------------------------------------------------------ */
.card {
  --bs-card-border-color: var(--sb-line);
  --bs-card-border-radius: .75rem;
  --bs-card-inner-border-radius: calc(.75rem - 1px);
  --bs-card-cap-bg: #fff;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.1rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-cap-padding-y: .85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
}
.card > .card-header {
  border-bottom: 1px solid var(--sb-line);
}
.card > .card-header .card-title,
.card > .card-header > .card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sb-ink);
  margin-bottom: 0;
}
.card > .card-header .card-title > .bi:first-child {
  color: var(--sb-blue);
}
.card > .card-footer {
  background: #fafbfd;
  border-top: 1px solid var(--sb-line);
}
/* card-outline は上端のラインを細いグラデーションに */
.card.card-outline.card-primary {
  border-top: 0;
  position: relative;
  overflow: hidden;
}
.card.card-outline.card-primary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sb-blue), var(--sb-teal));
  z-index: 1;
}

/* 一覧（list-group）の行間 */
.card .list-group-item {
  padding-top: .8rem;
  padding-bottom: .8rem;
  border-color: var(--sb-line);
}

/* ------------------------------------------------------------ */
/* フォームのセクション見出し                                    */
/* ------------------------------------------------------------ */
.form-section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #13306b;
  background: #e8f0fb;   /* 入力枠（グレー）と区別できるよう、見出しは淡い青に（2026-09-30） */
  border: 1px solid #d3e2f7;
  border-left: 0;
  border-radius: .5rem;
  padding: .6rem .9rem;
  margin: 1.75rem 0 1.1rem;
  position: relative;
  overflow: hidden;
}
.form-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--sb-accent-grad);
}
.tab-pane > div:first-child > .form-section-title,
.card-body > div:first-child > .form-section-title,
.form-section-title:first-child {
  margin-top: .25rem;
}

.form-label {
  font-weight: 600;
  font-size: .925rem;
  margin-bottom: .35rem;
}
.form-text {
  color: var(--sb-muted);
  font-size: .8rem;
  line-height: 1.6;
}
.form-control,
.form-select {
  border-color: var(--sb-input-border);
  background-color: var(--sb-input-bg);
}
.form-control::placeholder { color: #9aa6b8; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: #b3c2d6;
}
/* 入力中は白にして、どこを入力しているかをはっきりさせる */
.form-control:focus,
.form-select:focus {
  background-color: #fff;
  border-color: #7fb0ec;
  box-shadow: 0 0 0 .2rem rgba(26, 111, 214, .15);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background-color: #e9edf3;
}
.input-group-text {
  background-color: #e8eef6;
  border-color: var(--sb-input-border);
  color: var(--sb-muted);
}
.form-check-input:not(:checked) {
  background-color: var(--sb-input-bg);
  border-color: #b8c4d4;
}

/* タブ */
.card-header .nav-tabs .nav-link {
  font-weight: 600;
  color: var(--sb-muted);
  padding: .8rem 1.1rem;
}
.card-header .nav-tabs .nav-link.active {
  color: var(--sb-blue);
}

/* ------------------------------------------------------------ */
/* テーブル                                                      */
/* ------------------------------------------------------------ */
.table > thead th,
.table-light th {
  font-size: .8rem;
  font-weight: 700;
  color: var(--sb-muted);
  letter-spacing: .06em;
}

/* ------------------------------------------------------------ */
/* ダッシュボードの集計タイル                                    */
/* ------------------------------------------------------------ */
.small-box {
  border-radius: .75rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.small-box.text-bg-primary {
  background: linear-gradient(135deg, #1a6fd6, #13306b) !important;
}
.small-box.text-bg-success {
  background: linear-gradient(135deg, #14b8a6, #0f8f7e) !important;
}

/* アラート */
.alert {
  border-radius: .6rem;
}

/* ------------------------------------------------------------ */
/* ログイン画面                                                  */
/* ------------------------------------------------------------ */
.sb-login {
  background: radial-gradient(1200px 600px at 10% 0%, #e6f0fc 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, #e0f7f3 0%, transparent 60%),
              var(--sb-page-bg);
}
.sb-login .login-box {
  width: 400px;
  max-width: calc(100% - 32px);
}
.sb-login-logo {
  width: 220px;
  height: auto;
}

/* ------------------------------------------------------------ */
/* 2026-09-23 追加：スマホ表示・タイル・フッター                  */
/* ------------------------------------------------------------ */
.min-w-0 { min-width: 0; }
.recent-title { line-height: 1.45; overflow-wrap: anywhere; }

/* 「予約中の記事」タイル：水色の上で文字が読みにくいため、背景を濃くして文字を白に */
.small-box.text-bg-info {
  background: linear-gradient(135deg, #0ea5c6, #0b7fa0) !important;
  color: #fff !important;
}
.small-box.text-bg-info .inner h3,
.small-box.text-bg-info .inner p {
  color: #fff !important;
}
.small-box.text-bg-info .small-box-icon { color: rgba(255, 255, 255, .25); }

/* フッター */
.app-footer.sb-footer {
  background: #fff;
  border-top: 1px solid var(--sb-line);
  color: var(--sb-muted);
  font-size: .8rem;
  padding: .85rem 1.25rem;
}

/* ページ送り：ボタン同士に余白をつけ、1つずつ角丸のボタンにする（2026-09-23 追加） */
.pagination {
  gap: .375rem;
  flex-wrap: wrap;
}
.pagination .page-link {
  margin-left: 0 !important;
  border-radius: .5rem !important;
  min-width: 2.25rem;
  text-align: center;
}
.pagination .page-item.active .page-link {
  z-index: auto;
}

/* ------------------------------------------------------------ */
/* 代理店画面（2026-09-23 追加）                                  */
/* ------------------------------------------------------------ */
.sb-agency-badge {
  background: linear-gradient(90deg, var(--sb-navy), var(--sb-blue));
  color: #fff;
  font-weight: 600;
  letter-spacing: .05em;
}

/* 代理店がクライアント画面を開いているときの帯 */
.sb-agency-banner {
  background: linear-gradient(90deg, var(--sb-navy), var(--sb-blue));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.sb-agency-banner strong { font-weight: 700; }

/* サマリーのタイル */
.sb-tile .card-body { padding: 1rem 1.1rem; }
.sb-tile-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  background: var(--bs-primary-bg-subtle);
  color: var(--sb-blue);
}
.sb-tile-label { color: var(--sb-muted); font-weight: 600; line-height: 1.35; }
.sb-tile-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--sb-ink); }
.sb-tile-value small { font-size: .8rem; font-weight: 600; color: var(--sb-muted); }
.sb-tile-note { color: var(--sb-muted); }
.sb-tile-teal .sb-tile-icon {
  display: flex; background: #e0f7f3; color: #0f8f7e; }
.sb-tile-warn .sb-tile-icon {
  display: flex; background: #fff4db; color: #b7791f; }
.sb-tile-warn { border-color: #f6d58a; }
.sb-tile-danger .sb-tile-icon {
  display: flex; background: #fde8e8; color: #c53030; }
.sb-tile-danger { border-color: #f5b5b5; }
.sb-tile-plain .sb-tile-icon {
  display: flex; background: #f1f5f9; color: #94a3b8; }

/* クライアントの行 */
.agency-client { transition: box-shadow .15s ease; }
.agency-client:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08); }
.agency-client.is-attention { border-left: 4px solid #f0ad4e; }
.agency-client-title { font-size: 1.05rem; overflow-wrap: anywhere; }
.agency-client-main { flex-basis: 16rem; }
.agency-metrics {
  display: grid;
  grid-template-columns: 9.5rem 5rem 4.5rem 12rem;
  gap: .75rem 1.25rem;
  align-items: start;
}
.agency-metric-label { font-size: .72rem; font-weight: 700; color: var(--sb-muted); letter-spacing: .04em; margin-bottom: .1rem; }
.agency-metric-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.agency-metric-value small { font-size: .72rem; font-weight: 600; color: var(--sb-muted); margin-left: .15rem; }
.agency-client-action { flex-shrink: 0; }
.agency-alerts summary { cursor: pointer; }
.agency-alerts summary::marker { color: var(--sb-muted); }

@media (max-width: 991.98px) {
  .agency-client-main { flex-basis: 100%; }
  .agency-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .agency-client-action { width: 100%; }
}
@media (max-width: 575.98px) {
  .sb-tile .card-body { padding: .8rem .9rem; }
  .sb-tile-value { font-size: 1.35rem; }
}

/* ------------------------------------------------------------ */
/* ブラウザの自動入力（パスワード保存）で入力欄が色付きにならないようにする（2026-09-23 追加） */
/* ------------------------------------------------------------ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sb-input-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--sb-input-bg) inset !important;
  -webkit-text-fill-color: var(--sb-ink) !important;
  caret-color: var(--sb-ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* フォーカス時の枠の光彩は残す */
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 .2rem rgba(26, 111, 214, .15) !important;
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 .2rem rgba(26, 111, 214, .15) !important;
}
input:autofill {
  background-color: var(--sb-input-bg) !important;
}
/* form-floating のラベル背景も白に */
.form-floating > .form-control:-webkit-autofill ~ label {
  color: var(--sb-muted);
}

/* 表示のみの項目（テーマ編集の「全テーマ共通の補足情報」など）2026-09-24 追加 */
.sb-static-field {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: .5rem;
  padding: .65rem .85rem;
  font-size: .9rem;
  line-height: 1.7;
  max-height: 14rem;
  overflow: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sb-static-field.is-empty { color: var(--sb-muted); }
/* 画像素材のサムネイル */
.sb-material-thumb {
  width: 88px;
  height: 66px;
  object-fit: cover;
  background: #f1f5f9;
}

/* 画像の拡大表示（2026-09-24 追加） */
.sb-zoomable { cursor: zoom-in; transition: opacity .15s ease; }
.sb-zoomable:hover { opacity: .85; }
.sb-zoomable:focus-visible { outline: 3px solid rgba(26, 111, 214, .5); outline-offset: 2px; }
.sb-zoom-modal + .modal-backdrop, .modal-backdrop.show { --bs-backdrop-opacity: .8; }
.sb-zoom-modal .modal-dialog { max-width: min(1100px, calc(100vw - 2rem)); }
.sb-zoom-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  background: #fff;
}

/* 記事テーマの使い方ガイド（2026-09-24 追加） */
.sb-guide-box {
  border: 1px solid var(--sb-line);
  border-radius: .6rem;
  padding: .9rem 1rem;
  background: #fbfcfe;
}
.sb-guide-box-title { font-weight: 700; margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.sb-guide-num {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sb-accent-grad); color: #fff; font-size: .8rem; font-weight: 700;
}
.sb-guide-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem;
}
.sb-guide-day {
  border: 1px solid var(--sb-line);
  border-radius: .6rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.sb-guide-day.is-off { background: #f8fafc; }
.sb-guide-dayname {
  text-align: center; font-weight: 700; font-size: .85rem;
  padding: .3rem 0; background: #f1f5f9; color: var(--sb-ink);
}
.sb-guide-daybody { padding: .5rem; min-height: 5.5rem; }
.sb-guide-chip {
  font-size: .78rem; font-weight: 700; line-height: 1.35;
  border-radius: .4rem; padding: .3rem .45rem; margin-bottom: .35rem;
}
.sb-chip-blue  { background: #e6f0fc; color: #13509c; }
.sb-chip-teal  { background: #e0f7f3; color: #0f766e; }
.sb-chip-amber { background: #fff4db; color: #92400e; }
.sb-chip-rose  { background: #fde8ef; color: #9d174d; }
.sb-guide-img { font-size: .72rem; color: var(--sb-muted); line-height: 1.4; }
@media (max-width: 767.98px) {
  .sb-guide-week { grid-template-columns: 1fr; gap: .35rem; }
  .sb-guide-day { flex-direction: row; }
  .sb-guide-day.is-off { display: none; }
  .sb-guide-dayname { width: 2.5rem; display: flex; align-items: center; justify-content: center; }
  .sb-guide-daybody { min-height: 0; flex: 1; }
}

/* 記事の手動作成：テーマの選択肢（2026-09-24 追加） */
.sb-theme-option {
  display: block;
  border: 1px solid var(--sb-line);
  border-radius: .6rem;
  padding: .75rem .9rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.sb-theme-option:hover { border-color: #93b9ea; }
.sb-theme-check { color: #cbd5e1; font-size: 1.1rem; margin-top: .05rem; }
.btn-check:checked + .sb-theme-option {
  border-color: var(--sb-blue);
  background: var(--bs-primary-bg-subtle);
  box-shadow: 0 0 0 .15rem rgba(26, 111, 214, .15);
}
.btn-check:checked + .sb-theme-option .sb-theme-check { color: var(--sb-blue); }
.btn-check:focus-visible + .sb-theme-option { outline: 3px solid rgba(26, 111, 214, .4); }

/* 書く内容：複製した直後のカード（2026-09-30 追加） */
.card.sb-just-copied { border: 2px solid var(--sb-blue); box-shadow: 0 0 0 .25rem rgba(26, 111, 214, .15); }

/* ダッシュボード：よく使う画面へのボタン（2026-09-30 追加） */
.sb-shortcuts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
}
.sb-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .25rem;
  padding: 1.1rem .75rem;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid var(--sb-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
  color: var(--sb-ink);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sb-shortcut:hover, .sb-shortcut:focus-visible {
  border-color: var(--sb-blue);
  box-shadow: 0 6px 20px rgba(26, 111, 214, .15);
  transform: translateY(-2px);
  color: var(--sb-ink);
}
.sb-shortcut-icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.45rem; color: #fff;
  background: linear-gradient(135deg, var(--sb-blue), var(--sb-teal));
  margin-bottom: .2rem;
}
.sb-shortcut-label { font-weight: 700; font-size: 1.02rem; }
.sb-shortcut-desc { font-size: .75rem; color: var(--sb-muted); }
@media (max-width: 991.98px) { .sb-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .sb-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sb-shortcut { padding: .85rem .5rem; }
  .sb-shortcut-icon { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
  .sb-shortcut-desc { display: none; }
  .sb-shortcut:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; gap: .6rem; }
  .sb-shortcut:last-child:nth-child(odd) .sb-shortcut-icon { margin-bottom: 0; }
}

/* ダイアログのボタンも左下に寄せ、実行ボタンを先頭（左）に（2026-09-30 追加） */
.modal-footer {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* 記事本文エディタ：コード編集 / ビジュアル編集 / プレビュー（2026-10-28 追加） */
.sb-editor-tabs .nav-link { color: var(--bs-secondary-color); }
.sb-editor-tabs .nav-link.active { color: #fff; }
.sb-code-editor .CodeMirror {
  height: 600px;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
}
.sb-code-editor .CodeMirror-gutters { background: #f6f8fb; border-right-color: #e3e8f0; }
.sb-code-editor .cm-tag { color: #1a6fd6; }
.sb-code-editor .cm-attribute { color: #b45309; }
.sb-code-editor .cm-string { color: #0f766e; }
.sb-code-editor .CodeMirror-matchingtag { background: rgba(26, 111, 214, .14); }
#pane-visual .tox-tinymce { border-radius: .375rem; }

/* 画像ライブラリ・「ライブラリから選ぶ」（2026-10-28 追加） */
.sb-lib-pick { position: relative; cursor: pointer; background: var(--bs-body-bg); transition: box-shadow .15s; }
.sb-lib-pick .sb-lib-check { position: absolute; top: .4rem; left: .4rem; width: 1.25rem; height: 1.25rem; margin: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.sb-lib-pick.is-checked { box-shadow: 0 0 0 3px #1a6fd6; border-color: #1a6fd6 !important; }
.sb-lib-pick.is-disabled { opacity: .45; cursor: not-allowed; }
.sb-library-card .badge.text-wrap { white-space: normal; line-height: 1.4; }

/* サイドバー：メニュー名の補足（「書く内容（記事テーマ）」の「（記事テーマ）」）を小さく（2026-10-29） */
.sb-menu-sub { font-size: .72em; letter-spacing: 0; opacity: .85; }

/* 日付・時刻の入力欄：カレンダー／時計アイコンが見えるように（2026-10-29）
   OS がダークモードのとき、color-scheme: light dark の影響でアイコンが白くなり背景に溶けていたため、入力欄はライト表示に固定 */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; filter: none; }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ダッシュボードのボタン：「書く内容」の補足「（記事テーマ）」を小さく、次の行に（2026-10-29） */
.sb-shortcut-sub { display: block; font-size: .72em; font-weight: 500; color: var(--sb-muted); letter-spacing: 0; }

/* ===== スマホ表示の調整（2026-10-29） ===== */
/* ボタンの文字は折り返さない（「保存する」が縦に崩れるのを防ぐ）。並びきらないボタンは次の行へ */
.card-footer .btn, .modal-footer .btn, .sb-actions .btn { white-space: nowrap; }
.card-footer.d-flex, .modal-footer { flex-wrap: wrap; row-gap: .5rem; }
@media (max-width: 575.98px) {
  /* タブ：アイコンを隠して1行に収める。収まらない場合は横スクロール */
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; padding: .5rem .65rem; font-size: .88rem; }
  .nav-tabs .nav-link > .bi { display: none; }
  /* 画面上部の見出しとパンくず */
  .app-content-header h3 { font-size: 1.3rem; }
  .app-content-header .breadcrumb { float: none !important; margin-top: .35rem; font-size: .78rem; }
  /* カードの余白を少し詰める */
  .app-content .card-body { padding: 1rem .9rem; }
  .app-content .card-footer { padding: .75rem .9rem; }
}
@media (max-width: 575.98px) {
  /* 一覧の表（作成した記事）：スマホではタイトルを1行目いっぱいに、状態とボタンを2行目に */
  .sb-list-table thead { display: none; }
  .sb-list-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .7rem .8rem; border-bottom: 1px solid var(--bs-border-color); }
  .sb-list-table tbody td { display: block; border: 0; padding: 0; background: transparent; }
  .sb-list-table tbody td.sb-cell-main { flex: 0 0 100%; }
  .sb-list-table tbody td.sb-cell-actions { margin-left: auto; }
  /* カード見出しの文字を少し小さく（リンクと同じ行に収める） */
  .app-content .card-header .card-title { font-size: 1rem; }
}
/* 見出しの補足（「書く内容（記事テーマ）」の「（記事テーマ）」）は小さく */
.sb-title-sub { font-size: .6em; font-weight: 600; color: var(--sb-muted); letter-spacing: 0; }
.app-content-header .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  /* 記事本文エディタの切り替え（コード編集／ビジュアル編集／プレビュー）を1行に */
  .sb-editor-tabs { width: 100%; flex-wrap: nowrap; }
  .sb-editor-tabs .nav-item { flex: 1 1 0; }
  .sb-editor-tabs .nav-link { width: 100%; text-align: center; padding: .35rem .2rem !important; font-size: .8rem; white-space: nowrap; }
  .sb-editor-tabs .nav-link > .bi { display: none; }
  /* 横いっぱいのボタングループ（サムネイルの作り直し方など）を枠内に収める */
  .btn-group.w-100 > .btn { flex: 1 1 0; padding-left: .25rem; padding-right: .25rem; font-size: .85rem; }
}

/* ===== 切り替えボタン（タブ）を「押せるボタン」に見えるデザインに（2026-10-29） ===== */
/* 書く内容の編集：記事設定／投稿スケジュール／画像設定 */
.sb-seg-caption { padding: .7rem 1rem 0; font-size: .8rem; color: var(--sb-muted); }
.sb-seg-tabs { display: flex; flex-wrap: nowrap; gap: .5rem; padding: .5rem 1rem .9rem; border-bottom: 1px solid var(--bs-border-color); }
.sb-seg-tabs .nav-item { flex: 1 1 0; min-width: 0; }
.sb-seg-tabs .nav-link {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem .5rem; border: 1.5px solid #c5d3e8; border-radius: .65rem;
  background: #fff; color: #33415c; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 0 #dfe7f3;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.sb-seg-tabs .nav-link .bi { font-size: 1.1rem; }
.sb-seg-tabs .nav-link:hover, .sb-seg-tabs .nav-link:focus-visible { border-color: #1a6fd6; color: #1a6fd6; background: #f2f7ff; }
.sb-seg-tabs .nav-link.active, .sb-seg-tabs .nav-link.active:hover {
  background: #1a6fd6; border-color: #1a6fd6; color: #fff;
  box-shadow: 0 3px 8px rgba(26, 111, 214, .28);
}
@media (max-width: 575.98px) {
  .sb-seg-caption { padding: .6rem .75rem 0; }
  .sb-seg-tabs { gap: .35rem; padding: .45rem .75rem .75rem; }
  .sb-seg-tabs .nav-link { flex-direction: column; gap: .15rem; padding: .5rem .25rem; font-size: .82rem; }
  .sb-seg-tabs .nav-link .bi { font-size: 1.15rem; }
}

/* そのほかの切り替え（記事本文の表示切り替え、画像ライブラリの絞り込みなど）：選ばれていないものにも枠を付けてボタンとわかるように */
.app-content .nav-pills:not(.sb-seg-tabs) .nav-link { border: 1px solid #c5d3e8; background: #fff; color: #33415c; margin-inline-end: .3rem; }
.app-content .nav-pills:not(.sb-seg-tabs) .nav-link:hover { border-color: #1a6fd6; color: #1a6fd6; background: #f2f7ff; }
.app-content .nav-pills:not(.sb-seg-tabs) .nav-link.active { border-color: #1a6fd6; background: #1a6fd6; color: #fff; }
.app-content .nav-pills:not(.sb-seg-tabs) .nav-item:last-child .nav-link { margin-inline-end: 0; }
.app-content .nav-pills:not(.sb-seg-tabs) { row-gap: .35rem; }

/* ------------------------------------------------------------ */
/* 2026-10-29：集計タイルのアイコンが枠からはみ出さないように     */
/* （AdminLTE の 70px 指定は SVG 前提。Bootstrap Icons だと下にはみ出す） */
/* ------------------------------------------------------------ */
.small-box { overflow: hidden; }
.small-box .small-box-icon {
  top: 50%;
  right: 1rem;
  height: auto;
  font-size: 3.25rem;
  line-height: 1;
  transform: translateY(-50%);
}
.small-box .small-box-icon::before { display: block; vertical-align: 0; }
.small-box:hover .small-box-icon { transform: translateY(-50%) scale(1.08); }
@media (max-width: 1199.98px) {
  .small-box .small-box-icon { font-size: 2.75rem; right: .75rem; }
}