/* ══════════════════════════════════════════════════════════════════
   給与・賞与算出管理 ブラウザ版 — スタイル

   画面の組み立ては Windows 版（salary_gui.py）のまま、色だけ注文管理
   ブラウザ版（web\order\css\app.css）に揃えてある。変数名も同じ。

   Windows 版は暗い地に明るい文字で色分けしていた（シアン・水色・金）。
   明るい地ではそのままだと読めないので、色味を保って濃くしてある。
     Windows          → ここ
     #FFA930 橙       → --accent（面）／ --accent-ink（文字）
     #4fe3c8 シアン   → --cyan
     #7fb3ff 水色     → --blue
     #ffd166 金（◎）  → --gold
     #5ad18a / ff7b7b → --green / --red
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #e4e6dc;
  --bg-mid:    #f1f2ea;
  --bg-light:  #fafbf6;
  --bg-head:   #e9ebe1;
  --cell-edit: #ffffff;       /* 直接編集できるセル（Windows 版の BG_LIGHT にあたる） */
  --line:      #a3a893;
  --line-soft: #c9cdbc;
  --fg:        #23261f;
  --fg-dim:    #505446;
  --fg-faint:  #8e9282;       /* 停止中の手当・×マーク */
  --accent:    #B84A00;
  --accent-ink:#933A00;
  --on-accent: #ffffff;
  --cyan:      #075a60;
  --red:       #b0231a;
  --green:     #255c22;
  --blue:      #1a4f8f;
  --blue-dim:  #6a7f9c;       /* 注文の按分ぶん（推定値なので落とす） */
  --gold:      #7a5200;       /* ◎ */
  --here-bg:   #f4cf9f;       /* ベース金額表で在籍者がいるマス */
  --void-bg:   #d6d8cf;       /* ベース金額表で有り得ない組み合わせ */
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg); color:var(--fg);
  font-family:"Yu Gothic UI","Meiryo UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15px;
}
button,select,input,textarea{ font-family:inherit; color:inherit; font-size:inherit; }
.hidden{ display:none !important; }
.spacer{ flex:1; }

/* ── ボタン（BTN_STYLE / BTN_ORANGE）──────────────────────────── */
.btn{
  min-height:30px; padding:0 12px; font-size:14px; white-space:nowrap;
  background:var(--bg-light); border:1px solid var(--line); color:var(--fg);
  cursor:pointer; border-radius:3px;
}
.btn:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent);
              font-weight:600; padding:0 16px; min-height:34px; }
.btn.primary:hover{ background:var(--accent-ink); }
.btn:disabled{ opacity:.45; cursor:default; }

select.in, input.in{
  height:28px; padding:2px 6px; font-size:14px;
  background:var(--cell-edit); border:1px solid var(--line); border-radius:3px; color:var(--fg);
}
select.in:focus, input.in:focus{ outline:none; border-color:var(--accent); }
.flabel{ font-size:13px; white-space:nowrap; }
.reflabel{ font-size:12px; color:var(--fg-dim); }

/* ══════════════ ログイン ══════════════ */
#login{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:24px 16px;
}
#login h1{ font-size:26px; font-weight:600; margin:0; letter-spacing:.06em; color:var(--accent-ink); }
#login .card{
  width:100%; max-width:380px; background:var(--bg-mid);
  border:1px solid var(--line); border-radius:6px; padding:22px 18px;
  display:flex; flex-direction:column; gap:14px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:14px; color:var(--fg-dim); }
.field input{
  height:44px; font-size:20px; text-align:center; letter-spacing:.15em;
  background:var(--cell-edit); border:1px solid var(--line); border-radius:4px; width:100%;
}
.field input:focus{ outline:none; border-color:var(--accent); }
.msg{ min-height:20px; font-size:14px; color:var(--red); text-align:center; white-space:pre-line; line-height:1.6; }
#login .hint{ font-size:12px; color:var(--fg-dim); text-align:center; line-height:1.6; }

