/* ★土台のそろえ直し
   いまのポータルは Tailwind の下敷き（reset）が入っていて、
   「枠線と余白を幅に含めて数える」設定が全体にかかっていた。
   これが無いと、入力欄やボタンが親からはみ出して重なる。
   使っていたのと同じところだけを、ここに書き写す。 */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
table { border-collapse: collapse; }

/* Benette社内ポータル デザイントークン（承認済みモック準拠） */
:root {
  --bg: #f7f2ec;
  --card: #fffdf9;
  --line: #e8ddd2;
  --line2: #f0e8de;
  --rose: #a5687a;
  --rose-d: #8d5265;
  --rose-bg: #f6e9ec;
  --ink: #4a4038;
  --sub: #a09385;
  --ok: #5f8f6b;
  --ok-bg: #e9f2ec;
  --warn: #b0483f;
  --warn-bg: #f9e9e7;
  --blue: #5a708f;
  --blue-bg: #eaeff7;
  --sand: #8f7a44;
  --sand-bg: #f3ecdf;
}

/* ブラウザ標準の部品（カレンダー・チェックボックス等）の選択色をブランド色に */
:root, body, input, select, textarea, button {
  accent-color: #8d5265;
}

/* ★2026/09/13：メニューを押すたびに画面が横に「ガクン」と跳ねていた原因。
     縦に長い画面ではスクロールバーが出て中身が15px狭くなり、短い画面では
     消えて15px広がるため、切り替えるたびに左右にずれていた。
     スクロールバーの場所を常に空けておけば、ずれなくなる。
     （森さん「メニュー変更するたびに画面がガクンとなる」2026/09/13）
     scrollbar-gutter が効かない古いブラウザ向けに overflow-y:scroll も併記する。 */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 13px;
}

/* 共通部品 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius:3px;
  padding: 14px 16px;
}
.btn {
  background: var(--rose);
  color: #fff;
  border: none;
  border-radius:3px;
  padding: 8px 20px;
  font-size: 12.5px;
  cursor: pointer;
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius:3px;
  padding: 8px 20px;
  font-size: 12.5px;
  cursor: pointer;
}
.av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rose-bg);
  color: var(--rose-d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.tag { display: inline-block; font-size: 10.5px; border-radius:3px; padding: 1px 8px; }
.tag-inq { background: var(--blue-bg); color: var(--blue); }
.tag-claim { background: var(--warn-bg); color: var(--warn); }
.tag-pay { background: var(--sand-bg); color: var(--sand); }
.tag-info { background: var(--ok-bg); color: var(--ok); }
.tag-req { background: var(--rose-bg); color: var(--rose-d); font-weight: 600; }
.st-open { background: var(--warn-bg); color: var(--warn); font-size: 11px; border-radius:3px; padding: 1px 8px; white-space: nowrap; }
.st-done { background: var(--ok-bg); color: var(--ok); font-size: 11px; border-radius:3px; padding: 1px 8px; white-space: nowrap; }
.mention {
  color: var(--rose-d);
  background: var(--rose-bg);
  border-radius:3px;
  padding: 0 4px;
  font-weight: 600;
}
.input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius:3px;
  font-size: 13.5px;
  background: #fff;
}

/* ── スマホ対応 ──────────────────────────────────────────
   現場のメンバーはスマホで開くことが多いので、
   横に並べているものはたたみ、はみ出す表は横スクロールにする。 */

/* パソコン幅では、メニューボタンは出さない */
.nav-burger { display: none; }

@media (max-width: 860px) {
  .nav-wide { display: none !important; }
  .nav-burger { display: block; order: 9; }

  /* メニューボタンで開くパネル。ヘッダーの下いっぱいに出す */
  .nav-sheet {
    order: 99;
    flex-basis: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 0;
    border-top: 1px solid var(--line);
    margin: 8px -20px -10px;
    padding: 6px 0 4px;
  }
  .nav-sheet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 13.5px;
  }

  /* 画面まわりの余白を詰める（スマホでは幅が惜しい） */
  main { padding: 16px 12px !important; }
  .card { border-radius:3px; padding: 10px 12px; }

  /* 横に並べているものは折り返す */
  .row-wrap { flex-wrap: wrap; }
}

