/*
 * TB給与計算クラウド (テストベッド) 共通スタイル。
 * 実機 standard.css の資産はコピーせず、観測した「見た目の骨格」だけを中立に近似:
 *   - 上部ヘッダー(ロゴ) + chevron 型パンくず(#pan)
 *   - 左サイドバー(⌂TOP / ユーザー / 法人名 / ログアウト / ヘルプ)
 *   - メニューカード(.btnMain_N) と 操作ボタン(.btn)
 *   - 下部フッター
 */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
  font-size: 13px; color: #333; background: #d8dadc;
}
a { color: #1d5fa8; }

/* ===== ヘッダー ===== */
#header { background: #fff; border-bottom: 3px solid #c7ccd0; }
#header .head-inner {
  max-width: 1000px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 40px; height: 40px; }
.brand .brand-text { line-height: 1.1; }
.brand .brand-text .t1 { font-size: 11px; color: #5b9bd5; letter-spacing: .04em; }
.brand .brand-text .t2 { font-size: 19px; font-weight: 700; color: #2b3a4a; }
.head-faq {
  border: 1px solid #b9c0c6; border-radius: 10px; background: #f3f5f7;
  padding: 4px 12px; font-size: 11px; color: #46535f; cursor: pointer;
}

/* ===== chevron 型パンくず (#pan) ===== */
#pan { background: #b9bec2; }
#pan ul {
  max-width: 1000px; margin: 0 auto; padding: 0; list-style: none;
  display: flex; height: 22px;
}
#pan li {
  position: relative; flex: 1; max-width: 150px;
  color: #fff; font-size: 11px; line-height: 22px; text-align: center;
  padding-left: 14px; margin-right: 12px;
}
/* chevron の矢じり (右端の > 形) */
#pan li::after {
  content: ""; position: absolute; right: -11px; top: 0;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  border-left: 11px solid; z-index: 1;
}
#pan li.pan1 { background: #1d5fa8; }            /* 現在 */
#pan li.pan1::after { border-left-color: #1d5fa8; }
#pan li.pan2 { background: #9aa0a5; }            /* 未到達 */
#pan li.pan2::after { border-left-color: #9aa0a5; }
#pan li.pan3 { background: #6f7378; }            /* 完了 */
#pan li.pan3::after { border-left-color: #6f7378; }
#pan li.pan3 a { color: #fff; text-decoration: underline; }

/* ===== レイアウト ===== */
#wrap { max-width: 1000px; margin: 0 auto; padding: 16px 20px 0; }
#layout { display: flex; gap: 16px; align-items: flex-start; }
/* 会社選択前(client_manager): サイドバー無し・コンテンツ中央寄せ */
#layout.no-side #left { display: none; }
#layout.no-side #main { max-width: 720px; margin: 0 auto; }