/* ══════════════ 画面の枠 ══════════════ */
#app{
  height:100dvh; display:flex; flex-direction:column; gap:6px;
  padding:6px 8px 0;
}
.row{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* 見出し行 */
.hdr .bar{ width:4px; height:28px; border-radius:2px; background:var(--accent); }
.hdr .title{ font-size:20px; font-weight:600; color:var(--accent-ink); margin-right:16px; white-space:nowrap; }
.hdr .saved{ font-size:13px; color:var(--green); }
.hdr .who{ font-size:13px; color:var(--fg-dim); white-space:nowrap; }

/* ページ切替バー（NAV_STYLE） */
.nav{ gap:2px; }
.nav .pg{
  background:var(--bg-mid); color:var(--fg-dim); font-size:14px; padding:5px 16px;
  border:1px solid var(--line); border-bottom:2px solid var(--line); cursor:pointer; white-space:nowrap;
}
.nav .pg:hover{ background:var(--bg-light); color:var(--fg); }
.nav .pg.on{ background:var(--bg-light); color:var(--accent-ink); font-weight:700; border-bottom:2px solid var(--accent); }
.nav .sum{ font-size:13px; margin-left:10px; white-space:nowrap; }
.nav .sum.first{ margin-left:18px; }
.nav .sum.diff{ font-weight:700; }

/* 画面下（すべて保存）とステータスバー */
.foot{ justify-content:flex-end; padding-bottom:2px; }
.status{
  flex:0 0 auto; margin:0 -8px; padding:3px 10px; min-height:24px; font-size:13px;
  background:var(--bg-mid); color:var(--fg-dim); border-top:1px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── スプリッタ（QSplitter。境目は太め＝6px）─────────────────── */
.split{ display:flex; min-height:0; min-width:0; }
.split.v{ flex-direction:column; }
.split > .pane{ min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.split > .handle{ flex:0 0 6px; background:var(--line); }
.split.h > .handle{ cursor:col-resize; }
.split.v > .handle{ cursor:row-resize; }
.split > .handle:hover, .split > .handle.drag{ background:var(--accent); }
.grow{ flex:1 1 0; min-height:0; min-width:0; }

/* ── ページ ───────────────────────────────────────────────── */
.stack{ display:flex; flex-direction:column; min-height:0; flex:1; }
.page{ display:flex; flex-direction:column; gap:6px; min-height:0; flex:1; padding:4px 6px 6px; }
.page-head{ display:flex; align-items:center; gap:8px; flex:0 0 auto; flex-wrap:wrap; }
.page-head .bar{ width:3px; height:18px; border-radius:1px; background:var(--accent); }
.page-head .ttl{ font-size:16px; font-weight:600; color:var(--accent-ink); white-space:nowrap; margin-right:4px; }
.page-head .reflabel{ min-width:0; flex:1 1 200px; }

.titled{ display:flex; flex-direction:column; gap:2px; min-height:0; min-width:0; flex:1; }
.titled > .th{ display:flex; align-items:baseline; gap:8px; flex:0 0 auto; min-width:0; }
.titled > .th .t{ font-size:13px; font-weight:600; color:var(--accent-ink); white-space:nowrap; }
.titled > .th .reflabel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* ── 表（QTableWidget）────────────────────────────────────── */
.tw{
  flex:1; min-height:0; min-width:0; overflow:auto;
  background:var(--bg-light); border:1px solid var(--line-soft);
}
table.g{ border-collapse:separate; border-spacing:0; font-size:13px; }
table.g th{
  position:sticky; top:0; z-index:2;
  background:var(--bg-head); color:var(--fg-dim); font-weight:600; font-size:12px;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:3px 6px; white-space:nowrap; text-align:center;
}
table.g th.sortable{ cursor:pointer; }
table.g th.sortable:hover{ color:var(--accent-ink); }
table.g th .arrow{ font-size:10px; margin-left:3px; }
table.g td{
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:1px 5px; height:24px; white-space:nowrap;
}
table.g td.vh, table.g th.vh{
  position:sticky; left:0; z-index:1; background:var(--bg-head); color:var(--fg-dim);
  font-size:12px; font-weight:normal; text-align:right;
}
table.g th.vh{ z-index:3; }
table.g td.r{ text-align:right; font-variant-numeric:tabular-nums; }
table.g td.c{ text-align:center; }
table.g td.ed{ background:var(--cell-edit); padding:0; }
table.g td.lab{ background:var(--bg-head); color:var(--fg-dim); }
table.g tr.cur td{ box-shadow:inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
table.g td.dbl{ cursor:pointer; user-select:none; }
table.g td.dbl:hover{ outline:2px solid var(--accent); outline-offset:-2px; }
table.g td.stretch{ width:100%; }

/* セルの中の入力欄。枠なしでセルいっぱい（Excel のように直接打つ） */
table.g .ci{
  width:100%; min-width:40px; height:23px; border:none; background:transparent;
  padding:0 5px; font-size:13px; color:inherit; font-weight:inherit;
}
table.g .ci.r{ text-align:right; font-variant-numeric:tabular-nums; }
table.g .ci:focus{ outline:2px solid var(--accent); outline-offset:-2px; background:#fff; }
table.g select.ci{ padding:0 2px; cursor:pointer; }
table.g input[type=checkbox]{ accent-color:var(--accent); width:15px; height:15px; vertical-align:middle; cursor:pointer; }

/* 最後の列だけ残りの幅を取る（setStretchLastSection） */
table.g.fill{ width:100%; }
table.g.fill td:not(:last-child), table.g.fill th:not(:last-child){ width:1px; }
td.c-red .ci::placeholder{ color:var(--red); opacity:1; }

/* ベース金額（年齢53行×勤続41列を横幅いっぱいに） */
table.g.base{ table-layout:fixed; width:100%; min-width:1620px; }
table.g.base td{ padding:0 3px; height:23px; font-size:12px; text-align:right; }
table.g.base th{ padding:3px 0; }

/* 係数の表（3行：グループ名／項目名／値） */
table.g.coef td{ min-width:84px; }
.coef-area{ display:flex; gap:14px; align-items:flex-start; flex:0 0 auto; }
.coef-area > .tw{ flex:0 1 auto; max-width:calc(100% - 444px); overflow-x:auto; overflow-y:hidden; }
table.g.coef td{ text-align:center; }
table.g.coef td.grp{ background:var(--bg-mid); color:var(--accent-ink); font-weight:700; height:20px; }
table.g.coef td.lab{ height:20px; font-size:12px; padding:0 8px; }
table.g.coef td.val{ height:26px; min-width:84px; }
table.g.coef td.ro{ color:var(--accent-ink); text-align:right; padding:0 6px; }
.formula{
  flex:1; min-width:300px; max-height:168px; overflow:auto;
  font-size:12px; line-height:1.55; background:var(--bg-mid);
  border:1px solid var(--line-soft); padding:5px 8px; user-select:text;
}
.formula .h{ color:var(--accent-ink); font-weight:700; }
.formula .f{ color:var(--fg); margin-top:2px; }
.formula .n{ color:var(--fg-dim); margin-top:2px; }

/* 社員名のタブ（EMP_TAB_STYLE） */
.tabs{ display:flex; gap:1px; overflow-x:auto; flex:0 0 auto; padding-bottom:1px; }
.tabs button{
  flex:0 0 auto; background:var(--bg-mid); color:var(--fg-dim); font-size:13px; padding:4px 12px;
  border:1px solid var(--line); border-bottom:2px solid var(--line); cursor:pointer; white-space:nowrap;
}
.tabs button:hover{ background:var(--bg-light); color:var(--fg); }
.tabs button.on{ background:var(--bg-light); color:var(--accent-ink); font-weight:700; border-bottom:2px solid var(--accent); }
.tabs button.off{ color:var(--fg-faint); }

.detail-head{ font-size:13px; font-weight:600; color:var(--accent-ink); flex:0 0 auto; }
.headline{ font-size:13px; flex:0 0 auto; line-height:1.5; }

/* 色（Windows 版の文字色の置き換え） */
.c-acc{ color:var(--accent-ink); }
.c-dim{ color:var(--fg-dim); }
.c-faint{ color:var(--fg-faint); }
.c-cyan{ color:var(--cyan); }
.c-blue{ color:var(--blue); }
.c-bluedim{ color:var(--blue-dim); }
.c-gold{ color:var(--gold); }
.c-red{ color:var(--red); }
.c-green{ color:var(--green); }
.b{ font-weight:700; }
.bg-here{ background:var(--here-bg) !important; }
.bg-void{ background:var(--void-bg) !important; }

/* ══════════════ ダイアログ（QMessageBox / QDialog）══════════════ */
#modal{ position:fixed; inset:0; z-index:50; background:rgba(35,38,31,.35);
        display:flex; align-items:center; justify-content:center; }
#modal .mbox{
  width:min(520px, 94vw); max-height:88vh; display:flex; flex-direction:column;
  background:var(--bg-light); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.3); overflow:hidden;
}
#modal .mhead{ padding:9px 14px; font-weight:700; background:var(--bg-mid); border-bottom:1px solid var(--line); }
#modal .mhead.err{ color:var(--red); }
#modal .mbody{ padding:14px; overflow:auto; white-space:pre-line; line-height:1.7; font-size:14px; }
#modal .mfoot{ display:flex; justify-content:flex-end; gap:8px; padding:9px 14px;
               background:var(--bg-mid); border-top:1px solid var(--line); }
#modal .mfoot .btn{ min-width:96px; }
.picklist{ border:1px solid var(--line); background:var(--cell-edit); max-height:300px; overflow:auto; white-space:normal; }
.picklist label{ display:flex; align-items:center; gap:8px; padding:4px 8px; cursor:pointer; }
.picklist label:hover{ background:var(--bg-head); }
.picklist input{ accent-color:var(--accent); }