/* PM_ASSET_VERSION 2026.10.21.2 */
@charset "UTF-8";
/* ------------------------------------------------------------------
   プロジェクト管理アプリ スタイル
   配色は墨(ink)と藍(ai)を基調に、彩度はプロジェクト色のために空けています。
   フォントは各OSの日本語UIフォントをそのまま使います（社内網で外部CDNが
   塞がれていても崩れないようにするため）。
   ------------------------------------------------------------------ */

:root {
  --canvas:      #eceef1;
  --surface:     #ffffff;
  --surface-alt: #f6f8fa;
  --ink:         #1b2430;
  --ink-soft:    #4a5668;
  --muted:       #78859a;
  --line:        #d7dce3;
  --line-soft:   #e6eaf0;

  --ai:          #27548a;
  --ai-strong:   #1b3c64;
  --ai-wash:     #e8eff7;

  --danger:      #b4452f;
  --danger-wash: #fbeceb;
  --warn:        #a56a1e;
  --warn-wash:   #fdf3e3;
  --ok:          #2f7a4d;
  --ok-wash:     #e9f4ed;

  --holiday:     #fbecec;
  --weekend:     #edf1f6;
  --today:       #fff6da;

  --r-sm: 3px;
  --r-md: 6px;
  --rail-w: 208px;
  --shadow-pop: 0 8px 28px rgba(16, 26, 40, .18);

  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic",
          "Noto Sans JP", Meiryo, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ai); }

:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 2px;
}

/* =================================================== ログイン / セットアップ */

.auth-body {
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 70%),
    var(--canvas);
}

.auth-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ai);
  border-radius: var(--r-md);
  padding: 32px 30px 30px;
}

.auth-title { margin: 0 0 4px; font-size: 19px; letter-spacing: .02em; }
.auth-lead  { margin: 0 0 22px; color: var(--muted); font-size: 13px; }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ai); outline: none;
  box-shadow: 0 0 0 3px var(--ai-wash);
}

.notice {
  margin: 0 0 16px; padding: 10px 12px;
  border-radius: var(--r-sm); font-size: 13px; line-height: 1.6;
}
.notice-err  { background: var(--danger-wash); color: var(--danger); }
.notice-ok   { background: var(--ok-wash);     color: var(--ok); }
.notice-warn { background: var(--warn-wash);   color: var(--warn); }

/* ================================================================= ボタン */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-alt); border-color: #c3cad4; }
.btn-primary {
  background: var(--ai); border-color: var(--ai); color: #fff;
}
.btn-primary:hover { background: var(--ai-strong); border-color: var(--ai-strong); }
.btn-danger { color: var(--danger); border-color: #e4c6c0; }
.btn-danger:hover { background: var(--danger-wash); }
.btn-block { width: 100%; padding: 10px; margin-top: 6px; }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--line-soft); }

/* ============================================================== アプリ外枠 */

.app { display: flex; height: 100vh; overflow: hidden; }

.rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  background: var(--ai-strong);
  color: #cfdcea;
  display: flex; flex-direction: column;
  padding: 16px 0;
}
.rail-brand {
  padding: 0 18px 16px;
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .03em;
}
/* いま見ている会社・団体。入れる先が複数ある人だけ押せます */
.rail-org { padding: 0 10px 12px; }
.org-chip {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm);
  background: rgba(255,255,255,.07); color: #fff;
  font-size: 12.5px; font-weight: 700; text-align: left;
}
.org-chip.is-clickable { cursor: pointer; }
.org-chip.is-clickable:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.34); }
/* 名前が長くても枠から出ないようにします */
.org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-chip .ic { flex: 0 0 auto; opacity: .85; display: inline-flex; }
.org-note { margin: 5px 2px 0; font-size: 11px; color: #9fb4cc; }

.rail-nav { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
.rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit;
  cursor: pointer; text-align: left; width: 100%;
}
.rail-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail-item.is-active { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; }
.rail-item .ico { width: 18px; text-align: center; opacity: .9; }

.rail-foot { padding: 14px 16px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; }
.rail-links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.rail-user { color: #fff; }
.rail-role { color: #9fb4cc; font-size: 11.5px; }
.rail-foot a { color: #9fb4cc; text-decoration: none; }
.rail-foot a:hover { color: #fff; text-decoration: underline; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar h1 { margin: 0 10px 0 0; font-size: 16px; letter-spacing: .02em; }
.topbar .spacer { flex: 1; }
.topbar select, .topbar input[type="search"], .topbar input[type="month"] {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); max-width: 170px;
}
.filter-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); }

.view { flex: 1; overflow: auto; padding: 18px; }
.view-flush { padding: 0; }

/* =============================================================== テーブル */

.tbl-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td {
  padding: 7px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle;
}
table.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); font-weight: 700; white-space: nowrap;
  cursor: pointer; user-select: none;
}
table.tbl thead th .sort { color: var(--ai); margin-left: 3px; }
table.tbl tbody tr:hover { background: var(--surface-alt); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl td.date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-late td { background: var(--danger-wash); }
.row-late:hover td { background: #f7e2df; }
.row-done .t-title { color: var(--muted); text-decoration: line-through; }

.t-title { cursor: pointer; }
.t-title:hover { color: var(--ai); text-decoration: underline; }

.chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.75; color: #fff; white-space: nowrap;
}
.chip-soft { color: var(--ink-soft); background: var(--surface-alt); border: 1px solid var(--line); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: -6px;
}

.bar-mini { width: 54px; height: 5px; background: var(--line-soft); border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; }
.bar-mini > i { display: block; height: 100%; background: var(--ai); }

/* =================================================================== ボード */

.board { display: flex; gap: 12px; align-items: flex-start; min-height: 100%; }
.bcol {
  flex: 0 0 272px; max-width: 272px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; max-height: 100%;
}
.bcol-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  border-top: 3px solid var(--st-color, var(--muted));
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface);
}
.bcol-head .name { font-weight: 700; font-size: 13.5px; }
.bcol-head .count { color: var(--muted); font-size: 12px; }
.bcol-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 70px; }
.bcol.drag-over .bcol-body { background: var(--ai-wash); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--p-color, var(--line));
  border-radius: var(--r-md);
  padding: 9px 11px;
  cursor: grab;
}
.card:hover { border-color: #c3cad4; }
.card.dragging { opacity: .4; }
.card .ttl { font-weight: 600; font-size: 13px; line-height: 1.5; margin-bottom: 6px; word-break: break-word; }
.card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--muted); }
.card.is-late { border-color: #e2b6ad; background: var(--danger-wash); }
.card .due-late { color: var(--danger); font-weight: 700; }
.card .due-soon { color: var(--warn); font-weight: 700; }

.bcol-add {
  margin: 0 10px 10px; padding: 7px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 12.5px;
}
.bcol-add:hover { border-color: var(--ai); color: var(--ai); background: var(--surface); }

/* =================================================================== ガント */

.gantt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; height: 100%; }
.gantt-grid { position: relative; min-width: max-content; }

.grow { display: flex; height: 34px; border-bottom: 1px solid var(--line-soft); }
.grow:hover .gcell-left { background: var(--surface-alt); }

.ghead { position: sticky; top: 0; z-index: 5; background: var(--surface); }
.ghead .grow { height: auto; border-bottom: 1px solid var(--line); }

