/* =============================================
   デザインシステム（みちのーとベース）
   ============================================= */
:root {
  /* みちのーとカラーパレット */
  --ink:            #172d31;
  --ink-soft:       #486064;
  --navy:           #16333b;
  --navy-deep:      #10292f;
  --paper:          #f3efe7;
  --sheet:          #fffdf8;
  --line:           #d8d2c6;
  --line-dark:      #b7b0a3;
  --sage:           #91a582;
  --sage-soft:      #e3e9da;
  --lake:           #4e7d89;
  --lake-text:      #3f6974;
  --lake-soft:      #d5e4e9;
  --cinnabar:       #bd5b40;
  --cinnabar-text:  #a24932;
  --cinnabar-soft:  #f3dfd6;
  --gold:           #b58a44;
  --gold-soft:      #eee3c9;
  /* サブナビ・切替タブのアクティブ色 */
  --tab-active:     var(--lake);
  /* 入力欄の枠線（淡いティール） */
  --field-line:     #c3d5d8;
  --shadow:         0 18px 40px rgba(25, 43, 43, 0.08);
  --shadow-soft:    0 8px 20px rgba(25, 43, 43, 0.055);
  --radius:         18px;
  --font-body:      "BIZ UDPGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display:   "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;

  /* 旧カラー変数（既存テンプレートとの後方互換） */
  --color-primary:       var(--lake);
  --color-primary-light: var(--lake-soft);
  --color-primary-bg:    var(--lake-soft);
  --color-primary-dark:  var(--lake-text);
  --color-success:       #3B6D11;
  --color-success-bg:    #EAF3DE;
  --color-warning:       #854F0B;
  --color-warning-bg:    #FAEEDA;
  --color-danger:        #791F1F;
  --color-danger-bg:     #FCEBEB;
}

/* =============================================
   リセット・ベース
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(135deg, #f4f1eb 0%, #ece8df 100%);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

/* 羊皮紙ノイズテクスチャ */
body::before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

/* =============================================
   サイドバー
   ============================================= */
.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  z-index: 200;
  display: flex;
  width: 264px;
  padding: 26px 18px 18px;
  overflow-y: auto;
  color: #eff3ed;
  background: linear-gradient(150deg, #16333b 0%, #10292f 74%);
  flex-direction: column;
  box-shadow: 12px 0 35px rgba(15, 34, 38, 0.12);
}

.sidebar::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.13);
  content: "";
}

/* ブランドロゴ部分 */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 28px;
  text-decoration: none;
}

.sidebar-brand-icon {
  display: grid;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  place-items: center;
  color: #cad6bd;
  font-size: 22px;
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #eff3ed;
  line-height: 1.3;
}

.sidebar-brand-sub {
  font-size: 12px;
  color: rgba(239, 243, 237, 0.55);
  letter-spacing: 0.06em;
}

/* ナビゲーション */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav-label {
  margin: 18px 0 6px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.38);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgba(239, 243, 237, 0.72);
  text-decoration: none;
  font-size: 14px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.sidebar-nav-item:hover {
  color: white;
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(2px);
}

.sidebar-nav-item.active {
  color: white;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 3px 0 0 #d69370;
}

.sidebar-nav-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* サブメニュー（請求など） */
.sidebar-nav-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

.sidebar-nav-submenu.open {
  max-height: 200px;
}

.sidebar-nav-submenu .sidebar-nav-item {
  padding-left: 42px;
  min-height: 38px;
  font-size: 12px;
}

.sidebar-nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.sidebar-nav-dropdown-toggle i.toggle-arrow {
  font-size: 12px;
  transition: transform 220ms ease;
}

.sidebar-nav-dropdown-toggle.open i.toggle-arrow {
  transform: rotate(180deg);
}

.sidebar-spacer { flex: 1; min-height: 20px; }

/* ユーザー情報（サイドバー下部） */
.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  margin-top: 8px;
}

.sidebar-user-main {
  min-width: 0;
}

.sidebar-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #eff3ed;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(239, 243, 237, 0.55);
}

.sidebar-logout-btn {
  background: none;
  border: none;
  color: rgba(239, 243, 237, 0.78);
  font-size: 12px;
  font-weight: 700;
  padding: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease;
}

.sidebar-logout-btn:hover {
  color: #f0a880;
}

/* =============================================
   メインエリア
   ============================================= */
.main-area {
  min-height: 100vh;
  margin-left: 264px;
}

/* スティッキートップバー */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  min-height: 64px;
  padding: 12px 36px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(183, 176, 163, 0.45);
  background: rgba(244, 241, 235, 0.88);
  backdrop-filter: blur(16px);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}

.topbar-facility {
  font-size: 12px;
  color: var(--ink-soft);
}

/* コンテンツエリア */
.page-content {
  padding: 32px 36px 64px;
  max-width: 1400px;
}

/* フラッシュメッセージ */
.flash-messages {
  padding: 0 36px;
  padding-top: 16px;
}

/* =============================================
   ログイン画面（サイドバーなし） */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* =============================================
   カード（Bootstrap上書き）
   ============================================= */
.card {
  border-radius: var(--radius);
  border: 1px solid rgba(216, 210, 198, 0.5);
  background: var(--sheet);
  box-shadow: var(--shadow-soft);
  overflow: hidden; /* 内側の角が card の border-radius に沿うように */
}

/* カード内テーブル背景を透明に（Bootstrap の白を上書き） */
.card .table {
  background-color: transparent !important;
}
/* カレンダーは土日・当日のセル色を持つため対象外にする */
.card .table:not(.calendar-table) td,
.card .table:not(.calendar-table) th {
  background-color: transparent !important;
}

.card-header {
  background: rgba(243, 239, 231, 0.72);
  border-bottom: 1px solid rgba(216, 210, 198, 0.6);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 700;
  font-family: var(--font-display);
}

.card-footer {
  background: rgba(243, 239, 231, 0.5);
  border-top: 1px solid rgba(216, 210, 198, 0.5);
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* =============================================
   サイドバー非表示モード（日誌などワイドな画面用）
   ============================================= */
.no-sidebar .sidebar {
  display: none;
}
.no-sidebar .main-area {
  margin-left: 0;
}
.no-sidebar .topbar {
  padding: 0 24px;
  min-height: 56px;
  gap: 8px;
}
/* トップナビ水平メニュー */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  margin: 0 16px;
  overflow-x: auto;
}
.topbar-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.topbar-nav-item:hover {
  background: rgba(23, 45, 49, 0.07);
  color: var(--ink);
}
.topbar-nav-item.active {
  background: rgba(78, 125, 137, 0.12);
  color: var(--lake-text);
  font-weight: 700;
}
.topbar-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

