@charset "utf-8";
/* HDS ベース：リセット・タイポグラフィ・ヘッダ・レイアウト骨格 */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); line-height: var(--lh-base);
  color: var(--ink); background: var(--canvas);
  display: flex; flex-direction: column;
}
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; color: var(--ink); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-3); }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
main { flex: 1; padding: var(--sp-5) 0 var(--sp-7); }

/* ---- ヘッダ ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--primary);      /* 緑の細い帯 */
}
.nav { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-4); }
.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: auto; flex-shrink: 0; }   /* ロゴは縮めない（狭いときは下の @container で文字を省く） */
.brand__mark { height: 34px; }
.brand__word { height: 17px; }
.brand__app { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; padding-left: var(--sp-2); border-left: 1px solid var(--line-strong); }
/* アプリの切り替え（js/nav.js） */
.appmenu { position: relative; flex: none; margin-left: var(--sp-2); }
.appmenu__btn, .search-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.appmenu__btn:hover, .search-btn:hover, .appmenu__btn[aria-expanded="true"] { background: var(--primary-tint); color: var(--primary-deep); }
.appmenu__btn i { color: var(--primary-dark); }
.appmenu__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(880px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover); }
.appmenu__panel[hidden] { display: none; }
.appmenu__title { font-size: var(--fs-xs); font-weight: 700; color: var(--primary-dark); letter-spacing: .06em;
  margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.appmenu__item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius);
  color: var(--ink); font-size: var(--fs-sm); }
.appmenu__item i { width: 1.2em; text-align: center; color: var(--primary-dark); }
.appmenu__item:hover { background: var(--primary-tint); text-decoration: none; }
/* 組織の切り替え（hds/companies.py）。ボタンとヘッダの下の線を組織の色にする */
.compmenu__btn { border-color: var(--company-color); }
.compmenu__name { max-width: 10em; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ink); }
/* アイコン画像を決めた組織（hds/companies.py）。地は白、縁を組織の色に */
.compmenu__mark.has-icon, .company-pick__mark.has-icon { background: #fff; box-shadow: inset 0 0 0 1px var(--company-color); overflow: hidden; }
.compmenu__mark.has-icon img, .company-pick__mark.has-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.compmenu__btn .fa-chevron-down { font-size: 10px; color: var(--muted); }
.compmenu__label { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; margin-left: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); --company-color: var(--primary); }
.compmenu__label .compmenu__name { white-space: nowrap; }
.compmenu__mark { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--company-color); color: #fff; font-size: 12px; font-weight: 700; }
.appmenu__panel.compmenu__panel { display: block; width: min(320px, calc(100vw - 32px)); padding: var(--sp-3); }
.appmenu__panel.compmenu__panel[hidden] { display: none; }
.compmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius);
  background: none; font: inherit; font-size: var(--fs-sm); color: var(--ink); text-align: left; cursor: pointer; }
.compmenu__item:hover:not([disabled]) { background: var(--primary-tint); }
.compmenu__item[disabled] { cursor: default; }
.compmenu__item .fa-check { margin-left: auto; color: var(--primary-dark); }
.compmenu__text { display: flex; flex-direction: column; min-width: 0; }
.compmenu__text small { color: var(--muted); font-size: var(--fs-xs); }
.site-header--company { box-shadow: inset 0 -3px 0 var(--company-color); }
/* どこからでも探す（ヘッダの「探す」） */
.search-btn { flex: none; color: var(--muted); }
.search-btn kbd, .palette kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--paper-alt); color: var(--muted); }

/* 足跡（たどってきた画面。js/app.js）。長い名前は省略して、全体は title で見せる */
.trail { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; margin-left: var(--sp-3);
  font-size: var(--fs-sm); overflow: hidden; white-space: nowrap; }
.trail__home { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius);
  color: var(--primary-dark); }
.trail__home:hover { background: var(--primary-tint); text-decoration: none; }
.trail__item, .trail__more { position: relative; flex: 0 1 auto; min-width: 2.5em; max-width: 16em; overflow: hidden;
  text-overflow: ellipsis; padding: 4px 8px 4px 20px; border-radius: var(--radius); color: var(--ink-2); }
.trail__item::before, .trail__more::before { content: '›'; position: absolute; left: 7px; color: var(--muted); }
a.trail__item:hover { background: var(--paper-alt); text-decoration: none; }
.trail__item.is-current { color: var(--primary-deep); font-weight: 700; flex-shrink: 0; max-width: 20em; }
.trail__more { flex: none; min-width: 0; background: none; border: 0; font: inherit; cursor: pointer; }
.trail__more:hover { background: var(--paper-alt); }
.nav-user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2); }
.nav-user__me { display: flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; border-radius: 999px; padding: 2px 8px 2px 2px; }
.nav-user__me:hover { background: var(--primary-tint); color: var(--primary-deep); }
.nav-user__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.nav-user__avatar--photo { object-fit: cover; background: var(--paper-alt); border: 1px solid var(--line); }
/* ヘッダの印（hds/header_marks.py。勤怠の「勤務中」など）。押すとマイポータル */
.hmark { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs);
  font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.hmark:hover { text-decoration: none; filter: brightness(1.05); }
