/* ZtO 売上管理アプリ — 共通スタイル
   決定事項 11-0 の配色をそのまま実装する。ダークモードにも対応。 */

:root {
  --accent:      #0875BD;   /* 平野様指定 rgb(8,117,189) */
  --accent-dark: #084A78;
  --accent-pale: #E3F1FA;
  --nav-bg:      #062C46;
  --nav-text:    #F2F8FD;
  --nav-sub:     #D5E9F7;

  --surface:  #FFFFFF;
  --surface2: #F7F7F5;
  --page:     #FCFCFB;
  --text:     #0B0B0B;
  --text2:    #52514E;
  --muted:    #898781;
  --border:   rgba(11,11,11,.12);

  --danger-bg: #FCEBEB;  --danger: #A32D2D;
  --warn-bg:   #FAEEDA;  --warn:   #854F0B;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1A1A19; --surface2: #222220; --page: #141413;
    --text: #FFFFFF; --text2: #C3C2B7; --muted: #898781;
    --border: rgba(255,255,255,.12);
    --danger-bg: #3A1F1F; --danger: #F09595;
    --warn-bg: #3A2E19;  --warn:   #FAC775;
    --accent-pale: #0E3550;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 14px; line-height: 1.7;
}
a { color: inherit; text-decoration: none; }

/* ─ 全体構造 ─ */
.shell { display: flex; min-height: 100vh; }

/* ─ サイドバー（既定はアイコンのみ46px） ─ */
.nav {
  width: 46px; flex-shrink: 0; background: var(--nav-bg);
  padding: 12px 6px; display: flex; flex-direction: column; gap: 3px;
  overflow: hidden; transition: width .15s;
}
.nav.open { width: 150px; }
.logo { background: #FFF; border-radius: 6px; padding: 4px 5px; margin-bottom: 6px; }
.logo img { width: 100%; height: auto; display: block; }
.nav-sub { display: none; font-size: 11px; color: var(--nav-sub); text-align: center; margin: 0 0 10px; }
.nav.open .nav-sub { display: block; }
.nav-item {
  padding: 8px; border-radius: var(--radius); color: var(--nav-text);
  font-size: 12px; white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.active { background: var(--accent); color: #FFF; font-weight: 500; }
.nav-item i { font-size: 15px; flex-shrink: 0; }
.nav-label { display: none; }
.nav.open .nav-label { display: inline; }
.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
#navToggle {
  background: rgba(255,255,255,.10); border: 0; color: var(--nav-sub);
  border-radius: var(--radius); padding: 7px; cursor: pointer; font-size: 13px;
}

.splitter { width: 5px; flex-shrink: 0; cursor: col-resize; background: var(--border); }
.splitter:hover, .splitter.drag { background: var(--accent); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: .7rem 1.1rem; border-bottom: .5px solid var(--border); background: var(--surface);
}
.topbar h1 { font-size: 15px; font-weight: 500; margin: 0; }
.topbar .user { margin-left: auto; font-size: 12px; color: var(--text2); }
.content { flex: 1; padding: 1rem 1.1rem; }

/* ─ 部品 ─ */
.card {
  background: var(--surface); border: .5px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius); padding: .7rem .9rem; }
.kpi .label { font-size: 11px; color: var(--text2); margin: 0 0 3px; }
.kpi .value { font-size: 19px; font-weight: 500; margin: 0; }
.kpi .note  { font-size: 10px; color: var(--muted); margin: 3px 0 0; }
.kpi.danger { background: var(--danger-bg); border: 0; }
.kpi.danger .label, .kpi.danger .value, .kpi.danger .note { color: var(--danger); }
.kpi.warn { background: var(--warn-bg); border: 0; }
.kpi.warn .label, .kpi.warn .value, .kpi.warn .note { color: var(--warn); }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; font-weight: 500; color: var(--text2); background: var(--surface2); padding: 7px 12px; }
td { padding: 7px 12px; border-top: .5px solid var(--border); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.btn {
  display: inline-block; background: var(--accent); color: #FFF; border: 0;
  padding: 9px 18px; border-radius: var(--radius); font-size: 13px; cursor: pointer;
}
.btn.sub { background: var(--surface2); color: var(--text2); border: .5px solid var(--border); }
.btn:disabled { background: var(--surface2); color: var(--muted); cursor: not-allowed; }

/* 入力欄は種類を問わず同じ見た目・同じ高さにする。
   number や date を書き忘れると、その欄だけ小さくなって行が揃わない。 */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=email], input[type=tel], select, textarea {
  width: 100%; height: 36px; padding: 0 10px; font-size: 13px; line-height: 36px;
  color: var(--text); font-family: inherit;
  background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius);
  box-sizing: border-box;
}
textarea { height: auto; padding: 8px 10px; line-height: 1.6; }
select { padding-right: 26px; }
input:focus, select:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent-pale); border-color: var(--accent); }
label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.field { margin-bottom: 14px; }

/* ─ 会社えらび（数が多いので絞り込みつき）─
   検索欄と選択欄を縦に重ね、打つと候補が減る。JSが効かなくても選択欄だけで使える。 */
.cosel { position: relative; }
.cosel-find {
  height: 30px; line-height: 30px; font-size: 12px; margin-bottom: 4px;
  background-image: none;
}
.cosel-find::placeholder { color: var(--muted); }
.cosel-count { font-size: 10px; color: var(--muted); margin-top: 3px; display: block; }
.cosel select[size] { height: auto; line-height: 1.6; padding: 4px 6px; }
.cosel select[size] option { padding: 4px 6px; border-radius: 4px; }

/* ─ 売価ルールの「仕入額 × 5 ÷ 4　端数 [四捨五入]」の行 ─
   1行の式として読めるように、文字も入力欄も横一列・同じ高さで並べる。
   見出しを上に積む作りは、少し崩れただけで読めなくなるので使わない。 */