/* =============================================
   ボタン（Bootstrap上書き）
   ============================================= */
.btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

/* 主要アクションはティール（参照サイトの「日誌を追加」「編集」ボタンに合わせる） */
.btn-primary {
  background-color: var(--lake);
  border-color: var(--lake);
  color: white;
  box-shadow: 0 6px 16px rgba(78, 125, 137, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lake-text);
  border-color: var(--lake-text);
  color: white;
  box-shadow: 0 8px 20px rgba(78, 125, 137, 0.3);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: var(--line-dark);
  color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: white;
  border-color: var(--ink-soft);
  color: var(--ink);
}

/* Bootstrap既定のグレーではなく、暖色のラインとインクの文字色に揃える */
.btn-outline-secondary {
  background-color: rgba(255, 253, 248, 0.72);
  border-color: var(--line);
  color: var(--ink);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--sheet);
  border-color: var(--line-dark);
  color: var(--ink);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-warning {
  background-color: var(--gold);
  border-color: var(--gold);
  color: white;
}

.btn-danger {
  background-color: var(--cinnabar);
  border-color: var(--cinnabar);
}

.btn-outline-primary {
  color: var(--lake-text);
  border-color: var(--lake);
}

.btn-outline-primary:hover {
  background-color: var(--lake);
  border-color: var(--lake);
  color: white;
}

.btn-sm {
  min-height: 34px;
  font-size: 12px;
  border-radius: 8px;
  padding: 4px 12px;
}

.btn-lg {
  min-height: 50px;
  font-size: 15px;
}

/* タブレット操作タップ領域最低44px */
.nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* =============================================
   フォームコントロール
   ============================================= */
.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid var(--field-line);
  background: #fffefa;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--lake);
  box-shadow: 0 0 0 3px rgba(78, 125, 137, 0.14);
  outline: none;
}

.form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

textarea.form-control {
  line-height: 1.65;
}

/* =============================================
   テーブル（Bootstrap上書き）
   ============================================= */
.table {
  color: var(--ink);
  font-size: 13px;
  border-color: var(--line);
}

.table thead th {
  background: var(--lake-soft);
  color: var(--lake-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 2px solid rgba(78, 125, 137, 0.42);
  padding: 12px;
}

/* カード内テーブルでも帯の色を保つ（.card .table の透明化より後に適用） */
.card .table thead th {
  background-color: var(--lake-soft) !important;
}

/* カレンダーの曜日見出しはクリームの帯（淡いブルーの帯は一覧表のみ） */
.table.calendar-table thead th,
.card .table.calendar-table thead th {
  background-color: rgba(243, 239, 231, 0.9) !important;
  color: var(--ink-soft);
}

/* 横スクロールするテーブルの外枠を角丸に */
.table-responsive {
  border: 1px solid var(--line);
  border-radius: 14px;
}

.table-responsive > .table {
  margin-bottom: 0;
}

/* 見出しは折り返さず、狭い画面では横スクロールさせる */
.table-responsive > .table > thead th {
  white-space: nowrap;
}

.table tbody tr:hover {
  background: rgba(78, 125, 137, 0.05);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 253, 248, 0.5);
}

/* =============================================
   アラート・バッジ
   ============================================= */
.alert {
  border-radius: 14px;
  font-size: 13px;
}

.alert-success {
  background-color: var(--color-success-bg);
  border-color: rgba(59, 109, 17, 0.35);
  color: var(--color-success);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: rgba(133, 79, 11, 0.35);
  color: var(--color-warning);
}

.alert-danger {
  background-color: var(--color-danger-bg);
  border-color: rgba(121, 31, 31, 0.35);
  color: var(--color-danger);
}

.alert-info {
  background-color: var(--lake-soft);
  border-color: transparent;
  color: var(--lake-text);
  padding: 16px 18px;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
}

/* =============================================
   モーダル（Bootstrap上書き）
   ============================================= */
.modal-content {
  border-radius: var(--radius);
  border: 1px solid rgba(216, 210, 198, 0.5);
  background: var(--sheet);
  box-shadow: 0 28px 65px rgba(15, 34, 38, 0.18);
}

.modal-header {
  border-bottom: 1px solid var(--line);
  background: rgba(243, 239, 231, 0.7);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 18px 24px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.modal-footer {
  border-top: 1px solid var(--line);
  background: rgba(243, 239, 231, 0.4);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* =============================================
   ナビバー（Bootstrap）— ログイン前などに残る場合
   ============================================= */
.navbar {
  background: var(--navy) !important;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #d9b88a;
  font-weight: 600;
}

/* =============================================
   ドロップダウン
   ============================================= */
.dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--sheet);
  font-size: 13px;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--lake-soft);
  color: var(--lake-text);
}

/* =============================================
   ページング・ブレッドクラム
   ============================================= */
.breadcrumb {
  font-size: 12px;
  color: var(--ink-soft);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--line-dark);
}

/* =============================================
   Bootstrap カラー変数マッピング
   ============================================= */
.text-primary { color: var(--lake-text) !important; }
.bg-primary    { background-color: var(--lake) !important; }
.border-primary { border-color: var(--lake) !important; }

/* =============================================
   音声入力ボタン（日誌モーダル）
   ============================================= */
.voice-btn {
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 160ms ease;
  flex-shrink: 0;
}

.voice-btn:hover {
  background: var(--lake-soft);
  border-color: var(--lake);
  color: var(--lake-text);
}

.voice-btn.recording {
  background: #fcebeb;
  border-color: var(--cinnabar);
  color: var(--cinnabar);
  animation: voice-pulse 800ms ease infinite alternate;
}

@keyframes voice-pulse {
  from { box-shadow: 0 0 0 0 rgba(189, 91, 64, 0.3); }
  to   { box-shadow: 0 0 0 6px rgba(189, 91, 64, 0); }
}

/* =============================================
   ハンバーガーメニューボタン（モバイルのみ表示）
   ============================================= */
/* トップバー タイトルラッパー */
.topbar-title-wrap {
  flex: 1;
  min-width: 0;
}