.hmark--on { background: #3f9f52; color: #fff; }
.hmark--break { background: #4a7fc1; color: #fff; }
.hmark--done { background: var(--paper-alt); color: var(--ink-2); border-color: var(--line); }
.hmark--off { background: #fff4e5; color: #9a5a12; border-color: #f0cf9e; }

/* ---- フッタ ---- */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); padding: var(--sp-4) 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.site-footer a, .site-footer .linkbtn { color: var(--muted); }
/* 見た目はリンクのボタン（モーダルを開くだけのもの） */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-deep); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
/* クレジット（提供元の説明。templates/support/_credit_modal.html） */
.modal.credit { width: min(480px, calc(100vw - 32px)); max-width: none; }
.credit__logo { text-align: center; margin: var(--sp-2) 0 var(--sp-4); }
.credit__logo img { display: block; margin: 0 auto; width: min(300px, 85%); height: auto; }
.credit__lead { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.credit__op { margin-top: var(--sp-4); }
.credit__copy { margin-top: var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-xs); }
.site-footer a:hover { color: var(--primary-deep); }

/* ---- ページ見出し行 ---- */
.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head__title { display: flex; flex-direction: column; gap: 2px; }
.page-head__eyebrow { font-size: var(--fs-xs); color: var(--primary-dark); font-weight: 700; letter-spacing: .06em; }
.page-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: stretch; }
.page-head__actions > form { display: flex; }

/* ---- ヘッダの幅で省く（窓の幅ではなくヘッダの幅で決める。AI アシスタントをピン留めすると、窓が広くてもヘッダは狭くなる）---- */
.site-header { container: header / inline-size; }
@container header (max-width: 1100px) {
  .brand__app { display: none; }
}
@container header (max-width: 920px) {
  .appmenu__btn-label, .search-btn__label, .search-btn kbd, .nav-user__name, .hmark__label { display: none; }
  .hmark { padding: 4px 7px; }
}
@container header (max-width: 640px) {
  .brand__word { display: none; }
}

/* ---- 2 カラム（詳細画面）---- */
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .brand__app, .appmenu__btn-label, .search-btn__label, .search-btn kbd { display: none; }
  /* 狭い画面では、ひとつ前の画面だけ（今の画面は見出しで分かる） */
  .trail > .trail__item:not(:nth-last-child(2)), .trail > .trail__more { display: none; }
  .trail > .trail__item:nth-last-child(2) { max-width: none; flex-shrink: 1; }
  .nav-user__name { display: none; }
  .hmark__label { display: none; }
  .hmark { padding: 4px 7px; }
}

/* ---- 自分のメニュー（ヘッダの右上。マイポータル・組織の切り替え・ログアウト）---- */
.usermenu { margin-left: var(--sp-2); }
button.nav-user__me { border: 2px solid transparent; background: none; font: inherit; cursor: pointer; height: 36px; }
.nav-user__caret { font-size: 10px; color: var(--muted); }
/* 出勤の様子を枠の色で（hds/header_marks.py の ring。勤怠） */
button.nav-user__me--on { border-color: #3f9f52; background: #eef8f0; }
button.nav-user__me--break { border-color: #4a7fc1; background: #edf3fb; }
button.nav-user__me--off { border-color: #e8a64a; background: #fff6ea; }
button.nav-user__me--done { border-color: var(--line-strong, #c9cdd3); }
/* テナント管理者として動いているとき: 出勤の枠の外にもう 1 本（色は出勤の 4 色と重ならない赤紫） */
button.nav-user__me--admin { outline: 3px solid #b0306a; outline-offset: 2px; }
.admin-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
               color: #fff; background: #b0306a; width: fit-content; }
.appmenu__panel.usermenu__panel { display: block; left: auto; right: 0; width: min(300px, calc(100vw - 32px)); padding: var(--sp-3); }
.appmenu__panel.usermenu__panel[hidden] { display: none; }
.usermenu__who { display: grid; gap: 2px; padding: 0 8px var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.usermenu__who small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.usermenu__state { justify-self: start; margin-top: 4px; }
.usermenu .appmenu__title { margin-top: var(--sp-2); }
.usermenu__logout { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.usermenu__logout .appmenu__item { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.compmenu__label--mark { padding: 0 4px; }

/* 操作しないときの自動ログアウトの知らせ（js/idle.js） */
.idle-note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: var(--sp-2);
             padding: 10px 16px; border-radius: 8px; background: var(--surface, #fff); border: 1px solid var(--line-strong, #c9cdd3);
             box-shadow: 0 6px 20px rgba(0, 0, 0, .18); max-width: calc(100vw - 32px); }