.gcell-left {
  position: sticky; left: 0; z-index: 4;
  flex: 0 0 340px; width: 340px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  font-size: 12.5px;
}
.ghead .gcell-left { z-index: 6; background: var(--surface); font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.gcell-left .gt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.gcell-left .gt-title:hover { color: var(--ai); text-decoration: underline; }
.gcell-left .gt-dates { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.gcell-left .gt-dates.late { color: var(--danger); font-weight: 700; }

.gtrack { position: relative; flex: 1; overflow: hidden; }
.gdays { display: flex; height: 100%; }
.gday {
  flex: 0 0 var(--day-w); width: var(--day-w);
  min-width: 0; max-width: var(--day-w);
  border-right: 1px solid var(--line-soft);
}
.gday.wk  { background: var(--weekend); }
.gday.hol { background: var(--holiday); }
.gday.now { background: var(--today); }

.gmonth, .gdate, .gwday { display: flex; }
.gmonth > div {
  border-right: 1px solid var(--line);
  padding: 3px 6px; font-size: 11.5px; font-weight: 700; color: var(--ai-strong);
  white-space: nowrap; overflow: hidden; min-width: 0;
}
/* 日付・曜日のセルも、幅を本数どおりに固定します。
   min-width を 0 にしないと、中の文字幅まで広がって本体の升目とずれます。 */
.gdate > div, .gwday > div {
  flex: 0 0 var(--day-w); width: var(--day-w);
  min-width: 0; max-width: var(--day-w);
  text-align: center; overflow: hidden;
  font-size: 10.5px; border-right: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.gwday > div { color: var(--muted); font-size: 10px; padding-bottom: 2px; }
.gdate > div.now, .gwday > div.now { background: var(--today); font-weight: 700; }
.gdate > div.hol, .gwday > div.hol { background: var(--holiday); color: var(--danger); }
.gdate > div.wk,  .gwday > div.wk  { background: var(--weekend); }

.gbar {
  position: absolute; top: 7px; height: 20px;
  border-radius: var(--r-sm);
  background: var(--bar, var(--ai));
  cursor: grab;
  display: flex; align-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.gbar .fill { position: absolute; inset: 0 auto 0 0; background: rgba(0,0,0,.22); }
.gbar .lbl {
  position: relative; z-index: 1;
  padding: 0 7px; font-size: 11px; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.gbar.is-done { opacity: .55; }
.gbar.is-late { box-shadow: inset 0 0 0 2px var(--danger); }
.gbar .handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.gbar .handle.l { left: 0; }
.gbar .handle.r { right: 0; }
.gbar.dragging { opacity: .75; cursor: grabbing; }

.gnow-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #d9a441; z-index: 3; pointer-events: none; }

/* ============================================================== カレンダー */

.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head > div {
  padding: 7px; text-align: center; font-size: 12px; font-weight: 700;
  background: var(--ai-strong); color: #fff; border-right: 1px solid rgba(255,255,255,.12);
}
.cal-head > div.sat { background: #2e6ea8; }
.cal-head > div.sun { background: #8d3a2c; }

.cal-cell {
  min-height: 112px; min-width: 0;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 4px 5px; display: flex; flex-direction: column; gap: 3px;
}
.cal-cell.other { background: var(--surface-alt); }
.cal-cell.other .cal-num { color: #b8c0cc; }
.cal-cell.wk  { background: var(--weekend); }
.cal-cell.hol { background: var(--holiday); }
.cal-cell.now { background: var(--today); }
.cal-cell.drag-over { outline: 2px solid var(--ai); outline-offset: -2px; }
.cal-num { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cal-hol { font-size: 10.5px; color: var(--danger); line-height: 1.4; margin-top: -3px; }
.cal-chip {
  font-size: 11px; line-height: 1.5; padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--p-color, var(--ai)); color: #fff; cursor: grab;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; min-width: 0;
}
.cal-chip.is-done { opacity: .5; text-decoration: line-through; }
.cal-more { font-size: 10.5px; color: var(--muted); }

/* ============================================================ ダッシュボード */

.dash { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-column: 1 / -1; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
}
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kpi.alert { border-color: #e2b6ad; background: var(--danger-wash); }
.kpi.alert .v { color: var(--danger); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.panel > h2 { margin: 0 0 12px; font-size: 13.5px; letter-spacing: .02em; }

.hbar { display: grid; grid-template-columns: 112px 1fr 42px; gap: 8px; align-items: center; margin-bottom: 7px; font-size: 12.5px; }
.hbar .track { height: 16px; background: var(--surface-alt); border-radius: var(--r-sm); overflow: hidden; }
.hbar .track > i { display: block; height: 100%; background: var(--fill, var(--ai)); }
.hbar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.hbar .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================== 設定 */

.settings { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
.srow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.srow:last-child { border-bottom: 0; }
.srow input[type="text"], .srow input[type="email"], .srow input[type="date"], .srow select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0;
}
/* SSO のログインボタン（提供元の名前はそのまま文字で出します） */
.sso-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; font-weight: 600; padding: 11px 14px;
}
.sso-btn:hover { text-decoration: none; }
.sso-btn svg { flex: 0 0 auto; opacity: .75; }
.sso-or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 14px; color: var(--muted); font-size: 12px;
}
.sso-or::before, .sso-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

.srow .grow1 { flex: 1; min-width: 0; }
/* 名前の下に補足を1行置きたいとき */
.srow .stack { display: flex; flex-direction: column; gap: 2px; }
.srow input[type="color"] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; }

/* ================================================================ モーダル */

.modal-bg {
  position: fixed; inset: 0; background: rgba(16, 26, 40, .42);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.modal {
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-head h2 { margin: 0; font-size: 15px; flex: 1; }
.modal-body { padding: 18px; }
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--surface);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ================================================================== トースト */

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast {
  background: var(--ink); color: #fff; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13px; box-shadow: var(--shadow-pop); max-width: 340px;
}
.toast.err { background: var(--danger); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink-soft); margin-bottom: 4px; font-size: 14px; }

/* ================================================================ レスポンシブ */

@media (max-width: 820px) {
  .app { flex-direction: column; height: 100dvh; }
  .rail {
    width: 100%; flex: 0 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand foot" "nav nav";
    align-items: center; padding: 8px 12px; gap: 6px 10px;
  }
  .rail-brand { grid-area: brand; padding: 0; font-size: 14px; white-space: nowrap; }
  .rail-foot  { grid-area: foot; border: 0; padding: 0; text-align: right; white-space: nowrap; }
  .rail-links { flex-direction: row; gap: 8px; margin-top: 0; }
  .rail-nav   { grid-area: nav; flex-direction: row; padding: 0; gap: 4px; overflow-x: auto; }
  .rail-item  { padding: 6px 10px; white-space: nowrap; }
  .rail-item .ico { display: none; }
  .rail-role  { display: none; }
  .view { padding: 12px; }
  .gcell-left { flex-basis: 180px; width: 180px; }
  .gcell-left .gt-dates { display: none; }
  .cal-cell { min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ======================================================= 同時編集・在席表示 */

.presence { display: inline-flex; align-items: center; gap: 4px; }
.presence-label { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.presence .avatar { margin-right: 0; width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--surface); }

/* ============================================= タスク画面のタブとバッジ */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; }
.tab {
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; padding: 7px 14px; cursor: pointer;
  color: var(--ink-soft); font-size: 13px;
}
.tab:hover:not(:disabled) { color: var(--ink); }
.tab.is-active { color: var(--ai); border-bottom-color: var(--ai); font-weight: 700; }
.tab:disabled { color: #c0c7d1; cursor: not-allowed; }

.pane-loading, .pane-empty { color: var(--muted); font-size: 13px; margin: 4px 0 14px; }
.pane-hint { color: var(--muted); font-size: 11.5px; margin: 8px 0 0; }

.badge {
  display: inline-block; font-size: 11px; color: var(--muted);
  white-space: nowrap; margin-left: 2px;
}

/* ================================================================ コメント */

.cmt-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cmt { border-left: 2px solid var(--line); padding-left: 10px; }
.cmt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cmt-who { font-size: 12.5px; font-weight: 700; }
.cmt-when { font-size: 11.5px; color: var(--muted); flex: 1; font-variant-numeric: tabular-nums; }
.cmt-del {
  border: 0; background: transparent; color: var(--muted);
  font-size: 11.5px; cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm);
}
.cmt-del:hover { color: var(--danger); background: var(--danger-wash); }
.cmt-body { font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }

.cmt-form { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.cmt-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); resize: vertical;
}
.cmt-form textarea:focus { border-color: var(--ai); outline: none; box-shadow: 0 0 0 3px var(--ai-wash); }
.cmt-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ============================================================ 添付ファイル */

.att-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.att {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.att-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm);
  display: block; background: var(--surface-alt);
}
.att-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  background: var(--ai-wash); color: var(--ai-strong);
  border-radius: var(--r-sm); font-size: 10.5px; font-weight: 700;
}
.att-meta { flex: 1; min-width: 0; }
.att-name {
  display: block; font-size: 13px; color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-name:hover { color: var(--ai); text-decoration: underline; }
.att-sub { font-size: 11.5px; color: var(--muted); }

.dropzone {
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 16px; text-align: center;
}
.dropzone.over { border-color: var(--ai); background: var(--ai-wash); }
.dropzone > p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.dropzone input[type="file"] { font-size: 12.5px; }

.upload-bar {
  height: 4px; background: var(--line-soft); border-radius: 999px;
  overflow: hidden; margin-top: 10px;
}
.upload-bar > i { display: block; height: 100%; width: 0; background: var(--ai); transition: width .2s; }

/* ================================================================ 承認フロー */

.rv {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; line-height: 1.7; white-space: nowrap; font-weight: 700;
}
.rv-pending  { background: #fdf0d9; color: #8a5a12; }
.rv-approved { background: var(--ok-wash);  color: var(--ok); }
.rv-rejected { background: var(--danger-wash); color: var(--danger); }
.rv-cancel   { background: var(--surface-alt); color: var(--muted); }
.rv-none     { background: var(--surface-alt); color: var(--muted); font-weight: 400; }

/* タスク画面の上部に出る帯 */
.rvbox {
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 16px;
  background: var(--surface-alt);
}
.rvbox.rv-pending  { border-left-color: #d9a441; background: #fffaf0; }
.rvbox.rv-approved { border-left-color: var(--ok); background: var(--ok-wash); }
.rvbox.rv-rejected { border-left-color: var(--danger); background: var(--danger-wash); }

.rvbox-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rvbox-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.rvbox-who { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; }
.rvbox-who .avatar { width: 20px; height: 20px; font-size: 10px; }
.rvbox-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.rvbox-note { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.rvbox-note .avatar { width: 20px; height: 20px; font-size: 10px; }

.btn-ok { color: var(--ok); border-color: #b5d8c2; }
.btn-ok:hover { background: var(--ok-wash); border-color: var(--ok); }

/* コメント欄に出るレビュー履歴 */
.cmt.cmt-rv-pending  { border-left-color: #d9a441; }
.cmt.cmt-rv-approved { border-left-color: var(--ok); }
.cmt.cmt-rv-rejected { border-left-color: var(--danger); }
.cmt.cmt-rv-cancel   { border-left-color: var(--muted); }

/* 依頼ダイアログで選んだファイルの一覧 */
.picked { margin-top: 10px; text-align: left; }
.picked-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.picked-row:last-child { border-bottom: 0; }
.picked-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked-size { color: var(--muted); font-size: 11.5px; }

/* 承認待ちビュー */
.review-view { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.review-view .panel > h2 {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px;
}
.sec-count { font-size: 12px; color: var(--muted); font-weight: 400; }

.rv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.rv-row:last-child { border-bottom: 0; }
.rv-row:hover { background: var(--surface-alt); }
.rv-row-main { flex: 1; min-width: 0; }
.rv-row-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* サイドバーの件数バッジ */
.rail-label { flex: 1; }
.rail-count {
  background: #d9a441; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}

@media (max-width: 820px) {
  .rv-row { flex-wrap: wrap; }
  .rv-row-actions { width: 100%; justify-content: flex-end; }
}

/* ========================================== 権限がない項目の見え方 */

/* 動かせないカードやバーは、掴めないことが分かるようにします */
.card.is-locked { cursor: default; }
.card.is-locked:hover { border-color: var(--line); }
.gbar.is-locked { cursor: pointer; }
.cal-chip.is-locked { cursor: pointer; }

/* 入力できない欄は、読むためのものだと分かる見た目にします */
.modal input:disabled,
.modal select:disabled,
.modal textarea:disabled {
  background: var(--surface-alt);
  color: var(--ink-soft);
  cursor: not-allowed;
  border-color: var(--line-soft);
}
.modal select:disabled { opacity: 1; }

/* ==================================================================
   スマートフォン対応
   画面幅が狭いときは、左のメニューを下部のタブバーに置き換えます。
   ================================================================== */

:root {
  --tabbar-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* 下部タブバー（狭い画面でのみ表示） */
.tabbar { display: none; }

.fab { display: none; }

/* ------------------------------------------------ タブレット以下 */
@media (max-width: 1024px) {
  .rail { --rail-w: 176px; width: 176px; flex-basis: 176px; }
  .bcol { flex-basis: 248px; max-width: 248px; }
}

/* ------------------------------------------------ スマートフォン */
@media (max-width: 820px) {

  html, body { font-size: 15px; }

  .app {
    flex-direction: column;
    height: 100dvh;
  }

  /* 左メニューは隠し、下部タブバーに置き換えます */
  .rail { display: none; }

  .main { flex: 1; min-height: 0; }

  /* --- 上部バーは一段にまとめます --- */
  .topbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    position: sticky; top: 0; z-index: 20;
  }
  .topbar h1 { font-size: 16px; margin: 0; flex: 1; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 絞り込みはシートにまとめるので、上部からは外します */
  .topbar select,
  .topbar input[type="search"],
  .topbar .filter-pill,
  .topbar .spacer { display: none; }
  .topbar .m-only { display: inline-flex; }

  .view {
    padding: 12px;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 76px);
    -webkit-overflow-scrolling: touch;
  }
  .view-flush { padding: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 76px); }

  /* --- 下部タブバー --- */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: var(--safe-b);
    box-shadow: 0 -1px 10px rgba(16, 26, 40, .06);
  }
  .tab-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    height: var(--tabbar-h);
    border: 0; background: transparent;
    color: var(--muted); font-size: 10.5px;
    cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-item .ico { font-size: 19px; line-height: 1; }
  .tab-item.is-active { color: var(--ai); font-weight: 700; }
  .tab-item.is-active::before {
    content: ''; position: absolute; top: 0; left: 22%; right: 22%;
    height: 2px; background: var(--ai); border-radius: 0 0 2px 2px;
  }
  .tab-item .tab-count {
    position: absolute; top: 5px; left: 50%; margin-left: 4px;
    background: #d9a441; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1.5;
    min-width: 16px; padding: 0 4px; border-radius: 999px; text-align: center;
  }

  /* --- タスク追加ボタン（親指の届く位置） --- */
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; z-index: 41;
    bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
    width: 54px; height: 54px; border-radius: 50%;
    border: 0; background: var(--ai); color: #fff;
    font-size: 27px; line-height: 1;
    box-shadow: 0 4px 14px rgba(39, 84, 138, .4);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .fab:active { background: var(--ai-strong); }
  .fab.is-hidden { display: none; }

  /* --- ダイアログは下から出るシートに --- */
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; width: 100%;
    max-height: 94dvh;
    border-radius: 14px 14px 0 0;
    animation: sheet-up .18s ease-out;
  }
  .modal-head { padding: 14px 16px; }
  .modal-head h2 { font-size: 16px; }
  .modal-head::before {
    content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--line);
  }
  .modal-body { padding: 16px; padding-bottom: calc(16px + var(--safe-b)); }
  .modal-foot { padding: 12px 16px calc(12px + var(--safe-b)); gap: 10px; }
  .modal-foot .btn { flex: 1; padding: 12px; }
  .modal-foot .btn-ghost { flex: 0 0 auto; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }

  @keyframes sheet-up { from { transform: translateY(14px); } to { transform: none; } }

  /* --- 入力欄は拡大されない大きさに（iOSの自動ズーム対策） --- */
  .field input, .field select, .field textarea,
  .srow input, .srow select, .cmt-form textarea {
    font-size: 16px;
    padding: 11px 12px;
  }
  .btn { padding: 10px 14px; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }

  /* --- ボード: 1列ずつ横にスワイプ --- */
  .board {
    gap: 10px; padding: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .bcol {
    flex: 0 0 86vw; max-width: 86vw;
    scroll-snap-align: center;
    max-height: none;
  }
  .bcol-body { overflow-y: visible; }
  .card { padding: 12px; }
  .card .ttl { font-size: 14px; }

  /* --- テーブル: 1件を数行にまとめたカードで表示 --- */
  .tbl-wrap { border: 0; background: transparent; overflow: visible; }
  table.tbl, table.tbl tbody { display: block; width: 100%; }
  table.tbl thead { display: none; }

  table.tbl tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 2px 10px; width: 100%;
    background: var(--surface);
    border: 1px solid var(--line); border-left: 3px solid var(--line);
    border-radius: var(--r-md); margin-bottom: 8px; padding: 11px 13px;
  }
  table.tbl tr.row-late { border-left-color: var(--danger); background: var(--danger-wash); }
  table.tbl tr.row-late td { background: transparent; }

  table.tbl td { display: inline-flex; align-items: center; gap: 4px;
                 border: 0; padding: 0; width: auto; font-size: 12.5px; }

  /* タスク名は1行目に大きく */
  table.tbl td:nth-of-type(1) { width: 100%; margin-bottom: 4px; }
  table.tbl td:nth-of-type(1) .t-title { font-size: 14.5px; font-weight: 700; line-height: 1.5; }

  /* 優先度と開始日は、狭い画面では省きます（タップすれば詳細で見られます） */
  table.tbl td:nth-of-type(5),
  table.tbl td:nth-of-type(6) { display: none; }

  /* 2行目：プロジェクト・担当・ステータス */
  table.tbl td:nth-of-type(4) { margin-left: auto; }

  /* 3行目：期限と進捗 */
  table.tbl td:nth-of-type(7) { width: 100%; margin-top: 4px; }
  table.tbl td:nth-of-type(8) { margin-top: 2px; }

  /* 何の値かが分かるよう、小さく項目名を添えます */
  table.tbl td[data-label]:not(:nth-of-type(1))::before {
    content: attr(data-label);
    color: var(--muted); font-size: 11px; margin-right: 2px;
  }
  table.tbl td[data-label=""]::before { content: none; }
  table.tbl td:empty { display: none; }
  table.tbl .avatar { width: 19px; height: 19px; font-size: 10px; margin-right: 3px; }

  /* --- カレンダー --- */
  .cal-cell { min-height: 62px; padding: 3px; }
  .cal-head > div { padding: 6px 2px; font-size: 11px; }
  .cal-num { font-size: 11.5px; }
  .cal-chip { font-size: 10px; padding: 1px 4px; }
  .cal-hol { font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-more { font-size: 9.5px; }

  /* --- ガント --- */
  .gcell-left { flex-basis: 150px; width: 150px; padding: 0 8px; }
  .gcell-left .gt-dates { display: none; }
  .gbar .lbl { font-size: 10px; }

  /* --- ダッシュボード・設定 --- */
  .dash, .settings, .review-view { grid-template-columns: 1fr; display: grid; gap: 12px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi .v { font-size: 22px; }
  .srow { flex-wrap: wrap; }
  .srow .grow1 { flex: 1 1 100%; }

  /* --- 承認待ち --- */
  .rv-row { padding: 12px 2px; }
  .rv-row-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
  .rv-row-actions .btn { flex: 1; }

  /* --- トースト（タブバーに重ならない位置） --- */
  .toasts {
    left: 12px; right: 12px;
    bottom: calc(var(--tabbar-h) + var(--safe-b) + 76px);
  }
  .toast { max-width: none; }
}

/* --------------------------------------------- 横向き（低い画面） */
@media (max-width: 820px) and (max-height: 480px) {
  .modal { max-height: 98dvh; }
  .tabbar { --tabbar-h: 48px; }
}

/* ============================================ シート内の選択リスト */

.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; text-align: left;
  font-size: 14px;
}
.pick-item:hover { background: var(--surface-alt); }
.pick-item.is-current { border-color: var(--ai); background: var(--ai-wash); font-weight: 700; }
.pick-item .swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.pick-item .pick-sub { margin-left: auto; font-size: 12px; color: var(--muted); }
/* ログイン方法が合わず、いまは入れないもの */
.pick-item.is-locked { opacity: .55; cursor: default; background: var(--surface-alt); }
.pick-item.is-locked:hover { background: var(--surface-alt); }
/* 2行表示の項目（会社・団体の切り替えなど） */
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.pick-text small { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* カードの「移動」ボタン（タッチでも確実に動かせるように） */
.card-move {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); border-radius: var(--r-sm);
  font-size: 11.5px; padding: 3px 8px; cursor: pointer; line-height: 1.6;
}
.card-move:hover { border-color: var(--ai); color: var(--ai); }

/* 画面幅が広いときは隠す要素 */
.m-only { display: none; }

/* ガント・カレンダーのツールバー */
.gantt-tools {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 18px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.gantt-hint { font-size: 12px; color: var(--muted); }

@media (max-width: 820px) {
  .gantt-tools { padding: 10px 12px; gap: 6px; }
  .gantt-tools > span[style*="flex:1"] { display: none; }
  .gantt-hint { flex: 1 1 100%; font-size: 11.5px; order: 9; }
  .gantt-tools input[type="date"],
  .gantt-tools select { font-size: 15px; padding: 7px 8px; }
}

/* アイコン（線画） */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic svg { display: block; }
.rail-item .ico { width: 18px; }
.tab-item .ico { height: 22px; }
.fab .ic svg { width: 26px; height: 26px; }

/* メニューシートの先頭に出すログイン中の表示 */
.menu-who {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.menu-who .avatar { width: 36px; height: 36px; font-size: 15px; margin: 0; }
.menu-name { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.menu-role { font-size: 11.5px; color: var(--muted); }