/* Hang in there 勤怠 共通デザイン（サイドバー型シェル＋コンポーネント）
   ブランドカラーはコーポレートサイト（hanginthere.co.jp）の global.css に合わせている */
:root {
  --gold: #a87e22;
  --gold-dark: #8a6519;
  --gold-soft: #d4b96a;
  --gold-pale: #f4ecd4;
  --ink: #221c17;
  --ink-soft: #4d453d;
  --mute: #8b8378;
  --paper: #faf9f6;
  --paper-warm: #f3f0e9;
  --line: #e4dfd4;
  --line-dark: #cdc5b6;
  --red: #c9303f;
  --green: #2e7048;
  --sat: #1d63e8;
  --sun: #c9303f;
  --blue: #2563eb;
  --blue-pale: #eaf1fd;
  --cyan: #0ea5e9;
  --cyan-pale: #e6f6fd;
  --side: #403a34;
  --side-line: #554e45;
  --side-text: #d8d2c8;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); display: flex; min-height: 100vh; }

/* ===== サイドバー ===== */
.side { width: 132px; min-width: 132px; background: var(--side); display: flex; flex-direction: column; }
.logo { display: block; background: #fff; padding: 10px 12px 9px; text-decoration: none; }
.logo .logoMark { display: inline-block; width: 0; height: 0; border-left: 14px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-right: 4px; vertical-align: -2px; }
.logo small { display: block; font-size: 8.5px; letter-spacing: .04em; color: var(--gold); font-weight: bold; }
.logo b { font-size: 18px; color: var(--ink); letter-spacing: .3em; }
.sideNav { flex: 1; padding-top: 4px; }
.navGroup { display: flex; align-items: center; gap: 6px; color: #a89f92; font-size: 11px; padding: 12px 12px 6px; border-top: 1px solid var(--side-line); margin-top: 6px; }
.sideNav .navGroup:first-child { border-top: none; margin-top: 0; }
.sideNav a, .sideNav button { display: block; width: 100%; text-align: left; padding: 10px 12px 10px 20px; color: var(--side-text); font-size: 13px; text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit; position: relative; }
.sideNav a:hover, .sideNav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.sideNav a.active, .sideNav button.active { background: var(--paper); color: var(--ink); font-weight: bold; }
.sideNav a.active::before, .sideNav button.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.sideFoot { padding: 10px 12px; font-size: 10px; color: #8a8175; }
.sideUser { padding: 10px 12px; border-top: 1px solid var(--side-line); display: flex; align-items: center; gap: 8px; }
.sideUser img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.sideUser .un { font-size: 11px; color: var(--side-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sideUser a { display: block; font-size: 10px; color: #a89f92; text-decoration: none; }
.sideUser a:hover { color: #fff; }

/* ===== メイン ===== */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pageTitle { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: bold; color: var(--gold); }
.pageTitle svg { flex: none; }
.topRight { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 12px; }
.topRight a { color: var(--mute); text-decoration: none; }
.topRight a:hover { color: var(--ink-soft); }
.content { padding: 18px; flex: 1; }

/* ===== コントロール ===== */
button.primary { background: var(--gold); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit; }
button.primary:hover { background: var(--gold-dark); }
button.ghost { background: #fff; color: var(--ink-soft); border: 1px solid var(--line-dark); border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
button.ghost:hover { background: var(--paper-warm); }
button:disabled { opacity: .35; cursor: not-allowed; }
select, input[type=month], input[type=number], input[type=text], input[type=time], input[type=password] {
  padding: 7px 10px; border: 1px solid var(--line-dark); border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; color: var(--ink);
}
select:focus, input:focus { outline: 2px solid var(--gold-soft); outline-offset: 0; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar label { font-size: 13px; color: var(--ink-soft); }
.hint { font-size: 11px; color: var(--mute); }

/* セグメント切替（Bakuraku の 出勤簿/工数管理 風） */
.seg { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: none; background: #fff; padding: 8px 20px; font-size: 13px; font-weight: bold; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.seg button + button { border-left: 1px solid var(--line-dark); }
.seg button.active { background: var(--gold); color: #fff; }

/* ステータスピル・バッジ */
.pill { display: inline-block; font-size: 12px; padding: 4px 14px; border-radius: 999px; background: var(--paper-warm); color: var(--mute); font-weight: bold; }
.pill.on { background: var(--blue-pale); color: var(--blue); }
.pill.onl { background: var(--cyan-pale); color: #0369a1; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: bold; }
.badge.onsite { background: var(--blue); color: #fff; }
.badge.online { background: var(--cyan-pale); color: #0369a1; border: 1px solid var(--cyan); }

/* サマリーカード（Bakuraku の休暇チップ/アラートカード風） */
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 18px 12px; min-width: 118px; }
.stat .lbl { font-size: 11px; color: var(--mute); font-weight: bold; }
.stat .val { font-size: 24px; font-weight: bold; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat .val small { font-size: 12px; font-weight: normal; color: var(--ink-soft); margin-left: 2px; }

/* テーブル */
table.data { border-collapse: collapse; background: #fff; width: 100%; font-size: 13px; }
table.data th, table.data td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
table.data th { background: var(--paper-warm); color: var(--ink-soft); white-space: nowrap; font-size: 12px; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.scrollX { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }

/* モーダル・トースト */
.overlay { display: none; position: fixed; inset: 0; background: rgba(34,28,23,.5); align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 14px; padding: 24px; width: min(94vw, 560px); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(34,28,23,.35); }
.modalBtns { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
#toast { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 999px; font-size: 15px; z-index: 60; }

/* お知らせバナー（黄色） */
.notice { background: #fdf6dd; border: 1px solid #f0e3ae; border-radius: 6px; padding: 10px 16px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== レスポンシブ（タブレット縦・スマホは上部ナビ化） ===== */
@media (max-width: 820px) {
  body { flex-direction: column; }
  .side { width: 100%; min-width: 0; flex-direction: row; align-items: stretch; overflow-x: auto; }
  .logo { white-space: nowrap; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; }
  .sideNav { display: flex; padding: 0; }
  .navGroup { display: none; }
  .sideNav a, .sideNav button { width: auto; white-space: nowrap; padding: 14px 14px; }
  .sideNav a.active::before, .sideNav button.active::before { top: auto; height: 3px; width: 100%; bottom: 0; }
  .sideFoot { display: none; }
}

@media print {
  .side, .topbar, .toolbar, .noPrint { display: none !important; }
  body { background: #fff; display: block; }
  .content { padding: 0; }
  .scrollX { border: none; border-radius: 0; overflow: visible; }
}