.sidebar-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid var(--field-line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease;
}
.sidebar-toggle-btn:hover {
  background: var(--sheet);
  border-color: var(--lake);
}

/* =============================================
   メモボタン（トップバー右）
   ============================================= */
.btn-memo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: var(--lake);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(78, 125, 137, 0.28);
  transition: background 150ms ease, transform 150ms ease;
}

.btn-memo:hover,
.btn-memo:focus {
  background: var(--lake-text);
  color: #fff;
  transform: translateY(-1px);
}

/* =============================================
   ホームの見出し
   ============================================= */
.dash-heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lake-text);
  margin-bottom: 14px;
}

/* =============================================
   空の状態
   ============================================= */
.empty-state {
  padding: 56px 24px;
  text-align: center;
}

.empty-state-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* =============================================
   月ナビゲーション（‹ 2026年9月 › 今月）
   ============================================= */
.monthnav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.monthnav-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.monthnav .btn {
  flex-shrink: 0;
}

/* =============================================
   凡例（請求マトリックス）
   ============================================= */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--ink-soft);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* =============================================
   サブナビ（請求マトリックス／上限額管理／請求書・領収書）
   ============================================= */
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.subnav .btn {
  border-radius: 12px;
}

/* 現在表示中のタブ */
.subnav .btn-primary.disabled,
.subnav .btn-primary:disabled {
  background-color: var(--tab-active);
  border-color: var(--tab-active);
  color: #fff;
  opacity: 1;
}

/* サイドバー背景オーバーレイ（モバイルでサイドバーを開いたときに背景を暗くする） */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.is-visible {
  display: block;
}

/* =============================================
   レスポンシブ — タブレット（641px〜1024px）
   ============================================= */
@media (min-width: 641px) and (max-width: 1024px) {
  .sidebar {
    width: 210px;
  }
  .main-area {
    margin-left: 210px;
  }
  .topbar {
    padding: 10px 20px;
  }
  .page-content {
    padding: 20px 20px 56px;
  }
  .flash-messages {
    padding: 12px 20px 0;
  }
}

/* =============================================
   レスポンシブ — スマートフォン（〜640px）
   ============================================= */
@media (max-width: 640px) {
  /* メインサイドバーをスライドドロワー化 */
  .sidebar {
    width: 268px;
    padding: 22px 16px 16px;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 201;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }

  /* ブランド表示を大きく */
  .sidebar-brand {
    gap: 14px;
    margin-bottom: 24px;
  }
  .sidebar-brand-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  .sidebar-brand-name {
    font-size: 22px;
  }
  .sidebar-brand-sub {
    font-size: 12px;
  }

  /* ナビ項目：アイコンを上、ラベルを下に置いた中央揃えの大きめタップ領域 */
  .sidebar-nav {
    gap: 6px;
  }
  .sidebar-nav-item {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 78px;
    padding: 14px 10px;
    border-radius: 14px;
    font-size: 15px;
    text-align: center;
  }
  .sidebar-nav-item:hover {
    transform: none;
  }
  .sidebar-nav-item i {
    width: auto;
    font-size: 22px;
  }
  .sidebar-nav-label {
    margin: 22px 0 8px 6px;
  }
  .sidebar-nav-submenu .sidebar-nav-item {
    min-height: 66px;
    padding-left: 10px;
    font-size: 14px;
  }
  /* 折りたたみトグルは行のまま（左揃え） */
  .sidebar-nav-dropdown-toggle {
    flex-direction: row;
    justify-content: space-between;
    min-height: 48px;
    text-align: left;
  }

  /* no-sidebar モードでもモバイルではドロワーとして使えるように */
  .no-sidebar .sidebar {
    display: flex;
  }

  /* メインエリアはサイドバー幅を使わない */
  .main-area,
  .no-sidebar .main-area {
    margin-left: 0;
  }

  /* ハンバーガーボタンを表示 */
  .sidebar-toggle-btn {
    display: flex;
  }

  /* トップバー */
  .topbar {
    padding: 10px 14px;
    min-height: 64px;
    gap: 10px;
  }
  /* タイトルは省略せず2行まで折り返す */
  .topbar-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .topbar-title {
    font-size: 19px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* トップナビを併置する画面（記録一覧など）だけは従来どおり1行に省略する */
  .no-sidebar .topbar-title-wrap {
    flex: 0 0 auto;
    max-width: 130px;
  }
  .no-sidebar .topbar-title {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* no-sidebar トップバー */
  .no-sidebar .topbar {
    padding: 0 12px;
    min-height: 52px;
  }
  /* topbar-nav を横スクロール可能に */
  .topbar-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav-item {
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ページコンテンツ余白 */
  .page-content {
    padding: 14px 12px 80px;
  }
  .flash-messages {
    padding: 10px 12px 0;
  }

  /* フォームコントロール — iOSの自動ズーム防止（font-size 16px以上が必要） */
  .form-control,
  .form-select {
    font-size: 16px !important;
  }
  textarea.form-control {
    min-height: 80px;
  }
  input.form-control,
  select.form-select {
    min-height: 52px;
  }

  /* ボタンのタップ領域を確保 */
  .btn {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 46px;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
  }

  /* モーダルをほぼ全画面サイズに */
  .modal-dialog {
    margin: 6px auto;
    max-width: calc(100vw - 12px);
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100vw - 12px);
  }
  .modal-dialog-scrollable .modal-body {
    max-height: calc(100svh - 140px);
  }

  /* テーブルフォントサイズ調整 */
  .table {
    font-size: 13px;
  }
  .table thead th {
    font-size: 12px;
    padding: 10px 8px;
  }
}

/* =========================================================
   個別支援計画：5ステップの進捗表示
   ========================================================= */
.stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stepper-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--sheet);
  color: var(--ink-soft);
  text-decoration: none;
  min-width: 0;
  position: relative;
}
a.stepper-item:hover { border-color: var(--lake); color: var(--lake-text); }
.stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink-soft);
  flex: none;
}
.stepper-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.stepper-item .stepper-meta { font-size: 11.5px; color: var(--ink-soft); }
.stepper-item.is-done { border-color: var(--sage); background: var(--sage-soft); }
.stepper-item.is-done .stepper-num { background: var(--sage); color: #fff; }
.stepper-item.is-current { border-color: var(--lake); background: var(--lake-soft); box-shadow: 0 0 0 3px rgba(78,125,137,0.15); }
.stepper-item.is-current .stepper-num { background: var(--lake); color: #fff; }
.stepper-item.is-locked { opacity: 0.6; background: var(--paper); }
.stepper-item.is-locked .stepper-label { color: var(--ink-soft); }
.stepper-bar {
  height: 6px; border-radius: 999px; background: var(--paper); overflow: hidden;
}
.stepper-bar > span { display: block; height: 100%; background: var(--lake); border-radius: 999px; }

/* ステップの残り項目チェックリスト */
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.req-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: var(--ink);
}
.req-list li i { font-size: 16px; line-height: 1.3; flex: none; }
.req-list li.is-done { color: var(--ink-soft); }
.req-list li.is-done i { color: var(--color-success); }
.req-list li.is-todo i { color: var(--cinnabar); }

/* ステップページの見出し */
.step-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.step-hero .stepper-num { width: 40px; height: 40px; font-size: 17px; }
.step-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.step-status.is-done    { background: var(--sage-soft); color: var(--color-success); }
.step-status.is-current { background: var(--lake-soft); color: var(--lake-text); }
.step-status.is-locked  { background: var(--paper); color: var(--ink-soft); }
.step-status.is-overdue { background: var(--cinnabar-soft); color: var(--cinnabar-text); }

/* 目標カード */
.goal-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff;
}
.goal-item + .goal-item { margin-top: 8px; }
.goal-item .goal-type { font-size: 11px; font-weight: 700; color: var(--lake-text); letter-spacing: .05em; }

