/* 画面デモだけの追加スタイル（デモ表示・狭い画面のメニュー） */
.topbar-right { display: flex; align-items: center; gap: 14px; }
.demo-pill { font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border: 1px solid #ecd27d; border-radius: 10px; padding: 2px 9px; letter-spacing: .05em; cursor: default; }
.demo-note { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.demo-line { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; }
.ci-detail .demo-line { text-align: left; margin-top: 14px; }
.dash-table-wrap { overflow-x: auto; }
.btn:focus-visible, .nav a:focus-visible, .list-item:focus-visible { outline: 3px solid #9cc0ea; outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.modal-back { padding: 32px 16px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* 狭い画面：メニューを上部の横並びにする */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; flex: 0 0 auto; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .brand { border-bottom: none; padding: 10px 12px; flex: 0 0 auto; }
  .brand-sub { display: none; }
  .nav { flex-direction: row; padding: 0; flex: 0 0 auto; }
  .nav a { padding: 14px 12px; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .nav a.active { border-left: none; border-bottom-color: #8fb3df; }
  .nav-sep, .sidebar-foot { display: none; }
  .topbar { padding: 10px 16px; position: static; flex-wrap: wrap; gap: 8px; }
  .user-box input { width: 120px; }
  .view { padding: 16px 16px 48px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .auto-head select { min-width: 0; width: 100%; }
  .auto-total { gap: 18px; }
}