/* 左サイドバー */
#left { width: 160px; flex: 0 0 160px; }
#left .pageTitle { font-size: 15px; font-weight: 700; color: #2b3a4a; margin: 0 0 10px 4px; }
.side-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  padding: 9px 0; margin-bottom: 10px; border-radius: 4px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid;
}
.side-top   { background: #4f7fb5; border-color: #3f6fa5; color: #fff; }
.side-help  { background: #4f7fb5; border-color: #3f6fa5; color: #fff; }
.side-logout{ background: #d99a2b; border-color: #c2861d; color: #fff; }
.side-info { border: 1px solid #c7ccd0; background: #fff; margin-bottom: 10px; border-radius: 4px; }
.side-info .lbl { background: #eef1f3; text-align: center; font-size: 11px; color: #5b6770; padding: 3px 0; }
.side-info .val { padding: 4px 8px; font-size: 12px; color: #2b3a4a; word-break: break-all; }

/* メインコンテンツ枠 */
#main {
  flex: 1; background: #fff; border: 1px solid #c7ccd0; border-radius: 4px;
  padding: 18px 22px 26px; min-height: 280px;
}
.main-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #e2e6e9; padding-bottom: 10px; margin-bottom: 16px;
}
.main-head .mh-left { font-size: 14px; color: #2b3a4a; }
.main-head .mh-right { font-size: 13px; color: #46535f; }

/* メニューカード (.btnMain_N) — 実機の2カラムメニュー */
table.menu-grid { width: 100%; border-collapse: separate; border-spacing: 14px 12px; }
table.menu-grid td { width: 50%; }
a.btnMain_0, a.btnMain_1, a.btnMain_2, a.btnMain_4, a.btnMain_6 {
  display: block; text-decoration: none; color: #2b3a4a;
  background: linear-gradient(#fbfcfd, #eef1f4);
  border: 1px solid #c2c8cd; border-radius: 4px; border-left-width: 5px;
  padding: 14px 16px; font-size: 13px; font-weight: 600;
}
a.btnMain_0:hover, a[class^="btnMain"]:hover { background: linear-gradient(#fff, #e6eaee); }
/* TOP カードの内部テーブル(アイコン + ラベル) */
table.bm-inner { width: 100%; border-collapse: collapse; }
table.bm-inner td { padding: 0; }
td.bm-icon { width: 30px; }
td.bm-icon .bm-ic { display: inline-block; width: 18px; height: 18px; border-radius: 3px; background: #cfd6dc; vertical-align: middle; }
td.bm-label { font-size: 13px; }
a.btnMain_0 { border-left-color: #8a949c; }
a.btnMain_1 { border-left-color: #4f8f4f; } /* 給与/賞与/社保/年調 系 */
a.btnMain_2 { border-left-color: #4f7fb5; } /* 従業員/会社 系 */
a.btnMain_4 { border-left-color: #9a6fb0; } /* ユーザー管理 */
a.btnMain_6 { border-left-color: #b08a4f; } /* 帳票/一括 系 */

/* 操作ボタン (.btn) — 実機の input[type=button]。※検出セレクタに含まれない要素型 */
input.btn, button.btn {
  font: inherit; font-size: 12px; padding: 4px 12px; cursor: pointer;
  border: 1px solid #aab1b7; border-radius: 3px;
  background: linear-gradient(#fdfdfe, #e9edf0); color: #2b3a4a;
}
input.btn:hover { background: linear-gradient(#fff, #dfe4e8); }
input.btnSel { /* 一覧の「選択」 */
  font: inherit; font-size: 12px; padding: 3px 14px; cursor: pointer;
  border: 1px solid #3f6fa5; border-radius: 3px; background: #5f8fc5; color: #fff;
}

/* 一覧テーブル(会社データ管理など) */
table.list { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.list th { background: #5f6b75; color: #fff; font-weight: 600; font-size: 12px; padding: 6px 8px; }
table.list td { border-bottom: 1px solid #e2e6e9; padding: 6px 8px; font-size: 12px; }
.search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.search-row input[type=text] { font: inherit; padding: 3px 6px; border: 1px solid #aab1b7; border-radius: 3px; }
.note { color: #b3402f; font-size: 11px; margin-top: 10px; line-height: 1.6; }

/* 戻るバー */
.back-bar {
  margin-top: 18px; text-align: center;
}
.back-bar a {
  display: inline-block; width: 100%; text-decoration: none; color: #fff;
  background: #4f7fb5; border: 1px solid #3f6fa5; border-radius: 4px;
  padding: 9px 0; font-weight: 700;
}

/* リーフ(スタブ)画面 */
.leaf-stub { color: #46535f; line-height: 1.9; }
.leaf-stub .leaf-title { font-size: 16px; font-weight: 700; color: #2b3a4a; margin-bottom: 8px; }
.leaf-stub .leaf-url { font-family: monospace; font-size: 12px; color: #7a848c; }

/* HttpMethodError / mode 通知バナー */
.mode-banner {
  background: #fff4e0; border: 1px solid #e0b870; color: #8a5a16;
  padding: 8px 12px; border-radius: 4px; font-size: 12px; margin-bottom: 14px;
}

/* ===== フッター ===== */
#footer {
  margin-top: 22px; background: #fff; border-top: 3px solid #c7ccd0;
  padding: 14px 0; text-align: center; color: #7a848c; font-size: 11px;
}
#footer .foot-inner { max-width: 1000px; margin: 0 auto; }