/* layout.css — グループウェア共通レイアウト（js/layout.js とセット）
   css/app.css のトークン（--primary 等）を前提にする。app.css の後に読み込むこと。
   既存の app.html / admin.html はこのファイルを読み込まないため影響を受けない。 */

/* =============================================================================
   メンバー: 画面下のタブバー（スマホ優先）
   ============================================================================= */
.kp-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  /* 項目数を数えずに済むよう自動で割る。4つ固定にしていたため
     5つ目（メニュー）が2段目に落ちて見切れていた */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: #fff;
  border-top: 1px solid var(--border);
  /* iPhone のホームバー分を空ける */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.kp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px 8px;
  min-height: 56px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-top: 2px solid transparent;
}
.kp-tab.on {
  color: var(--primary);
  border-top-color: var(--primary);
  background: var(--soft);
}
.kp-tab.soon { opacity: .45; cursor: default; }

/* タブバーの高さぶん、本文の下に余白を作る。
   メンバーはPCでサイドメニュー・スマホでタブバーの両方を持つので、
   「サイドメニューが無いこと」ではなく「タブバーが出ていること」で判断する */
body.kp-has-tabbar .wrap { padding-bottom: 88px; }
body:not(.kp-has-sidebar):not(.kp-has-tabbar) .wrap { padding-bottom: 88px; }

/* PCではタブバーを出さない。サイドメニューと二重になるため */
@media (min-width: 861px) {
  .kp-tabbar { display: none; }
  body.kp-has-tabbar .wrap { padding-bottom: 40px; }
}

/* =============================================================================
   管理者: 左サイドメニュー（PC前提）
   ============================================================================= */
.kp-sidebar {
  position: fixed;
  top: 57px;                /* .topbar の高さぶん下げる */
  left: 0; bottom: 0;
  width: 216px;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  z-index: 15;
}
.kp-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  white-space: nowrap;
}
.kp-side-item:hover { background: var(--soft); }
.kp-side-item.on { background: var(--primary); color: #fff; }
.kp-side-item.soon { color: var(--muted); font-weight: 500; cursor: default; }
.kp-side-item.soon:hover { background: transparent; }
.kp-side-item em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: #edf2f7;
  border-radius: 4px;
  padding: 1px 6px;
}
.kp-has-sidebar .wrap {
  margin-left: 216px;
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

/* サイドメニューは狭い画面では上部の横スクロールに切り替える。
   ただしメンバーは下のタブバーがあるので、そちらに任せて消す */
@media (max-width: 860px) {
  .kp-sidebar.member { display: none; }
  .kp-sidebar {
    position: static;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
  }
  .kp-side-item { margin-bottom: 0; flex: 0 0 auto; font-size: 12.5px; padding: 8px 12px; }
  .kp-side-item em { display: none; }
  .kp-has-sidebar .wrap { margin-left: 0; padding-left: 14px; padding-right: 14px; }
}

/* =============================================================================
   ホーム / ダッシュボードのタイル
   ============================================================================= */
.kp-greet { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--primary-dark); }
.kp-greet-sub { margin: 0 0 20px; font-size: 13px; color: var(--muted); }

