/* 2つの画面で同じでなければならない見た目。
 *
 * 業務ダッシュボード（/）と営業・請求管理（/business/）は別々のプログラムだが、
 * メモの吹き出しとメニューのボタンは同じ部品（public/memo-widget.js と同じ形のボタン）を出す。
 * 以前これを2つのCSSへ別々に書いていたため、片方だけ直す取りこぼしが実際に起きた
 * （読み上げ用の文字を隠す .sr-only が片方に無く、ボタンから文字がはみ出した）。
 * ここへ一度だけ書き、両方が読み込む。
 *
 * 色は画面ごとに名前が違うので、この下の --ui-* を各画面が自分の色へ割り当てる。
 * 割り当ては public/styles.css と business-app/app/globals.css の :root にある。
 *
 *   --ui-panel         パネルの地色
 *   --ui-line          罫線
 *   --ui-line-strong   濃い罫線
 *   --ui-muted         控えめな文字
 *   --ui-subtle        さらに控えめな文字
 *   --ui-accent        主役の色（ボタンの地色）
 *   --ui-accent-strong 押したときの色
 *   --ui-accent-soft   主役の色の薄い地
 *   --ui-danger        削除など注意を引く色
 *   --ui-sidebar       サイドバーの地色
 */

/* hidden属性は display を指定した要素に負ける。JSで開閉する要素が開きっぱなしになるため、ここで勝たせる。 */
[hidden] { display: none !important; }

/* 読み上げソフトにだけ渡す文字。画面には出さない。 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- どの画面にも浮かぶメモ。右下から開く。 ---- */
#memo-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.memo-launcher { position: relative; display: grid; width: 52px; height: 52px; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--ui-accent); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); cursor: pointer; transition: transform 160ms ease, background 160ms ease; }
.memo-launcher:hover { transform: translateY(-2px); background: var(--ui-accent-strong); }
.memo-launcher svg { width: 24px; height: 24px; }
.memo-count { position: absolute; top: -2px; right: -2px; min-width: 20px; padding: 2px 5px; border-radius: 999px; color: var(--ui-accent); background: #ffd97d; font-size: 11px; font-weight: 700; line-height: 1.4; }
.memo-panel { display: flex; flex-direction: column; width: min(340px, calc(100vw - 40px)); max-height: min(520px, calc(100vh - 120px)); max-height: min(520px, calc(100dvh - 120px)); overflow: hidden; border: 1px solid var(--ui-line-strong); border-radius: 12px; background: var(--ui-panel); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22); }
.memo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--ui-line); }
.memo-scope { display: flex; gap: 4px; }
.memo-scope button { min-height: 32px; padding: 0 11px; border: 1px solid var(--ui-line); border-radius: 999px; color: var(--ui-muted); background: white; font-size: 12px; cursor: pointer; }
.memo-scope button.is-active { border-color: var(--ui-accent); color: white; background: var(--ui-accent); }
.memo-close { min-width: 32px; min-height: 32px; border: 0; border-radius: 6px; color: var(--ui-muted); background: transparent; font-size: 19px; cursor: pointer; }
.memo-close:hover { background: #f3f3f3; }
/* 経営の相談。経営状況と予実管理の両方に、同じ見た目で出す。 */
.advisor { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-panel); }
.advisor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.advisor-head h2 { margin: 2px 0 0; font-size: 17px; }
.advisor-eyebrow { margin: 0; color: var(--ui-accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.advisor-note { margin: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.7; }
.advisor-log { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px; }
.advisor-empty, .advisor-error { margin: 0; padding: 20px 4px; color: var(--ui-muted); font-size: 12px; text-align: center; }
.advisor-error { color: var(--ui-danger); }
.advisor-message { padding: 11px 13px; border-radius: 10px; }
/* 自分の発言は右寄せの色付き、AIの答えは左の白。どちらが話したか一目で分かるように。 */
.advisor-user { justify-self: end; max-width: 85%; color: var(--ui-panel); background: var(--ui-accent); }
.advisor-assistant { border: 1px solid var(--ui-line); background: #fcfcfc; }
.advisor-system { border: 1px dashed var(--ui-line-strong); color: var(--ui-muted); background: transparent; font-size: 12px; }
.advisor-body { margin: 0; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 提案された目標。押すまで保存しないことが分かるようにしておく。 */
.advisor-proposal { margin-top: 10px; padding: 12px; border: 1px solid var(--ui-accent-soft); border-radius: 8px; background: var(--ui-accent-soft); }
.advisor-proposal-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.advisor-proposal table { width: 100%; border-collapse: collapse; font-size: 12px; }
.advisor-proposal th { padding: 4px 6px; color: var(--ui-muted); font-size: 10px; text-align: left; }
.advisor-proposal td { padding: 4px 6px; border-top: 1px solid rgb(255 255 255 / 60%); font-variant-numeric: tabular-nums; }
.advisor-proposal td:not(:first-child) { text-align: right; }
.advisor-proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.advisor-proposal-note { color: var(--ui-muted); font-size: 10px; }
.advisor-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.advisor-form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--ui-line-strong); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.advisor-form button { min-height: 44px; white-space: nowrap; }
@media (max-width: 620px) {
  .advisor { padding: 16px; }
  .advisor-form { grid-template-columns: 1fr; }
  .advisor-user { max-width: 100%; }
}

/* 案件など「もの」に付けるメモのとき、行き先を出す。
   出さないと、案件のメモが画面のメモに見える。 */
.memo-target { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--ui-line); color: var(--ui-accent); background: var(--ui-accent-soft); font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.memo-list { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 9px; }
.memo-empty { margin: 0; padding: 18px 4px; color: var(--ui-muted); font-size: 12px; text-align: center; }
.memo-item { padding: 9px 11px; border: 1px solid var(--ui-line); border-radius: 9px; background: #fcfcfc; }
.memo-item p { margin: 0; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.memo-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--ui-subtle); font-size: 10px; }
.memo-screen { padding: 1px 6px; border-radius: 999px; color: var(--ui-accent); background: var(--ui-accent-soft); font-weight: 650; }
.memo-meta time { margin-right: auto; }
/* 文字は小さいままにして、指で押せるよう当たり判定だけ広げる。
   スマホで押し損ねると、消したいメモが消えず余計な操作が起きる。 */
.memo-delete { border: 0; position: relative; padding: 4px 6px; margin: -4px -6px; color: var(--ui-subtle); background: transparent; font-size: 10px; cursor: pointer; }
.memo-delete::after { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); content: ""; }
.memo-delete:hover { color: var(--ui-danger); }
/* メモは書いたあとに直せる。次の一手としても使うので、書き換えられる必要がある。 */
.memo-edit { border: 0; padding: 4px 6px; margin: -4px 0; color: var(--ui-subtle); background: transparent; font-size: 10px; cursor: pointer; }
.memo-edit:hover { color: var(--ui-ink); text-decoration: underline; }
.memo-item.is-editing { border-color: var(--ui-line-strong, var(--ui-line)); background: white; }
.memo-edit-form { display: grid; gap: 7px; }
.memo-edit-form textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 7px; background: white; font: inherit; font-size: 13px; line-height: 1.65; resize: vertical; }
.memo-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.memo-edit-cancel { border: 0; padding: 0 6px; color: var(--ui-subtle); background: transparent; font-size: 11px; cursor: pointer; }
.memo-form { display: grid; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--ui-line); background: #fbfdfc; }
/* iOSは16px未満の入力欄に触れると画面を拡大し、離れても元に戻さない。16pxは拡大させないための下限。 */
.memo-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--ui-line-strong); border-radius: 7px; font: inherit; font-size: 16px; resize: vertical; }
.memo-form textarea:focus { border-color: var(--ui-accent-strong); outline: 3px solid rgba(40, 40, 40, 0.12); }
.memo-form button { min-height: 40px; border: 0; border-radius: 7px; color: white; background: var(--ui-accent); font-weight: 700; cursor: pointer; }
.memo-form button:hover { background: var(--ui-accent-strong); }