.readonly-note {
  background: var(--paper); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft);
}

@media (max-width: 767.98px) {
  .stepper { grid-template-columns: 1fr; gap: 6px; }
  .stepper-item { flex-direction: row; align-items: center; padding: 10px 12px; }
  .stepper-item .stepper-meta { margin-left: auto; text-align: right; }
}

/* =========================================================
   観点（はい／いいえ）
   ========================================================= */
.vp-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.vp-row .vp-text { flex: 1 1 200px; min-width: 0; }
.vp-answers { display: inline-flex; gap: 6px; align-items: center; flex: none; }
.vp-btn {
  min-height: 34px; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: 13px;
  border: 1.5px solid var(--line-dark); background: #fff; color: var(--ink-soft); cursor: pointer;
}
.vp-btn.vp-yes.is-on { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.vp-btn.vp-no.is-on  { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
.vp-del { border: 0; background: none; color: var(--ink-soft); font-size: 18px; padding: 0 4px; cursor: pointer; }
.vp-list { list-style: none; margin: 0; padding: 0; }
.vp-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.vp-badge {
  display: inline-block; min-width: 52px; text-align: center; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--paper); color: var(--ink-soft); flex: none;
}
.vp-yes .vp-badge,  li.vp-yes .vp-badge  { background: var(--sage-soft); color: var(--color-success); }
li.vp-no .vp-badge   { background: var(--cinnabar-soft); color: var(--cinnabar-text); }

/* サイドバー：画面の見た目リンク */
.sidebar-theme-link { display: inline-block; margin-top: 4px; font-size: 11.5px; color: rgba(239,243,237,.7); text-decoration: none; }
.sidebar-theme-link:hover { color: #fff; }

/* =========================================================
   画面の見た目（着せ替え）選択ページ
   ========================================================= */
.theme-card { border-width: 2px; transition: border-color .15s; }
.theme-card.is-current { border-color: var(--lake); }
/* プレビューは現在のテーマに関係なく、その画面の見た目で固定する */
.theme-preview {
  height: 150px; display: flex; overflow: hidden; border-bottom: 1px solid #d8d2c6;
  background: #f3efe7; font-size: 9px; color: #172d31;
}
.theme-preview .tp-side { width: 26%; background: linear-gradient(150deg,#16333b,#10292f); padding: 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.theme-preview .tp-side span { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.theme-preview .tp-side span:first-child { background: #fff; width: 60%; }
.theme-preview .tp-main { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.theme-preview .tp-title { font-size: 11px; font-weight: 700; }
.theme-preview .tp-kicker { font-size: 7px; letter-spacing: .2em; color: #7fd3c3; }
.theme-preview .tp-box { border: 1px dashed #b7b0a3; border-radius: 6px; padding: 6px 8px; background: #fff; color: #172d31; }
.theme-preview .tp-line { height: 5px; width: 70%; border-radius: 3px; background: #d8d2c6; }
.theme-preview .tp-btn { align-self: flex-start; padding: 4px 10px; border-radius: 5px; background: #16333b; color: #fff; font-weight: 700; }
.theme-preview .tp-btn-big { align-self: stretch; text-align: center; font-size: 12px; padding: 8px; background: #111; }
.theme-preview .tp-btn-outline { align-self: stretch; text-align: center; background: transparent; border: 1px solid #7fd3c3; color: #7fd3c3; letter-spacing: .15em; }
.theme-preview .tp-step { border: 1.5px solid #b58a44; border-radius: 6px; padding: 6px; text-align: center; font-weight: 700; color: #b58a44; background: #fff; }
.theme-preview .tp-step-fill { background: #b58a44; color: #fff; }
.theme-preview-large { background: #fff; }
.theme-preview-large .tp-title { font-size: 14px; }
.theme-preview-large .tp-box { border: 2px solid #111; font-size: 11px; font-weight: 700; }
.theme-preview-stylish { background: #0f1f24; color: #eef3f1; }
.theme-preview-stylish .tp-box { background: #16333b; border-color: #2c4a52; color: #9fb2b6; }
.theme-preview-stylish .tp-line { background: #2c4a52; }
.theme-preview-simple { background: #fdf6e8; }

/* =========================================================
   テーマ：大きな文字（約1.6倍・押しやすいボタン・項目を絞る・高コントラスト）
   ========================================================= */
body.theme-large {
  --ink: #0f1c1f; --ink-soft: #2f4347; --line: #b7b0a3; --line-dark: #8e8779; --field-line: #7f9ba1;
  font-size: 22px; line-height: 1.6;
}
body.theme-large .sidebar-nav-item { min-height: 62px; font-size: 21px; }
body.theme-large .sidebar-nav-item i { font-size: 24px; }
body.theme-large .sidebar-nav-label { font-size: 15px; }
body.theme-large .nav-secondary { display: none; }
body.theme-large .sidebar-brand-name { font-size: 24px; }
body.theme-large .sidebar-user-name { font-size: 20px; }
body.theme-large .sidebar-logout-btn { font-size: 16px; min-height: 44px; }
body.theme-large .topbar-title { font-size: 27px; }
body.theme-large .btn, body.theme-large .btn-sm { min-height: 60px; font-size: 20px; padding: 12px 22px; border-radius: 14px; }
body.theme-large .btn-memo { min-height: 56px; font-size: 18px; }
body.theme-large .form-control, body.theme-large .form-select { font-size: 21px; padding: 14px 16px; min-height: 60px; border-width: 2px; }
body.theme-large textarea.form-control { min-height: 0; }
body.theme-large .form-label { font-size: 19px; }
body.theme-large .form-check-input { width: 1.5em; height: 1.5em; }
body.theme-large .table { font-size: 19px; }
body.theme-large .table thead th { font-size: 17px; }
body.theme-large .small, body.theme-large small, body.theme-large .form-text { font-size: 17px !important; }
body.theme-large .badge { font-size: 15px; }
body.theme-large h5, body.theme-large h6, body.theme-large .card-title { font-size: 1.15em; }
body.theme-large .stepper-label { font-size: 19px; }
body.theme-large .stepper-meta { font-size: 16px; }
body.theme-large .req-list li { font-size: 19px; }
body.theme-large .vp-btn { min-height: 52px; font-size: 19px; padding: 6px 22px; }
body.theme-large .vp-list li, body.theme-large .detail-section-text { font-size: 19px; }
body.theme-large .modal-dialog { max-width: 960px; }
body.theme-large a { text-decoration-thickness: 2px; }

/* =========================================================
   テーマ：スタイリッシュ（濃色の背景・装飾を抑える）
   ========================================================= */
body.theme-stylish, body.mode-dark, html.prefers-dark body.mode-auto { 
  --paper: #0f1f24; --sheet: #16333b; --ink: #eef3f1; --ink-soft: #a9bcc0; --line: #2c4a52; --line-dark: #3f6069;
  --field-line: #3f6069; --lake: #7fd3c3; --lake-text: #7fd3c3; --lake-soft: #1f3f47;
  --color-primary: #7fd3c3; --color-primary-bg: #1f3f47; --color-primary-light: #1f3f47; --color-primary-dark: #a8e6da;
  --sage-soft: #1e3b32; --color-success: #8fd9b6; --color-success-bg: #1e3b32;
  --cinnabar-soft: #46241c; --cinnabar-text: #f1a58e;
  --gold-soft: #3e3322; --color-warning-bg: #3e3322; --color-warning: #f0c97a;
  --color-danger-bg: #46241c; --color-danger: #f1a58e;
  --shadow: none; --shadow-soft: none; --tab-active: #7fd3c3;
  color-scheme: dark;
  background: #0f1f24;
}
body.theme-stylish::before { display: none; }
body.theme-stylish .sidebar, body.mode-dark .sidebar, html.prefers-dark body.mode-auto .sidebar { background: #0b171b; box-shadow: none; }
body.theme-stylish .sidebar-nav-item.active, body.mode-dark .sidebar-nav-item.active, html.prefers-dark body.mode-auto .sidebar-nav-item.active { box-shadow: inset 3px 0 0 #7fd3c3; }
body.theme-stylish .topbar, body.mode-dark .topbar, html.prefers-dark body.mode-auto .topbar { background: rgba(15, 31, 36, 0.9); border-bottom-color: #2c4a52; }
body.theme-stylish .card, body.theme-stylish .info-card, body.theme-stylish .modal-content, body.theme-stylish .dropdown-menu, body.mode-dark .card, body.mode-dark .info-card, body.mode-dark .modal-content, body.mode-dark .dropdown-menu, html.prefers-dark body.mode-auto .card, html.prefers-dark body.mode-auto .info-card, html.prefers-dark body.mode-auto .modal-content, html.prefers-dark body.mode-auto .dropdown-menu,
body.theme-stylish .goal-item, body.theme-stylish .stepper-item, body.mode-dark .goal-item, body.mode-dark .stepper-item, html.prefers-dark body.mode-auto .goal-item, html.prefers-dark body.mode-auto .stepper-item { 
  background: var(--sheet); border-color: var(--line); color: var(--ink); box-shadow: none;
}
body.theme-stylish .card-header, body.theme-stylish .modal-header, body.theme-stylish .modal-footer, body.mode-dark .card-header, body.mode-dark .modal-header, body.mode-dark .modal-footer, html.prefers-dark body.mode-auto .card-header, html.prefers-dark body.mode-auto .modal-header, html.prefers-dark body.mode-auto .modal-footer { background: transparent; border-color: var(--line); color: var(--ink); }
body.theme-stylish .form-control, body.theme-stylish .form-select, body.theme-stylish .simple-textarea, body.theme-stylish .simple-input, body.mode-dark .form-control, body.mode-dark .form-select, body.mode-dark .simple-textarea, body.mode-dark .simple-input, html.prefers-dark body.mode-auto .form-control, html.prefers-dark body.mode-auto .form-select, html.prefers-dark body.mode-auto .simple-textarea, html.prefers-dark body.mode-auto .simple-input { 
  background: #0f2429; color: var(--ink); border-color: var(--field-line);
}
body.theme-stylish .form-control::placeholder, body.mode-dark .form-control::placeholder, html.prefers-dark body.mode-auto .form-control::placeholder { color: #6f8a90; }
body.theme-stylish .form-control:disabled, body.theme-stylish .form-select:disabled, body.mode-dark .form-control:disabled, body.mode-dark .form-select:disabled, html.prefers-dark body.mode-auto .form-control:disabled, html.prefers-dark body.mode-auto .form-select:disabled { background: #14292f; color: var(--ink-soft); }
body.theme-stylish .table, body.mode-dark .table, html.prefers-dark body.mode-auto .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line);
  --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.05); color: var(--ink); }
body.theme-stylish .table thead th, body.mode-dark .table thead th, html.prefers-dark body.mode-auto .table thead th { background: #0f2429; color: var(--ink-soft); border-color: var(--line); }
body.theme-stylish .text-muted, body.theme-stylish .detail-label, body.theme-stylish .section-title, body.mode-dark .text-muted, body.mode-dark .detail-label, body.mode-dark .section-title, html.prefers-dark body.mode-auto .text-muted, html.prefers-dark body.mode-auto .detail-label, html.prefers-dark body.mode-auto .section-title { color: var(--ink-soft) !important; }
body.theme-stylish .text-dark, body.mode-dark .text-dark, html.prefers-dark body.mode-auto .text-dark { color: var(--ink) !important; }
body.theme-stylish .bg-white, body.theme-stylish .bg-light, body.mode-dark .bg-white, body.mode-dark .bg-light, html.prefers-dark body.mode-auto .bg-white, html.prefers-dark body.mode-auto .bg-light { background-color: var(--sheet) !important; color: var(--ink); }
body.theme-stylish .btn-primary { background: transparent; border: 1.5px solid #7fd3c3; color: #7fd3c3; box-shadow: none; letter-spacing: .06em; }
body.theme-stylish .btn-primary:hover, body.theme-stylish .btn-primary:focus { background: #7fd3c3; color: #0f1f24; border-color: #7fd3c3; }
body.theme-stylish .btn-outline-secondary, body.mode-dark .btn-outline-secondary, html.prefers-dark body.mode-auto .btn-outline-secondary { border-color: var(--line-dark); color: var(--ink-soft); }
body.theme-stylish .btn-outline-secondary:hover, body.mode-dark .btn-outline-secondary:hover, html.prefers-dark body.mode-auto .btn-outline-secondary:hover { background: var(--line); color: var(--ink); }
body.theme-stylish .btn-outline-primary, body.mode-dark .btn-outline-primary, html.prefers-dark body.mode-auto .btn-outline-primary { border-color: #7fd3c3; color: #7fd3c3; }
body.theme-stylish .btn-memo { background: transparent; border: 1px solid #7fd3c3; color: #7fd3c3; box-shadow: none; }
body.theme-stylish .subnav .btn-primary.disabled { background: #7fd3c3; color: #0f1f24; }
body.theme-stylish .alert, body.mode-dark .alert, html.prefers-dark body.mode-auto .alert { background: var(--sheet); border-color: var(--line); color: var(--ink); }
body.theme-stylish .alert-warning, body.mode-dark .alert-warning, html.prefers-dark body.mode-auto .alert-warning { border-color: var(--color-warning); }
body.theme-stylish .alert-danger, body.mode-dark .alert-danger, html.prefers-dark body.mode-auto .alert-danger { border-color: var(--color-danger); }
body.theme-stylish .badge.text-bg-secondary, body.mode-dark .badge.text-bg-secondary, html.prefers-dark body.mode-auto .badge.text-bg-secondary { background-color: var(--line) !important; color: var(--ink) !important; }
body.theme-stylish .badge.text-bg-info, body.mode-dark .badge.text-bg-info, html.prefers-dark body.mode-auto .badge.text-bg-info { background-color: #1f3f47 !important; color: #7fd3c3 !important; }
body.theme-stylish .badge.text-bg-success, body.mode-dark .badge.text-bg-success, html.prefers-dark body.mode-auto .badge.text-bg-success { background-color: #1e3b32 !important; color: #8fd9b6 !important; }
body.theme-stylish .badge.text-bg-warning, body.mode-dark .badge.text-bg-warning, html.prefers-dark body.mode-auto .badge.text-bg-warning { background-color: #3e3322 !important; color: #f0c97a !important; }
body.theme-stylish .stepper-num, body.mode-dark .stepper-num, html.prefers-dark body.mode-auto .stepper-num { background: #0f2429; color: var(--ink-soft); }
body.theme-stylish .stepper-item.is-done, body.mode-dark .stepper-item.is-done, html.prefers-dark body.mode-auto .stepper-item.is-done { background: #1e3b32; border-color: #8fd9b6; }
body.theme-stylish .stepper-item.is-current, body.mode-dark .stepper-item.is-current, html.prefers-dark body.mode-auto .stepper-item.is-current { background: #1f3f47; border-color: #7fd3c3; box-shadow: none; }
body.theme-stylish .stepper-item.is-locked, body.mode-dark .stepper-item.is-locked, html.prefers-dark body.mode-auto .stepper-item.is-locked { background: #12262b; }
body.theme-stylish .stepper-bar, body.mode-dark .stepper-bar, html.prefers-dark body.mode-auto .stepper-bar { background: #0f2429; }
body.theme-stylish .readonly-note, body.theme-stylish .empty-state, body.mode-dark .readonly-note, body.mode-dark .empty-state, html.prefers-dark body.mode-auto .readonly-note, html.prefers-dark body.mode-auto .empty-state { background: #0f2429; color: var(--ink-soft); }
body.theme-stylish .vp-btn, body.mode-dark .vp-btn, html.prefers-dark body.mode-auto .vp-btn { background: #0f2429; color: var(--ink-soft); border-color: var(--line-dark); }
body.theme-stylish .vp-badge, body.mode-dark .vp-badge, html.prefers-dark body.mode-auto .vp-badge { background: #0f2429; }
body.theme-stylish .btn-close, body.mode-dark .btn-close, html.prefers-dark body.mode-auto .btn-close { filter: invert(1) grayscale(1); }
body.theme-stylish hr, body.mode-dark hr, html.prefers-dark body.mode-auto hr { border-color: var(--line); opacity: 1; }
body.theme-stylish .calendar-table td, body.mode-dark .calendar-table td, html.prefers-dark body.mode-auto .calendar-table td { background: var(--sheet); }
body.theme-stylish [style*="background:#fff"], body.theme-stylish [style*="background: #fff"], body.mode-dark [style*="background:#fff"], body.mode-dark [style*="background: #fff"], html.prefers-dark body.mode-auto [style*="background:#fff"], html.prefers-dark body.mode-auto [style*="background: #fff"],
body.theme-stylish [style*="background:#f8fffe"], body.theme-stylish [style*="background:var(--sheet)"], body.mode-dark [style*="background:#f8fffe"], body.mode-dark [style*="background:var(--sheet)"], html.prefers-dark body.mode-auto [style*="background:#f8fffe"], html.prefers-dark body.mode-auto [style*="background:var(--sheet)"] { background: var(--sheet) !important; color: var(--ink); }

/* =========================================================
   テーマ：かんたん3ステップ（メニューを隠す）
   ========================================================= */
body.theme-simple { font-size: 18px; }
body.theme-simple .sidebar, body.theme-simple .sidebar-overlay { display: none !important; }
body.theme-simple .main-area { margin-left: 0; }
body.theme-simple .topbar { padding: 12px 20px; }
body.theme-simple .simple-home-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body.theme-simple .page-content { padding: 20px 16px 64px; max-width: 760px; margin: 0 auto; }
body.theme-simple .flash-messages { padding: 12px 16px 0; max-width: 760px; margin: 0 auto; }

.simple-wrap { display: flex; flex-direction: column; gap: 16px; }
.simple-back { font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.simple-daynav { display: flex; align-items: center; gap: 12px; }
.simple-daybtn {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
  border: 1.5px solid var(--line-dark); background: var(--sheet); color: var(--ink); text-decoration: none; font-size: 20px; flex: none;
}
.simple-day { flex: 1; text-align: center; }
.simple-day-date { font-size: 24px; font-weight: 700; }
.simple-today { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 14px; vertical-align: middle; }
.simple-day-sub { font-size: 15px; color: var(--ink-soft); }
.simple-list { display: flex; flex-direction: column; gap: 10px; }
.simple-item {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px;
  background: var(--sheet); border: 2px solid var(--line); color: var(--ink); text-decoration: none; font-size: 20px;
}
.simple-item:hover { border-color: var(--gold); color: var(--ink); }
.simple-item.is-done { background: var(--sage-soft); border-color: var(--sage); }
.simple-item.is-draft { border-color: var(--gold); }
.simple-item-num { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none; }
.simple-item-name { flex: 1; font-weight: 700; }
.simple-item-name small { font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.simple-item-state { font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.simple-item.is-done .simple-item-state { color: var(--color-success); font-weight: 700; }
.simple-item.is-draft .simple-item-state { color: var(--gold); font-weight: 700; }
.simple-item-arrow { color: var(--ink-soft); }
.simple-empty { padding: 40px; text-align: center; color: var(--ink-soft); background: var(--sheet); border-radius: 16px; }
.simple-others summary { cursor: pointer; font-size: 16px; color: var(--ink-soft); }
.simple-card {
  background: var(--sheet); border: 2px solid var(--line); border-radius: 18px; padding: 20px;
  transition: border-color .15s, opacity .15s;
}
.simple-card.is-active { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.simple-card.is-done { border-color: var(--sage); }
.simple-card.is-locked { opacity: .55; }
.simple-step-title { font-size: 21px; font-weight: 700; color: var(--gold); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.simple-card.is-done .simple-step-title { color: var(--color-success); }
.simple-step-num { font-size: 24px; }
.simple-hint { font-size: 15px; color: var(--ink-soft); margin-bottom: 12px; }
.simple-lbl { display: block; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 10px 0 4px; letter-spacing: .04em; }
.simple-textarea, .simple-input {
  width: 100%; border: 2px solid var(--field-line); border-radius: 12px; padding: 14px; font-size: 19px; font-family: var(--font-body);
  background: #fffefa; color: var(--ink);
}
.simple-textarea:focus, .simple-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.simple-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; border-radius: 14px;
  font-size: 20px; font-weight: 700; cursor: pointer; text-decoration: none; padding: 12px 18px;
}
.simple-btn-fill { background: var(--gold); border: 2px solid var(--gold); color: #fff; }
.simple-btn-fill:hover { background: #a0782f; border-color: #a0782f; color: #fff; }
.simple-btn-outline { background: #fff; border: 2px solid var(--gold); color: var(--gold); }
.simple-btn-outline:hover { background: var(--gold-soft); color: var(--gold); }
.simple-btn:disabled { opacity: .45; cursor: not-allowed; }
.simple-btn.recording { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
.simple-done-text p { margin: 0 0 6px; font-size: 17px; white-space: pre-wrap; }
.simple-vp-list { list-style: none; margin: 0; padding: 0; }
.simple-vp-list li { display: flex; align-items: center; gap: 8px; font-size: 17px; padding: 3px 0; }
.simple-vp-list .vp-badge { font-size: 13px; min-width: 60px; }
.simple-card .vp-row { padding: 10px 0; }
.simple-card .vp-text { font-size: 18px; font-weight: 700; }
.simple-card .vp-btn { min-height: 48px; font-size: 18px; padding: 6px 22px; }
body.theme-stylish .simple-card, body.theme-stylish .simple-item, body.theme-stylish .simple-daybtn, body.mode-dark .simple-card, body.mode-dark .simple-item, body.mode-dark .simple-daybtn, html.prefers-dark body.mode-auto .simple-card, html.prefers-dark body.mode-auto .simple-item, html.prefers-dark body.mode-auto .simple-daybtn { background: var(--sheet); }
body.theme-stylish .simple-btn-outline, body.mode-dark .simple-btn-outline, html.prefers-dark body.mode-auto .simple-btn-outline { background: transparent; }

/* ホーム：今週の来所状況 */
.dash-week th, .dash-week td { width: 14.28%; vertical-align: top; padding: 8px 6px; }
.dash-week th.is-today, .dash-week td.is-today { background: var(--lake-soft); }
.dash-week th.is-sat .dash-week-dow { color: var(--lake-text); }
.dash-week th.is-sun .dash-week-dow { color: var(--cinnabar-text); }
.dash-week-date { font-size: 18px; font-weight: 700; line-height: 1.1; }
.dash-week-dow { font-size: 11px; color: var(--ink-soft); }
.dash-week-count { font-size: 15px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dash-week-count small { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.dash-week-rec { font-size: 10.5px; font-weight: 700; color: var(--color-success); background: var(--sage-soft); border-radius: 999px; padding: 1px 7px; }
.dash-week-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dash-week-list li { padding: 2px 0; border-top: 1px dashed var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-week-list li a { color: var(--ink); text-decoration: none; }
.dash-week-list li.is-recorded a { color: var(--color-success); }
.dash-week-list li.is-recorded a::before { content: "\2713 "; }

/* =========================================================
   AI加算提案（日誌の詳細）
   ========================================================= */
.sugg-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sugg-item { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  border: 1.5px solid var(--gold); background: var(--gold-soft); border-radius: 12px; padding: 10px 12px; }
.sugg-item.is-adopted { border-color: var(--sage); background: var(--sage-soft); }
.sugg-item.is-dismissed { border-color: var(--line); background: var(--paper); opacity: .8; }
.sugg-main { flex: 1 1 240px; min-width: 0; }
.sugg-name { font-weight: 700; font-size: 14px; }
.sugg-name small { font-weight: 400; color: var(--ink-soft); }
.sugg-reason { font-size: 13px; margin-top: 2px; }
.sugg-evidence { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.sugg-actions { display: flex; gap: 6px; flex: none; }
.sugg-actions .btn-sm { min-height: 34px; padding: 4px 12px; }

/* =========================================================
   AIチャットボット（右下）
   ========================================================= */
.ai-chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%;
  border: 0; background: var(--lake); color: #fff; font-size: 24px; box-shadow: 0 10px 24px rgba(25,43,43,.25); cursor: pointer; }
.ai-chat-fab:hover { background: var(--lake-text); }
.ai-chat-panel { position: fixed; right: 20px; bottom: 90px; z-index: 1041; width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.ai-chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--lake-soft); }
.ai-chat-title { font-weight: 700; color: var(--lake-text); }
.ai-chat-sub { font-size: 11px; color: var(--ink-soft); }
.ai-chat-iconbtn { border: 0; background: transparent; color: var(--ink-soft); font-size: 15px; padding: 4px 6px; cursor: pointer; border-radius: 8px; }
.ai-chat-iconbtn:hover { background: rgba(0,0,0,.06); }
.ai-chat-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; white-space: pre-wrap; line-height: 1.6; }
.ai-msg.is-bot { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 4px; }
.ai-msg.is-user { align-self: flex-end; background: var(--lake); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.is-error { align-self: flex-start; background: var(--cinnabar-soft); color: var(--cinnabar-text); }
.ai-msg.is-wait { color: var(--ink-soft); font-style: italic; }
.ai-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ai-choice { border: 1.5px solid var(--lake); background: #fff; color: var(--lake-text); border-radius: 10px; padding: 8px 10px; font-weight: 700; cursor: pointer; text-align: left; }
.ai-choice:hover { background: var(--lake-soft); }
.ai-chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ai-chat-form textarea { flex: 1; resize: none; border: 1px solid var(--field-line); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-family: var(--font-body); background: #fffefa; color: var(--ink); max-height: 120px; }
.ai-chat-send { width: 44px; border: 0; border-radius: 12px; background: var(--lake); color: #fff; font-size: 16px; cursor: pointer; }
.ai-chat-send:disabled { opacity: .5; }
.ai-chat-note { font-size: 10.5px; color: var(--ink-soft); padding: 0 12px 10px; }
body.theme-stylish .ai-chat-panel, body.theme-stylish .ai-msg.is-bot, body.mode-dark .ai-chat-panel, body.mode-dark .ai-msg.is-bot, html.prefers-dark body.mode-auto .ai-chat-panel, html.prefers-dark body.mode-auto .ai-msg.is-bot { background: var(--sheet); }
body.theme-stylish .ai-msg.is-bot, body.mode-dark .ai-msg.is-bot, html.prefers-dark body.mode-auto .ai-msg.is-bot { background: #0f2429; }
body.theme-stylish .ai-choice, body.theme-stylish .ai-chat-form textarea, body.mode-dark .ai-choice, body.mode-dark .ai-chat-form textarea, html.prefers-dark body.mode-auto .ai-choice, html.prefers-dark body.mode-auto .ai-chat-form textarea { background: #0f2429; color: var(--ink); }
body.theme-large .ai-msg { font-size: 18px; }
body.theme-large .ai-chat-form textarea { font-size: 18px; }
@media (max-width: 640px) { .ai-chat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; } .ai-chat-panel { right: 8px; left: 8px; width: auto; bottom: 76px; } }

/* 法人ロゴ */
.sidebar-brand-icon.has-logo { background: #fff; padding: 3px; overflow: hidden; }
.sidebar-brand-icon.has-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
/* 職員・運用管理 */
.staff-table td { vertical-align: middle; }

/* ダークモード（テーマから独立）：スタイリッシュと同じ配色。主要ボタンは塗りのまま */
body.mode-dark::before, html.prefers-dark body.mode-auto::before { display: none; }
body.mode-dark .btn-primary, html.prefers-dark body.mode-auto .btn-primary { background: #7fd3c3; border-color: #7fd3c3; color: #0f1f24; box-shadow: none; }
body.mode-dark .btn-primary:hover, html.prefers-dark body.mode-auto .btn-primary:hover { background: #a8e6da; border-color: #a8e6da; color: #0f1f24; }
body.mode-dark .btn-memo, html.prefers-dark body.mode-auto .btn-memo { background: #7fd3c3; color: #0f1f24; box-shadow: none; }
body.mode-dark .subnav .btn-primary.disabled, html.prefers-dark body.mode-auto .subnav .btn-primary.disabled { background: #7fd3c3; color: #0f1f24; }

/* 表示の細かい設定（見た目ページ） */
.pref-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--line); cursor: pointer; font-size: 12.5px; background: var(--sheet); }
.pref-swatch input { display: none; }
.pref-swatch span.dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.pref-swatch:has(input:checked) { border-color: var(--lake); box-shadow: 0 0 0 2px var(--lake-soft); }
.pref-preview { border: 1px dashed var(--line-dark); border-radius: 12px; padding: 14px; }

/* ダーク／スタイリッシュ：Bootstrap のリスト・ページネーション */
body.theme-stylish .list-group-item, body.mode-dark .list-group-item, html.prefers-dark body.mode-auto .list-group-item {
  background: var(--sheet); color: var(--ink); border-color: var(--line);
}
body.theme-stylish .theme-card .card-body, body.mode-dark .theme-card .card-body, html.prefers-dark body.mode-auto .theme-card .card-body,
body.theme-stylish .pref-swatch, body.mode-dark .pref-swatch, html.prefers-dark body.mode-auto .pref-swatch { color: var(--ink); }
body.theme-stylish .pref-preview, body.mode-dark .pref-preview, html.prefers-dark body.mode-auto .pref-preview { color: var(--ink); }
body.theme-stylish .btn-outline-secondary:disabled, body.mode-dark .btn-outline-secondary:disabled, html.prefers-dark body.mode-auto .btn-outline-secondary:disabled { color: var(--ink-soft); border-color: var(--line); }