/* 表は幅が足りなければ横スクロール（レイアウトを壊さない） */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 文字入力を16px未満にするとiPhoneが勝手に拡大するため、スマホでは16pxに */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
}

/* スケジュールの表（全員 × 日付） */
.sch-tbl { font-size: 12px; table-layout: fixed; }
.sch-head {
  padding: 6px 4px 4px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line2);
  font-weight: 600;
}
/* メンバー名の列は横スクロールしても左に残す */
.sch-name {
  position: sticky; left: 0; z-index: 1;
  background: var(--card);
  border-bottom: 1px solid var(--line2);
  border-right: 1px solid var(--line);
  padding: 5px 10px;
  text-align: left; font-weight: 600; font-size: 12px; white-space: nowrap;
}
.sch-cell {
  border-bottom: 1px solid var(--line2);
  border-left: 1px solid var(--line2);
  vertical-align: top;
  padding: 4px 4px;
  height: 34px;
}
.sch-item {
  border-left: 3px solid var(--line);
  border-radius:0 3px 3px 0;
  padding: 2px 5px 2px 6px;
  margin-bottom: 3px;
  font-size: 11.5px;
  line-height: 1.45;
}
/* 種類の名前。色だけでは何の予定か分からないので必ず添える */
.sch-kind { font-size: 10px; font-weight: 700; }
.k-mtg { border-left-color: var(--blue); background: var(--blue-bg); }
.k-mtg .sch-kind { color: var(--blue); }
.k-out { border-left-color: var(--sand); background: var(--sand-bg); }
.k-out .sch-kind { color: var(--sand); }
.k-off { border-left-color: var(--ok); background: var(--ok-bg); }
.k-off .sch-kind { color: var(--ok); }
.k-wfh { border-left-color: var(--warn); background: var(--warn-bg); }
.k-wfh .sch-kind { color: var(--warn); }
.sch-item:last-child { margin-bottom: 0; }

/* マニュアルの一覧。丸いカードを積むと重たく見えるので、区切り線だけの行にする */
.man-row {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--line2);
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.man-row:hover { background: var(--bg); }

/* 書式つきの入力欄と表示 */
.rich a { color: var(--rose-d); text-decoration: underline; word-break: break-all; }
.rich ul, .rich ol { margin: 4px 0 4px 1.4em; }
.rich li { margin: 2px 0; }
.rich-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--sub);
  opacity: .7;
}
.rich-edit { cursor: text; }