.ratio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ratio .rt { font-size: 13px; color: var(--text2); white-space: nowrap; line-height: 36px; }
.ratio .rt.sep { margin-left: 12px; }
.ratio input.rn { width: 70px; text-align: center; }
.ratio select.rs { width: 130px; }

@media (max-width: 520px) {
  .ratio .rt.sep { margin-left: 0; }
}

/* ─ 対象月の選択（マウスだけで操作できる） ─ */
.mpick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.mpick-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  border: .5px solid var(--border); background: var(--surface);
  color: var(--text2); user-select: none;
}
.mpick-btn svg {
  width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.mpick-btn:hover { background: var(--accent-pale); color: var(--accent-dark); border-color: var(--accent); }
.mpick-sel {
  width: auto; min-width: 150px; height: 34px; padding: 0 30px 0 12px;
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.mpick-now {
  height: 34px; display: inline-flex; align-items: center; padding: 0 13px;
  border-radius: var(--radius); border: .5px solid var(--accent);
  color: var(--accent); font-size: 12px;
}
.mpick-now:hover { background: var(--accent); color: #fff; }
.mpick-hint { font-size: 11px; color: var(--muted); margin-left: 4px; }

@media (max-width: 640px) {
  .mpick-hint { display: none; }
  .mpick-sel { min-width: 130px; }
}

/* ─ 月次推移の縦棒グラフ（分析画面）─
   棒どうしの隙間は棒の幅より狭くする（棒 : 隙間 ≒ 4 : 1）。
   目盛りは薄い横線だけにして、棒より目立たせない。 */
.tchart-wrap { display: flex; gap: 8px; }
.tchart-axis {
  width: 34px; height: var(--tchart-h, 150px); position: relative; flex: none;
  font-size: 9px; color: var(--muted);
}
.tchart-axis span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.tchart-plot { flex: 1; min-width: 0; }
.tchart {
  position: relative; height: var(--tchart-h, 150px);
  display: flex; align-items: flex-end; gap: 6px;
  border-bottom: 1px solid var(--border);
}
.tgrid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); opacity: .45; }
.tcol {
  position: relative; z-index: 1;
  flex: 1 1 0; max-width: 52px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.tbar {
  width: 100%; min-height: 2px; background: #A8CDEE;
  border-radius: 2px 2px 0 0; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; transition: filter .1s;
}
.tbar-gross { width: 100%; background: var(--accent); }
.tval {
  position: absolute; bottom: 100%; margin-bottom: 3px;
  font-size: 9px; color: var(--muted); white-space: nowrap; opacity: 0;
}
.tcol:hover .tbar { filter: brightness(1.06); }
.tcol:hover .tval, .tcol.now .tval { opacity: 1; }
.tcol.now .tval { color: var(--accent-dark); font-weight: 600; }
.tlabels { display: flex; gap: 6px; margin-top: 5px; }
.tlabel {
  flex: 1 1 0; max-width: 52px; text-align: center;
  font-size: 10px; color: var(--text2); line-height: 1.3;
}
.tlabel.now { color: var(--accent-dark); font-weight: 600; }
.tyear { display: block; font-size: 9px; color: var(--muted); font-weight: 400; }

@media (max-width: 640px) {
  .tchart-wrap { --tchart-h: 120px; }
  .tlabel { font-size: 9px; }
}

.alert { border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.alert.err  { background: var(--danger-bg); color: var(--danger); }
.alert.warn { background: var(--warn-bg);  color: var(--warn); }
.alert.info { background: var(--accent-pale); color: var(--accent-dark); }

/* ─ ログイン ─ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 340px; }
.login-logo { background: #FFF; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; border: .5px solid var(--border); }
.login-logo img { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
  .content { padding: .8rem; }
  .nav.open { width: 130px; }
}

/* ─ 説明の「?」 ────────────────────────────────────────────
   画面に説明文を並べると、どれが設定項目なのか分からなくなる。
   ふだんは畳んでおき、知りたいときだけ開く。 */
.help-btn {
  width: 15px; height: 15px; padding: 0; margin-left: 5px;
  border: .5px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 10px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; flex: none;
}
.help-btn:hover { color: var(--accent); border-color: var(--accent); }
.help-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #FFF; }
/* 横並びの行の中に置かれても、本文は必ず次の行に丸ごと入る。
   これが無いと、隣の見出しが1文字ずつ縦に潰れて読めなくなる。 */
.help-body {
  display: block; margin: 6px 0 0; padding: 8px 10px;
  background: var(--bg2); border-radius: var(--radius);
  font-size: 11px; line-height: 1.6; color: var(--text2);
  flex-basis: 100%; width: 100%; box-sizing: border-box; order: 99;
}

/* 使わない欄。値は残したまま、触れないことが見て分かるようにする。
   disabled にはしない。disabled だと保存のときに値が送られず、
   印を外したときに前の設定が消えてしまう。 */
.field-off { opacity: .45; pointer-events: none; }
.field-off input, .field-off select { background: var(--bg2); cursor: not-allowed; }
.help-body[hidden] { display: none; }

/* ─ 売価ルールの分類見出し ──────────────────────────────────
   一覧の中でスクロールしても上に残る区切り。
   薄いグレーだと品目の行と地続きに見えて、どこが区切りか分からない。
   淡い青も使えない。選んでいる品目の行が同じ色なので紛れる。
   薄い黄色なら、白い行とも淡い青の行とも重ならない。
   字は少し大きく、太くして、見出しだと分かるようにする。 */
.cat-head {
  position: sticky; top: 0; z-index: 2;
  padding: 7px 12px;
  background: var(--warn-bg);
  border-bottom: .5px solid var(--border);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--text);
}