.kp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.kp-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.kp-tile:hover { border-color: var(--primary); }
.kp-tile .k {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.kp-tile .v {
  font-size: 26px; font-weight: 700; color: var(--primary-dark);
  margin-top: 6px; line-height: 1.2;
}
.kp-tile .v small { font-size: 13px; font-weight: 600; margin-left: 3px; }
.kp-tile .s { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kp-tile.alert { border-color: #fbd38d; background: #fffaf0; }
.kp-tile.alert .v { color: var(--orange); }

/* 端末管理の「やること」。放っておくと減らないものなので、
   ふつうのタイルより強く出す */
.kp-tile.warn { border-color: #fbd38d; background: #fffaf0; }
.kp-tile.warn .v { color: var(--orange); }
.kp-tile.bad  { border-color: #f5b5b0; background: #fdf3f2; }
.kp-tile.bad .v { color: #b3261e; }

/* まだ実装していない領域。存在は見せるが、期待させない見た目にする */
.kp-soon {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--muted);
  font-size: 13px;
  background: #fafbfc;
}
.kp-soon b { color: var(--text); font-size: 13.5px; display: block; margin-bottom: 3px; }
.kp-soon-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 720px) {
  .kp-greet { font-size: 18px; }
  .kp-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kp-tile { padding: 13px; }
  .kp-tile .v { font-size: 22px; }
}

/* =============================================================================
   お知らせ（管理者の一覧・メンバーのホーム で共用）
   ========================================================================== */
.kp-notice{
  border:1px solid var(--border); border-radius:10px; background:#fff;
  padding:14px 16px; margin-bottom:10px;
}
.kp-notice.unread{ border-left:3px solid var(--primary); background:var(--soft); }
.kp-notice .head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.kp-notice .title{ font-weight:700; font-size:15px; color:var(--primary-dark); }
.kp-notice .meta{ font-size:12px; color:var(--muted); margin-left:auto; white-space:nowrap; }
.kp-notice .body{ font-size:13.5px; line-height:1.9; white-space:pre-wrap; word-break:break-word; }
.kp-notice .foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* 種別と状態のラベル */
.kp-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:#eef1f5; color:#516070; white-space:nowrap;
}
.kp-chip.important{ background:#fdecec; color:#b3261e; }
.kp-chip.event{ background:#eaf5ec; color:#256b36; }
.kp-chip.system{ background:#eef0fb; color:#3f4bab; }
.kp-chip.draft{ background:#f4f0e3; color:#8a6d1f; }
.kp-chip.archived{ background:#eee; color:#777; }
.kp-chip.pinned{ background:#fff3d6; color:#8a6d1f; }

@media (max-width:720px){
  .kp-notice{ padding:12px 13px; }
  .kp-notice .meta{ margin-left:0; width:100%; }
}

/* =============================================================================
   入社・退職手続き
   ========================================================================== */
.kp-progress{
  height:6px; border-radius:999px; background:#e8ecf1; overflow:hidden; margin-top:10px;
}
.kp-progress > span{ display:block; height:100%; background:var(--primary); transition:width .2s; }

.kp-items{ width:100%; border-collapse:collapse; font-size:13px; }
.kp-items th{
  text-align:left; font-size:11.5px; color:var(--muted); font-weight:600;
  padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.kp-items td{ padding:7px 8px; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
.kp-items tr:last-child td{ border-bottom:none; }
.kp-items tr.submitted td{ background:#fffdf3; }
.kp-items tr.done td{ color:var(--muted); }
.kp-items tr.done td:first-child{ text-decoration:line-through; }
.kp-items select{ padding:4px 8px; font-size:12.5px; min-width:96px; }

/* 本人が見るチェックリスト（ホーム画面） */
.kp-todo{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid #f0f2f5; }
.kp-todo:last-child{ border-bottom:none; }
.kp-todo .t{ flex:1; font-size:14px; line-height:1.7; }
.kp-todo .t small{ display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.kp-todo.done .t{ color:var(--muted); text-decoration:line-through; }

@media (max-width:720px){
  .kp-items{ min-width:520px; }
}

/* =============================================================================
   メッセージ
   ========================================================================== */
.kp-thread-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kp-thread-head .kp-greet{ font-size:19px; }

.kp-chat{
  max-height:52vh; overflow-y:auto; padding:4px 2px 10px;
  border-bottom:1px solid var(--border); margin-bottom:12px;
}
.kp-chat-day{
  text-align:center; font-size:11.5px; color:var(--muted);
  margin:14px 0 10px; position:relative;
}
/* ここから未読。開いた時点の既読位置に1本だけ引く。
   これが無いと、久しぶりに開いたときにどこから読めばよいか分からない */
.kp-chat-unread{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 10px; color:#c53030; font-size:11.5px; font-weight:700;
}
.kp-chat-unread::before,
.kp-chat-unread::after{ content:""; flex:1; height:1px; background:#f0b4b4; }

/* 既読の印。自分が書いたものにだけ出す。
   業務連絡なので「送った」だけでは足りず、「届いたか」が要る */
.kp-bubble .rd{ margin-left:6px; font-weight:700; color:var(--muted); }
.kp-bubble .rd.on{ color:#2f855a; }

.kp-bubble-row{ display:flex; margin-bottom:8px; }
.kp-bubble-row.mine{ justify-content:flex-end; }
.kp-bubble{
  max-width:min(78%, 520px); background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:9px 12px;
}
.kp-bubble-row.mine .kp-bubble{ background:var(--soft); border-color:var(--soft); }
.kp-bubble .who{ font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:3px; }
.kp-bubble .body{ font-size:14px; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.kp-bubble .time{ font-size:10.5px; color:var(--muted); text-align:right; margin-top:3px; }

.kp-compose{ display:flex; gap:8px; align-items:flex-end; }
.kp-compose textarea{ flex:1; }

@media (max-width:720px){
  .kp-chat{ max-height:46vh; }
  .kp-bubble{ max-width:88%; }
}

/* =============================================================================
   通知（トップバーのベル）
   ========================================================================== */
.kp-bell{ position:relative; }
.kp-bell .icon-btn{ position:relative; }
.kp-bell-badge{
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#b3261e; color:#fff;
  font-size:10.5px; font-weight:700; line-height:16px; text-align:center;
}
.kp-bell-panel{
  position:absolute; right:0; top:calc(100% + 8px); width:min(320px, calc(100vw - 24px));
  max-height:min(420px, 70vh); overflow-y:auto; z-index:60;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(16,32,56,.14);
}
.kp-bell-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px;
}
.kp-bell-item{
  display:block; padding:11px 14px; border-bottom:1px solid #f0f2f5;
  text-decoration:none; color:inherit;
}
.kp-bell-item:last-child{ border-bottom:none; }
.kp-bell-item:hover{ background:var(--soft); }
.kp-bell-item.unread{ border-left:3px solid var(--primary); background:#fbfdff; }
.kp-bell-item b{ display:block; font-size:13.5px; color:var(--primary-dark); line-height:1.6; }
.kp-bell-item small{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.6; }

@media (max-width:720px){
  .kp-bell-panel{ position:fixed; right:12px; left:12px; width:auto; top:56px; }
}

/* 添付ファイル（メッセージ） */
.kp-attach{
  display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:12.5px;
  background:var(--soft); border-radius:8px; padding:6px 10px;
}
.kp-attach span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-attach .icon-btn{ margin-left:auto; }

.kp-bubble .kp-file{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:12.5px; text-decoration:none; color:var(--primary-dark);
  background:#f4f7fa; border:1px solid var(--border); border-radius:8px; padding:6px 10px;
  max-width:100%; overflow:hidden;
}
.kp-bubble .kp-file:hover{ background:#e9eff5; }
.kp-bubble .kp-file .material-symbols-outlined{ font-size:17px; color:var(--muted); }

/* サイドメニューの区切り見出し（社労士など、畳まない並びで使う） */
.kp-side-section{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#9aa7b4;
  padding:14px 14px 6px;
}
.kp-sidebar > .kp-side-section:first-child{ padding-top:4px; }
/* 会計は別システム。線で切って、同じ並びに見えないようにする */
.kp-side-item.ext{ border-top:1px dashed var(--border); }

/* =============================================================================
   管理者メニュー: 畳めるグループ
   24項目を一列に並べると、毎日押すものと年に一度のものが同じ重さで並ぶ。
   5つに束ね、いま見ている画面のグループだけを開く。
   ============================================================================= */
.kp-side-group{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px; margin:2px 0 0;
  border:0; border-radius:8px; background:none;
  font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--primary-dark); text-align:left; cursor:pointer;
  white-space:nowrap;
}
.kp-side-group:hover{ background:var(--soft); }
/* 見出しだけを伸ばす。アイコンと矢印は幅を持たせない
   （span をまとめて伸ばすと、アイコンまで引き伸ばされて重なる） */
.kp-side-group .lb{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kp-side-group > .material-symbols-outlined{ flex:0 0 auto; }
.kp-side-group .ch{
  font-size:20px; color:#a7b2bd; transition:transform .15s;
}
.kp-side-group.open .ch{ transform:rotate(180deg); }
/* いま見ている画面が入っているグループ。畳んでも、どこにいるか分かるように */
.kp-side-group.here{ color:var(--primary); }
.kp-side-group.here::before{
  content:""; width:3px; align-self:stretch; margin:2px 0 2px -6px;
  border-radius:2px; background:var(--primary);
}
.kp-side-sub{ padding:0 0 4px 10px; }
.kp-side-sub .kp-side-item{ font-size:13px; font-weight:500; padding:8px 12px; }
.kp-side-sub .kp-side-item.on{ font-weight:600; }
/* グループの中では、会計を切る破線は要らない（グループ自体が区切りになる） */
.kp-side-sub .kp-side-item.ext{ border-top:none; }

/* 処理中のボタン */
.kp-spin{ animation: kp-spin 1s linear infinite; }
@keyframes kp-spin { to { transform: rotate(360deg); } }
.btn:disabled{ opacity:.6; cursor:default; }

@media (max-width:860px){
  /* 横スクロールのメニューでは見出しを畳んで、項目だけを並べる */
  .kp-side-section{
    padding:0 4px 0 10px; display:flex; align-items:center;
    white-space:nowrap; font-size:10px; color:#b3bcc6;
  }

  /* 畳めるメニューは、狭い画面でも縦のまま。
     24項目を横スクロールに並べても、端のほうは誰も見ない。
     開いているのは1グループだけなので、上に置いても本文をさほど押し下げない */
  .kp-sidebar.grouped{
    display:block; overflow-x:visible; padding:8px 10px 10px;
  }
  .kp-sidebar.grouped .kp-side-item{
    margin-bottom:0; flex:none; font-size:13px; padding:8px 12px;
  }
  .kp-sidebar.grouped .kp-side-item em{ display:inline; }
}

/* メニュー一覧（メンバーの「メニュー」画面） */
.kp-menu{ display:grid; gap:10px; }
.kp-menu > a, .kp-menu > .soon{
  display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit;
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:#fff;
  transition:.15s;
}
.kp-menu > a:hover{ border-color:var(--primary); background:var(--soft); }
.kp-menu > .soon{ background:#fafbfc; color:var(--muted); }
.kp-menu .ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--soft);
  color:var(--primary); display:flex; align-items:center; justify-content:center;
}
.kp-menu > .soon .ico{ background:#eef0f2; color:#b3bcc6; }
.kp-menu .ico .material-symbols-outlined{ font-size:21px; }
.kp-menu b{ display:block; font-size:14.5px; color:var(--primary-dark); }
.kp-menu > .soon b{ color:var(--muted); }
.kp-menu small{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.7; }
.kp-menu .go{ margin-left:auto; color:var(--muted); }
.kp-menu > .soon em{
  margin-left:auto; font-style:normal; font-size:11px; font-weight:700;
  background:#eef0f2; color:#8c98a4; border-radius:999px; padding:3px 9px; white-space:nowrap;
}

/* ---- スペース予約 ------------------------------------------------------- */

/* スペースの選択。NO.xx を先頭に置き、掲示の並びと同じ見え方にする */
.kp-spaces{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.kp-space{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:#fff;
  transition:.15s;
}
.kp-space:hover{ border-color:var(--primary); }
.kp-space input{ width:auto; margin:0; flex:0 0 auto; }
.kp-space.on{ border-color:var(--primary); background:var(--soft); }
.kp-space.off{ opacity:.5; }
.kp-space .no{
  flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.04em;
  background:#eef0f2; color:#6b7681; border-radius:5px; padding:3px 7px; white-space:nowrap;
}
.kp-space .nm{ font-size:14px; font-weight:600; color:var(--primary-dark); }
.kp-space .cap{ display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px; }

/* その日の予約の並び */
.kp-slots{ display:grid; gap:6px; }
.kp-slot{
  display:flex; align-items:center; gap:10px; font-size:13px;
  border:1px solid var(--border); border-left:3px solid var(--primary);
  border-radius:8px; padding:9px 12px; background:#fff;
}
.kp-slot.pending{ border-left-color:#e0a92a; background:#fffdf3; }
.kp-slot.mine{ background:var(--soft); }
.kp-slot .tm{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700; color:var(--primary-dark); }
.kp-slot .ttl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-slot .by{ flex:0 0 auto; font-size:11.5px; color:var(--muted); }

.kp-chip.pending{ background:#fff3d6; color:#8a6d1f; }
.kp-chip.approved{ background:#eaf5ec; color:#256b36; }
.kp-chip.rejected{ background:#fdecec; color:#b3261e; }

/* ---- 自分の予定（スケジュール） ----------------------------------------- */

/* 週の帯。スマホで片手で送れるよう、1週間を7つに割り切って出す */
.kp-week{ display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.kp-week .nav{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:#fff; color:var(--muted); cursor:pointer; display:grid; place-items:center;
}
.kp-week .nav:hover{ border-color:var(--primary); color:var(--primary); }
.kp-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; flex:1 1 auto; }
.kp-day{
  border:1px solid var(--border); border-radius:9px; background:#fff; cursor:pointer;
  padding:7px 2px 6px; text-align:center; transition:.12s;
}
.kp-day:hover{ border-color:var(--primary); }
.kp-day.on{ background:var(--primary); border-color:var(--primary); color:#fff; }
.kp-day.today .n{ text-decoration:underline; text-underline-offset:3px; }
.kp-day .w{ display:block; font-size:10px; color:var(--muted); }
.kp-day.on .w{ color:rgba(255,255,255,.8); }
.kp-day .n{ display:block; font-size:15px; font-weight:700; color:var(--primary-dark); line-height:1.5; }
.kp-day.on .n{ color:#fff; }
.kp-day.sat .n{ color:#3f4bab; } .kp-day.sun .n{ color:#b3261e; }
.kp-day.on.sat .n, .kp-day.on.sun .n{ color:#fff; }
.kp-day .dots{ display:flex; gap:2px; justify-content:center; height:5px; margin-top:2px; }
.kp-day .dots i{ width:4px; height:4px; border-radius:50%; background:var(--primary); }
.kp-day.on .dots i{ background:#fff; }

/* その日の予定 */
.kp-events{ display:grid; gap:7px; }
.kp-event{
  display:flex; gap:11px; align-items:flex-start; background:#fff;
  border:1px solid var(--border); border-left:3px solid var(--primary);
  border-radius:9px; padding:11px 13px;
}
.kp-event .tm{
  flex:0 0 auto; min-width:52px; font-size:12px; font-weight:700; line-height:1.6;
  color:var(--primary-dark); font-variant-numeric:tabular-nums;
}
.kp-event .tm small{ display:block; font-weight:400; color:var(--muted); }
.kp-event .ct{ flex:1 1 auto; min-width:0; }
.kp-event .ct b{ font-size:14px; color:var(--text); display:block; }
.kp-event .ct small{ display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.7; }
.kp-event .row-actions{ flex:0 0 auto; display:flex; gap:4px; }

/* 予定の色分け。どこから来た予定かを左の線で見分ける */
.kp-event.meeting{ border-left-color:#3f4bab; }
.kp-event.visit{ border-left-color:#e0a92a; }
.kp-event.private{ border-left-color:#8c98a4; }
.kp-event.other{ border-left-color:#7d6be8; }
.kp-event.booking{ border-left-color:#256b36; background:#f8fbf9; }
.kp-event.task{ border-left-color:#b3261e; background:#fffaf9; }
.kp-event.readonly .ct b{ font-weight:600; }
/* Googleカレンダーから来た予定。ポータルの予定と見分けが付くようにする */
.kp-event.google{ border-left-color:#1a73e8; background:#f7faff; }

/* 「社内情報」の中の切り替え帯。
   お知らせ・社内文書・社員名簿は入口を1つにまとめたので、
   中で行き来できる帯をページの先頭に置く */
.kp-subnav { display: flex; gap: 6px; margin: 0 0 18px; flex-wrap: wrap; }
.kp-subtab {
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.kp-subtab:hover { border-color: var(--primary); }
.kp-subtab.on { border-color: var(--primary); background: var(--primary); color: #fff; }

.topbar .brand a { display: inline-flex; align-items: center; }

/* サイドメニューの「対応が要る件数」。
   件数が0のときは器ごと隠す（js/layout.js の loadBadges）。
   いつも数字が付いているバッジは、そこにある時点で意味を失う */
.kp-side-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #c53030;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  flex: 0 0 auto;
}
/* 選択中の行は背景が濃いので、赤のままだと沈む */
.kp-side-item.on .kp-side-badge { background: #fff; color: var(--primary); }
.kp-side-badge.hidden { display: none; }

/* 畳んだグループの見出しに付ける印。
   開かないと気づけないのでは、畳んだ意味が無くなる */
.kp-side-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c53030;
  flex: 0 0 auto;
  margin-left: 4px;
}
.kp-side-dot.hidden { display: none; }
/* 開いているあいだは、中の件数が見えているので印は要らない */
.kp-side-group.open .kp-side-dot { display: none; }

/* ===========================================================================
   大きく見る（KPLayout.viewer）

   契約書のような「細かい字を確かめる」画面は、枠が小さいと
   スクロールばかりになって、かえって読み落とす。
   画面いっぱいに出す器を1つだけ作り、どの画面からも同じ形で使う。

   ・fixed で画面を覆う。中の高さは 100% にして、iframe を目一杯に
   ・Esc と ✕ で閉じる（js/layout.js）
   ・印刷のときは器ごと消す。紙には本文だけ出す
   =========================================================================== */
.kp-viewer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: #2b2f33;
}
.kp-viewer.hidden { display: none; }

.kp-viewer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: #1f2225;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}
.kp-viewer-bar .t {
  flex: 1;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-viewer-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.kp-viewer-bar button:hover { background: rgba(255, 255, 255, 0.14); }
.kp-viewer-bar .material-symbols-outlined { font-size: 17px; }

.kp-viewer-body { flex: 1; min-height: 0; background: #3a3f44; }
.kp-viewer-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* 文字で見せるとき（PDFではなく本文）。紙に近い幅で真ん中に置く */
.kp-viewer-body .kp-viewer-text {
  height: 100%;
  overflow-y: auto;
  padding: 26px 16px 60px;
}
.kp-viewer-body .kp-viewer-text > div {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 38px 42px;
  font-size: 14px;
  line-height: 2.1;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 720px) {
  .kp-viewer-body .kp-viewer-text { padding: 12px 10px 40px; }
  .kp-viewer-body .kp-viewer-text > div { padding: 20px 18px; font-size: 13px; }
}

@media print {
  .kp-viewer { display: none !important; }
}

/* ===========================================================================
   印刷

   労働条件通知書を電子で渡すときは、本人が紙に出せることが要る
   （労働基準法施行規則第5条）。ブラウザの印刷でそのまま出せるように、
   画面まわり（メニュー・ボタン）を落として本文だけ残す。

   .no-print を付けたものは紙に出ない。
   契約書のように「そのページだけ紙にしたい」ものは、
   .print-only-here を付けると、それ以外が消える
   =========================================================================== */
@media print {
  .topbar, .kp-sidebar, .kp-tabbar, .no-print { display: none !important; }

  .kp-has-sidebar .wrap, .wrap {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  body { background: #fff !important; }

  .card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10mm !important;
    break-inside: auto;
  }
  .banner { border: 1px solid #999 !important; background: #fff !important; }

  /* 印刷したいところだけ残す。器は残して中身の兄弟を消す作り */
  body.kp-printing .wrap > *:not(.print-here) { display: none !important; }
  body.kp-printing .print-here .no-print { display: none !important; }

  @page { size: A4; margin: 18mm 16mm; }
}