/* スケジュールの「重要」「連絡」 */
.k-important { border-left-color: #c0392b; background: #fdeceb; }
.k-important .sch-kind { color: #c0392b; }
.k-contact { border-left-color: var(--sand); background: var(--sand-bg); }
.k-contact .sch-kind { color: var(--sand); }

/* 切り替えのタブ。
   丸いボタンを並べると「雲が並んでいるみたい」で読みにくい、という指摘（森さん・2026/09）。
   角丸・枠・背景をやめ、下線だけで「いまどこか」を示す。 */
.tabs {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tabs > button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 7px 1px;
  font-size: 13px;
  color: var(--sub);
  cursor: pointer;
  white-space: nowrap;
}
.tabs > button:hover { color: var(--ink); }
.tabs > button.on {
  color: var(--rose-d);
  font-weight: 600;
  border-bottom-color: var(--rose);
}

/* ═══════════════════════════════════════════════════════════
   ★行間と余白を詰める（森さん 2026/10/01）
     「ポータルも上下のが広すぎる」「縦に長すぎて視認性が悪い」
     「会社報告とかも全部そう。前々から思ってた。でかいんだって」

   ★画面ごとの blade に line-height:1.9 が53か所・1.8 が44か所あり、
     1つずつ直すと給与管理の画面まで触ることになる（★絶対に触らない約束）。
     行間は見た目だけの指定なので、ここで一括して上書きする。
     ★戻すときは、この区切りから下を消すだけ。blade は1行も変えていない。
   ═══════════════════════════════════════════════════════════ */

/* これから書くものの既定。★2026/10/16 に 1.7 → 1.55（A・Cと同じ値） */
body { line-height: 1.55; }

/* すでに blade に直接書いてあるぶんを上書きする */
[style*="line-height:1.9"],
[style*="line-height: 1.9"] { line-height: 1.55 !important; }
[style*="line-height:1.8"],
[style*="line-height: 1.8"] { line-height: 1.55 !important; }

/* ★ページの外枠。app.blade.php の <style> が後ろにあるので !important が要る */
main { padding: 16px 18px !important; }

/* カードの内側。14px 16px → 11px 14px（10/01）→ 10px 12px（10/16・A・Cと同じ値） */
.card { padding: 10px 12px; }

/* ★2026/10/14　画面の中の確認窓（ブラウザの小窓の置き換え）
   Safariが「入力を求める小窓を出さない」設定になっていると、
   window.prompt / confirm / alert は何も出さずに返ってくる。
   ボタンを押しても何も起きない状態になり、経費の差し戻しが実際に押せなかった。
   → ブラウザの小窓をやめて、画面の中に出す。
   ★森さんのご決定 2026/10/14（B案）＝入力を求める4か所＋作業が止まる確認12か所。 */
.kakunin {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(74, 64, 56, .38);
}
.kakunin[hidden] { display: none; }
.kakunin-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius:3px;
  padding: 18px 20px;
  width: 100%;
  max-width: 430px;
  box-shadow: 0 10px 30px rgba(74, 64, 56, .18);
}
.kakunin-bun {
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}
/* ★display を書くと hidden（隠す印）が効かなくなる。打ち消しを必ず添える。
   これを忘れて、確認だけの窓にも空の入力欄が出た（2026/10/14・目で見て気づいた） */
.kakunin-ran[hidden] { display: none; }
.kakunin-ran {
  display: block;
  margin-top: 13px;
  font-size: 11.5px;
  color: var(--sub);
}
.kakunin-ran input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius:3px;
  background: #fff;
  font-size: 13px;
}
.kakunin-err {
  margin-top: 8px;
  font-size: 12px;
  color: var(--warn);
}
.kakunin-btn {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   ★行間と余白をもう一段詰める（森さん 2026/10/16）
     「文字も余白も大きすぎてほんとにずっと毎日小さなストレスなの」
     「素人感があるのよ」「Eのメールとかもめっちゃ見づらい」
     「とりあえず行間は変更してACEすべて」
     → A・Cで入れた値（line-height 1.55）にそろえる。
     ★戻すときは、この区切りから下を消して、上の 1.55 を 1.7 に戻すだけ。
   ═══════════════════════════════════════════════════════════ */

/* 画面ごとの blade に直接書いてある行間も 1.55 にそろえる */
[style*="line-height:1.7"],
[style*="line-height: 1.7"],
[style*="line-height:2"],
[style*="line-height: 2"] { line-height: 1.55 !important; }

/* カードと次のカードのあいだ。直接書いてある 10〜14px を 8px にそろえる
   （直接書いてあるぶんは、この書き方でないと上書きできない） */
.card[style*="margin-top:10px"], .card[style*="margin-top: 10px"],
.card[style*="margin-top:12px"], .card[style*="margin-top: 12px"],
.card[style*="margin-top:14px"], .card[style*="margin-top: 14px"] { margin-top: 8px !important; }
.card[style*="margin-top:16px"], .card[style*="margin-top: 16px"],
.card[style*="margin-top:18px"], .card[style*="margin-top: 18px"] { margin-top: 10px !important; }

/* ═════════════════════════════════════════════════════════
   ★表の土台（森さん 2026/10/16「一律小さくしましたってだけじゃん　視認性は？」）
     行を詰めるだけでは読みやすくならない。
     ① 罫線を見える濃さにする　② 見出し行を本文と見分ける
     ③ 1行おきに薄く敷いて目が横にすべらないようにする　④ 数字の桁をそろえる
     ★画面ごとの <style> があとに来るので !important が要る。
   ═════════════════════════════════════════════════════════ */

:root { --line-t: #d6c6b4; }

table.rep th, table.fl th, table.at th, table.lv th, table.ex th,
table.pm th, table.sb th, table.py th, .ik-tbl th {
  background: #f1e7db !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--line-t) !important;
}
table.rep td, table.fl td, table.at td, table.lv td, table.ex td,
table.pm td, table.sb td, table.py td, .ik-tbl td {
  border-bottom: 1px solid var(--line-t) !important;
}

/* 1行おきに薄く敷く（1件＝1行の表だけ。経費は欄が別行に入るのでかけない） */
table.rep tbody tr:nth-child(even) > td,
table.fl  tbody tr:nth-child(even) > td,
table.at  tbody tr:nth-child(even) > td,
table.lv  tbody tr:nth-child(even) > td,
table.pm  tbody tr:nth-child(even) > td,
table.sb  tbody tr:nth-child(even) > td,
table.py  tbody tr:nth-child(even) > td { background: #faf5ee; }

/* いま見ている行 */
table.rep tbody tr:hover > td,
table.fl  tbody tr:hover > td,
table.at  tbody tr:hover > td,
table.lv  tbody tr:hover > td,
table.ex  tbody tr:hover > td,
table.pm  tbody tr:hover > td,
table.sb  tbody tr:hover > td,
table.py  tbody tr:hover > td { background: #f4ebe0; }

/* 数字は桁をそろえる（幅のちがう数字を使わない） */
.num, td.num, th.num, table.py td, table.py th { font-variant-numeric: tabular-nums; }

/* スケジュールの格子。罫線がうすすぎて、どこが誰の欄か分からなかった */
.sch-head { border-left: 1px solid var(--line-t); border-bottom: 1px solid var(--line-t); }
.sch-name { border-bottom: 1px solid var(--line-t); border-right: 1px solid var(--line-t); }
.sch-cell { border-bottom: 1px solid var(--line-t); border-left: 1px solid var(--line-t); }

/* ★曜日の行を上に固定する（森さん「曜日固定してってずっと前に言ったはず」）
     下へ誰の欄を見に行っても、日付と曜日が残る */
.sch-tbl thead th { position: sticky; top: 0; z-index: 2; }
.sch-tbl thead th.sch-name { z-index: 3; }

/* ★スケジュールの曜日を上に固定するために、入れ物の横スクロールをパソコン幅では外す
   （入れ物に overflow が付いていると、中の sticky は画面ではなく入れ物に貼り付くため効かない）。
   スマホ幅では今まで通り横スクロール（左の氏名は sticky で残る）。 */
@media (min-width: 861px) {
  .sch-box { overflow: visible; }
}


/* ═══ 色の工夫（森さん 2026/10/16「Eも単色使いすぎるから工夫して」） ═══
   画面がバラ色（rose）とベージュだけでできていた。
   ① 頭文字の丸は人ごとに色を変える（誰の行かが色で分かる）
   ② カードの種類で左に細い縦線を入れる（自分＝バラ・管理＝青・お金＝金茶・記録＝緑） */

.av-1 { background: #e8eef7; color: #4e648a; }
.av-2 { background: #e7f0ea; color: #4f7f5c; }
.av-3 { background: #f3ecdf; color: #8a7340; }
.av-4 { background: #f6e9ec; color: #8d5265; }
.av-5 { background: #efe9f4; color: #6f6089; }
.av-6 { background: #fbece6; color: #a15c3a; }

.card-jibun  { border-left: 3px solid var(--rose); }
.card-kanri  { border-left: 3px solid var(--blue); }
.card-okane  { border-left: 3px solid var(--sand); }
.card-kiroku { border-left: 3px solid var(--ok); }