/* ---- 狭い画面のメニューボタン。帯は出さず、丸いボタンだけを浮かせる。 ----
   表示するかどうかは画面ごとの切り替え幅が違うので、display だけ各CSSが決める。
   右上は「再読み込み」、右下はメモが居るので左下に置く。 */
.nav-toggle { display: none; position: fixed; left: 14px; bottom: 14px; z-index: 40; width: 48px; height: 48px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: white; background: var(--ui-sidebar); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); opacity: 0.5; cursor: pointer; transition: opacity 160ms ease; }
.nav-toggle[aria-expanded="true"], .nav-toggle:hover, .nav-toggle:focus-visible { opacity: 1; }
.nav-toggle svg { width: 22px; height: 22px; }
/* 現在地の文字はボタンから外す。アイコンだけにするため。開いたメニューで今いる項目が目立つ。 */
.nav-current { display: none; }

@media (max-width: 620px) {
  #memo-widget { right: 14px; bottom: 14px; }
  .memo-panel { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
}

/* 画面に浮かせている部品は紙に出さない。
   メモの丸ボタンは position: fixed なので、どのページを印刷しても右下に残り、
   帳票の紙面に白い丸として写り込む。
   この指定は shared.css に置く。ボタンを出しているのがこのファイルなので、
   出し入れを1か所にまとめておかないと、使う画面を増やしたときにまた写り込む。 */
@media print {
  #memo-widget, .nav-toggle { display: none !important; }
}

/* メニューのグループ見出し（DASHBOARD・SALES…）。英語をロゴの文字と同じ傾き（約7°）で出す。
   font-style: italic は書体ごとに傾きが違うので、skewX で角度をロゴにそろえる。
   ロゴの「L」の縦画は約7°傾いている。項目は日本語なので傾けない（日本語の斜体は読みにくい）。 */
.nav-text, .brand-sub { display: inline-block; transform: skewX(-7deg); }
.nav-heading .nav-text, .nav-section-label .nav-text { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.brand-sub { font-weight: 700; letter-spacing: .04em; }