/* ============================================================
   www_memo スマホモード専用CSS（PC版 style.css とは完全独立）
   常に body.mobile-mode スコープ配下でのみ適用され、PC版と共存する
   ============================================================ */

/* ---- ヘッダー: lv10共通ヘッダー(左上、高さ約42px)を避けて縮小
   PC版は breadcrumb/toolbar とも position:absolute で広い画面前提のため、
   スマホ幅では重なって操作不能になる。static化して縦積みの通常フローに変更する ---- */
body.mobile-mode header {
  height: auto;
  padding: 54px 10px 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.mobile-mode header h1 {
  display: none;
}

body.mobile-mode .breadcrumb {
  position: static !important;
  left: auto !important;
  top: auto !important;
  font-size: 1em;
}

body.mobile-mode .breadcrumb a,
body.mobile-mode .breadcrumb-back {
  display: inline-block;
  padding: 8px 6px;
  margin: -8px 0;
}

body.mobile-mode .toolbar {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ツールバーの個別ボタンは歯車メニューに集約済みのため隠す。検索/設定は残す */
body.mobile-mode .toolbar > .btn:not(#settings-btn) {
  display: none !important;
}

body.mobile-mode #search-input {
  width: 140px !important;
}

/* ---- 本体: 縦積みリスト表示（position/x/y/z-indexは一切反映しない） ---- */
body.mobile-mode .notes-container {
  width: 100% !important;
  height: auto !important;
  min-height: calc(100vh - 130px);
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 100px;
  box-sizing: border-box;
}

body.mobile-mode .note-item {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* リサイズハンドルは非表示（スマホではサイズ変更不要） */
body.mobile-mode .ui-resizable-handle {
  display: none !important;
}

/* PC版のレスポンシブ縮小表示(.note-item.small等)を無効化し、常時全ボタン表示 */
body.mobile-mode .note-actions > *,
body.mobile-mode .note-meta > * {
  display: inline-flex !important;
}
body.mobile-mode .tag-list {
  display: flex !important;
}

/* ロックボタンは不要（フルサイズ表示前提のため。上の全表示ルールより後に置いて上書き） */
body.mobile-mode .lock-btn {
  display: none !important;
}

/* 移動ボタン: PC版では非表示、モバイルのみ表示
   （PC版の .note-item.large .note-actions>* が詳細度(0,0,3,0)で強制表示するため、それを上回る詳細度で明示的に打ち消す） */
.note-item .note-actions > .move-btn {
  display: none !important;
}
body.mobile-mode .note-item .note-actions > .move-btn {
  display: inline-block !important;
  background: #6f42c1 !important;
  color: #fff !important;
}

/* ---- 付箋: 本文(textarea)は常に表示・常に入力可能。折りたたみ時は低い高さのプレビュー兼入力欄、
   タップ(フォーカス)すると自動的にフルサイズへ展開する（排他）。
   「内容が見えないのに入力欄だけ存在する」という無意味な状態を作らないための方針 ---- */
body.mobile-mode .note-item:not(.folder) .note-header {
  cursor: pointer;
}

/* タグ・期限・優先度の行は折りたたみ時のみ隠す（本文とは切り離して制御） */
body.mobile-mode .note-item:not(.folder):not(.mobile-expanded) .note-meta {
  display: none !important;
}

/* 本文は常時表示させる（PC版のCSSにより一度 display:none にされないよう明示） */
body.mobile-mode .note-item:not(.folder) .note-content {
  display: flex !important;
}

body.mobile-mode .note-item:not(.folder):not(.mobile-expanded) .note-content textarea {
  min-height: 70px !important;
  max-height: 70px;
}

body.mobile-mode .note-item:not(.folder).mobile-expanded .note-content textarea {
  min-height: 45vh;
}

body.mobile-mode .note-item:not(.folder):not(.mobile-expanded) {
  opacity: 0.9;
}

body.mobile-mode .note-item:not(.folder).mobile-expanded {
  border-width: 3px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ---- フォルダ: アイコン表示ではなくリスト行表示 ---- */
body.mobile-mode .folder {
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  padding: 12px 14px !important;
  border-radius: 8px;
  gap: 10px;
}

body.mobile-mode .folder img {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}

body.mobile-mode .folder .note-header {
  position: static;
  background: transparent;
  flex: 1;
  text-align: left;
  border-radius: 0;
  padding: 0;
}

body.mobile-mode .folder .title-input {
  text-align: left;
  font-size: 1rem;
  pointer-events: none; /* タップは全てフォルダを開く操作として扱う（タイトル編集はPCモードで行う） */
}

body.mobile-mode .folder .child-count {
  position: static;
  margin-left: auto;
}

/* ---- フッター: セーフエリア対応（www_neo方式踏襲） ---- */
body.mobile-mode #footer {
  flex-wrap: wrap;
  height: auto;
  min-height: 40px;
  padding: 6px 8px calc(env(safe-area-inset-bottom, 6px) + 6px);
}

body.mobile-mode #footer-list-container {
  order: 2;
  flex-basis: 100%;
  margin-right: 0;
}

body.mobile-mode #sort-controls {
  flex-wrap: wrap;
  gap: 4px;
}