/* 新manecto 共通スタイル（Milano踏襲・初期骨格）。
   ⚠️ 拡張は必要になったところから足す。使う前から詰め込まない。
   ⚠️ 印刷時は背景無し・文字は黒。 */

:root {
  --bg: #0c0f1c;
  --surface: #151a2e;
  --line: #2a3050;
  --line-soft: #212747;
  --text: #e2e5f3;
  --muted: #8b92b8;
  --dim: #5a6089;
  --violet: #b06cff;
  --accent-bg: rgba(176, 108, 255, 0.15);
  --grad: linear-gradient(90deg, #b06cff, #ff6ba0);
  --danger: #ff5c5c;
  --ok: #45d9a4;
  --sidebar-w: 200px;
  --header-h: 60px;
  --r: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  min-height: 100vh;
}

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ヘッダー */
.hd {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 20px; gap: 16px;
  z-index: 100;
}
.hd::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--grad); opacity: 0.6;
}
.hd .mark { width: 32px; height: 32px; border-radius: 4px; }
.hd .logo { font-weight: bold; font-size: 18px; letter-spacing: 1px; }
.hd .co { color: var(--muted); font-size: 13px; }
.hd .sp { flex: 1; }
.hd .user { color: var(--muted); font-size: 13px; margin-right: 12px; }
.hd .co { font-size: 14px; color: #c3c8e6; font-weight: 700; letter-spacing: .02em; padding-left: 13px; border-left: 1px solid var(--line); }
.hd .co:empty { display: none; }
/* 別DBに接続中の印（黄色で目立たせる。テスト用DBを本番と間違えて開いた時に、開いた瞬間に気づけるように） */
.dbtag { font-size: 11px; font-weight: 700; color: #0c0f1c; background: #ffd166; border-radius: 4px; padding: 3px 9px; }
.hd button {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
.hd button:hover { background: var(--line-soft); }

/* サイドバー */
.sb {
  position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 12px 0; overflow-y: auto;
}
.sb a, .sb .off {
  display: block; padding: 10px 20px; color: var(--text);
  border-left: 3px solid transparent;
}
.sb a:hover { background: var(--line-soft); text-decoration: none; }
.sb a.on { background: var(--accent-bg); border-left-color: var(--violet); color: var(--violet); }
.sb .off { color: var(--dim); font-style: italic; }
/* 業務が複数の画面に分かれる項目は、押すと下に開く（Milano踏襲） */
.sb .grp .ghd {
  display: block; width: 100%; text-align: left;
  padding: 10px 20px; font-size: 13px; font-family: inherit;
  color: var(--muted); background: none; border: 0; border-left: 3px solid transparent;
  cursor: pointer; transition: .15s;
}
.sb .grp .ghd:hover { background: var(--accent-bg); color: var(--text); }
.sb .grp .ghd::after { content: "▾"; float: right; opacity: .55; transition: .15s; }
.sb .grp:not(.open) .ghd::after { content: "▸"; }
.sb .grp.open .ghd { color: var(--text); font-weight: 700; }
.sb .grp .gch { display: none; }
.sb .grp.open .gch { display: block; }
.sb .grp .gch a { padding: 7px 20px 7px 36px; font-size: 12px; }
/* 準備中の項目は「準備中」バッジ付きで灰色。押せないことが一目で分かる */
.sb span.off::after {
  content: "準備中"; font-size: 10px; margin-left: 6px;
  color: var(--dim); border: 1px solid var(--line); border-radius: 8px; padding: 0 5px;
}

main {
  margin: calc(var(--header-h) + 20px) 0 40px var(--sidebar-w);
  padding: 20px 32px;
}

h1, h2, h3 { color: var(--text); margin: 0 0 12px; }
h1 { font-size: 24px; }
h2 { font-size: 18px; border-left: 3px solid var(--violet); padding-left: 10px; }

/* カード・グリッド */
.card {
  background: var(--surface); border-radius: var(--r); padding: 20px;
  border: 1px solid var(--line); margin-bottom: 16px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.two > * { min-width: 0; }  /* 中の一覧が幅を持っても枠を広げない、はみ出す時は横スクロール */
.two.lean { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
@media (max-width: 900px) { .two, .two.lean { grid-template-columns: 1fr; } }

/* 列数固定フォーム（Milano踏襲）。項目数が少ない画面で行数を決めたい時に使う。
   ⚠️ .grid は幅で列数が変わるので、列数を決めたい場面はこちらを使う */
.f1 { display: grid; grid-template-columns: 1fr; gap: 10px 12px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.f3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 12px; }
.f2 .wide, .f3 .wide { grid-column: 1 / -1; }

/* 表が長い画面用の枠内スクロール。全体スクロールにすると合計行が下に消える */
.rows { max-height: 60vh; overflow-y: auto; }

/* 入力 */
label { display: block; color: var(--muted); font-size: 12px; margin: 8px 0 4px; }
input, select, textarea {
  width: 100%; padding: 8px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); }
textarea { min-height: 80px; resize: vertical; }

/* ボタン */
button.btn, .btn {
  display: inline-block;
  background: var(--grad); color: white; border: none;
  padding: 10px 20px; border-radius: 4px;
  cursor: pointer; font: inherit; font-weight: bold;
  text-decoration: none;
}
button.btn:hover { opacity: 0.9; }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
button.btn.sub { background: transparent; border: 1px solid var(--line); color: var(--text); font-weight: normal; }
button.btn.warn { background: var(--danger); }

/* メッセージ */
.msg {
  padding: 10px; border-radius: 4px; margin: 8px 0;
  min-height: 20px;
}
.msg:empty { display: none; }
.msg.ok { background: rgba(69, 217, 164, 0.15); color: var(--ok); border-left: 3px solid var(--ok); }
.msg.ng { background: rgba(255, 92, 92, 0.15); color: var(--danger); border-left: 3px solid var(--danger); }

/* トースト */
#__toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 4px; z-index: 1000;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
#__toast.show { opacity: 1; }
#__toast.ok { background: var(--ok); color: #0c0f1c; }
#__toast.ng { background: var(--danger); color: white; }

/* テーブル */
table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: normal; font-size: 12px; background: var(--surface); }
td.nw, th.nw { white-space: nowrap; }
/* 余った幅を吸わせる列（詳細ボタン列など）。中の入力欄は auto に戻す */
td.act, th.act { width: auto; }
td.act input { width: auto; }

/* ===== 印・金額表示（Milano踏襲） ===== */
/* 折り返し禁止の印。赤枠で「注意事項」を出す。折り返すと2段になり事故に見える */
.badge {
  display: inline-block; background: rgba(255, 92, 92, 0.15); color: var(--danger);
  border: 1px solid rgba(255, 92, 92, 0.4); border-radius: 4px;
  padding: 0 6px; font-size: 11px; margin-left: 6px; white-space: nowrap;
}
/* これから起きること（振込予定など）。赤字だが箱にしない = 事故と見た目を分ける */
.badge.wait { background: transparent; border-color: transparent; padding: 0; color: var(--danger); }

/* 金額表示（右寄せ、桁揃え） */
.num { text-align: right; }
.num input { text-align: right; width: 110px; }
.acct { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* 金額と印は必ず横並び（縦積みだと読みにくい） */
.amt { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.amt .badge { margin-left: 0; }
/* 合計行：ラベル+数字の組を横に並べる。gap は広めにして組同士が繋がって見えないように */
.tot { display: flex; gap: 44px; flex-wrap: wrap; align-items: baseline; margin-top: 20px; }
.tot b { font-size: 20px; font-variant-numeric: tabular-nums; }
/* 表が長い画面は合計を上に置く（下だと画面外に消える） */
.tot.top { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* ===== ドラッグゾーン（ファイル投げ込み） ===== */
/* ⚠️ 薄い線に小さい灰色文字だと「投げる場所」か「余白」か分からない。
   枠を大きく取って色を付ける（Milanoの本人フィードバック 2026-08-19） */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 132px; padding: 22px 16px; cursor: pointer; text-align: center;
  border: 2px dashed var(--violet); border-radius: 10px;
  background: var(--accent-bg);
  font-size: 14px; font-weight: 700; color: #cdb8ff;
}
.drop .note { font-size: 11.5px; font-weight: 400; color: var(--muted); }
* + .drop { margin-top: 12px; }
.drop:hover, .drop.over {
  border-color: var(--violet); color: white; background: rgba(176, 108, 255, 0.18);
}
.drop:hover .note, .drop.over .note { color: #e6dcff; }

/* ===== ページネーション ===== */
.pager {
  display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px;
}
.pager button { padding: 5px 12px; }
.pager .cur { color: var(--muted); font-size: 12px; }

/* ログイン画面（loginbox） */
body.login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--bg);
}
.loginbox {
  width: 360px; padding: 40px;
  background: var(--surface); border-radius: var(--r);
  border: 1px solid var(--line);
  text-align: center;
}
.loginbox .seal { width: 64px; height: 64px; }
.loginbox h1 { margin: 12px 0 4px; }
.loginbox .sub { color: var(--dim); font-size: 12px; margin-bottom: 20px; }
.loginbox label { text-align: left; }
.loginbox .btn { width: 100%; margin-top: 12px; }

/* ロック画面 */
body.lock-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.lockbox {
  width: 400px; padding: 40px;
  background: var(--surface); border-radius: var(--r);
  border: 1px solid var(--line);
  text-align: center;
}
.lockbox .icon { font-size: 48px; margin-bottom: 12px; }

/* 印刷（Milano踏襲、細部強化） */
@media print {
  body { background: white; color: black; }
  .hd, .sb, .noprint, #__toast { display: none !important; }
  main { margin: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card { background: white; border: 1px solid #000; box-shadow: none; page-break-inside: auto; }
  .card > h2, h1, h2, h3 { color: black; }
  label, th, .muted, .sub { color: black; }
  th, td { border-bottom: 1px solid #999; }
  .badge { background: white; color: black; border-color: black; }
  .rows { max-height: none; overflow: visible; }
  tr { page-break-inside: avoid; }
  @page { size: A4; margin: 15mm; }
  /* 横向き印刷が要る帳票（更生訓練費申請書 等）は body.landscape を付ける */
  body.landscape { @page: { size: A4 landscape; }; }
}

/* ユーティリティ */
.hidden, [hidden] { display: none !important; }
.right { text-align: right; }
.center { text-align: center; }
.muted { color: var(--muted); }