/* 契約台帳。インラインCSS/JSを使わない（厳格なCSPを適用するため） */
:root {
  /* ★2026-09-08 代表指示: 保守業務管理と同じヘッダー色に揃える。
     #19448e は自社サイトのテーマに key-color として定義されている色。 */
  --navy:#19448e; --navy2:#2e58a6; --ice:#CADCFC; --coral:#E8654F;
  --ink:#22293B; --mut:#5A6478; --tint:#EEF3FB; --line:#E3E8F2;
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Meiryo UI","Segoe UI",sans-serif; color:var(--ink);
       background:#fff; }
a { color:var(--navy2); }

header { background:var(--navy); color:#fff; padding:14px 24px; display:flex;
         align-items:center; gap:24px; flex-wrap:wrap; }
header h1 { font-size:1.05rem; margin:0; font-weight:700; }

/* ★ロゴ（2026-09-08 代表指示）。
   ロゴは濃い青なので、濃紺のヘッダーに直接置くと読めない（実測でコントラスト約2.2:1）。
   ブランドの色を変えずに済むよう、白いプレートに載せる。 */
.brand { display:flex; align-items:center; gap:14px; }
.logo { height:28px; width:auto; display:block; background:#fff;
        padding:5px 9px; border-radius:6px; }
header h1 a { color:#fff; text-decoration:none; }
header nav { display:flex; gap:18px; font-size:.88rem; }
header nav a { color:var(--ice); text-decoration:none; }
header nav a:hover { color:#fff; }
.userbox { margin-left:auto; font-size:.82rem; color:var(--ice);
           display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.userbox a { color:#fff; }

main { max-width:1180px; margin:0 auto; padding:28px 20px 60px; }
footer { text-align:center; color:var(--mut); font-size:.74rem; padding:24px; }

h2 { color:var(--navy); font-size:1.3rem; margin:0 0 6px; }
h3 { color:var(--navy); font-size:1rem; margin:26px 0 8px; }
p.hint { color:var(--mut); font-size:.8rem; margin:0 0 16px; line-height:1.75; }

/* ログイン */
.login { max-width:460px; margin:70px auto; text-align:center; }
.login .mark { font-size:3rem; margin-bottom:16px; }
.login h2 { margin:0 0 12px; }
.login p { color:var(--mut); font-size:.9rem; line-height:1.75; margin:0 0 26px; }
.btn { display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
       padding:13px 28px; border-radius:8px; font-weight:700; }
.btn:hover { background:var(--navy2); }
.alert { background:#FDECEA; color:#8A2A1B; border-radius:8px; padding:12px 16px;
         font-size:.85rem; margin:0 0 18px; }

/* 数字カード */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
         gap:14px; margin:0 0 30px; }
.stat { background:var(--tint); border-radius:12px; padding:18px 20px;
        text-decoration:none; color:inherit; display:block;
        border:1px solid transparent; }
a.stat:hover { border-color:var(--coral); }
.stat .n { font-size:1.8rem; font-weight:700; color:var(--navy); line-height:1.1; }
.stat .l { font-size:.76rem; color:var(--mut); margin-top:6px; line-height:1.5; }
.stat.warn { background:#FDECEA; } .stat.warn .n { color:#B03A26; }

/* 絞り込み */
form.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
               margin:0 0 14px; }
form.filters input[type=search], form.filters select {
  border:1px solid #D5DCEA; border-radius:8px; padding:9px 12px; font-size:.85rem;
  font-family:inherit; color:var(--ink); background:#fff; }
form.filters input[type=search] { min-width:240px; flex:1; }
form.filters button { background:var(--navy); color:#fff; border:0; border-radius:8px;
                      padding:10px 18px; font-size:.85rem; font-weight:700;
                      font-family:inherit; }
form.filters label { font-size:.82rem; color:var(--mut); display:flex;
                     align-items:center; gap:6px; }
.reset { font-size:.8rem; }

/* 表 */
.tw { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table { border-collapse:collapse; width:100%; font-size:.8rem; min-width:720px; }
th { background:var(--tint); color:var(--navy); text-align:left; padding:10px 12px;
     font-weight:700; white-space:nowrap; border-bottom:1px solid var(--line); }
td { padding:10px 12px; border-bottom:1px solid #EFF2F8; vertical-align:top;
     white-space:nowrap; }
tr:last-child td { border-bottom:none; }
td.wrap { white-space:normal; min-width:190px; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
td a { font-weight:700; text-decoration:none; }
td a:hover { text-decoration:underline; }
.sub { color:var(--mut); font-size:.72rem; display:block; margin-top:2px;
       white-space:normal; }

/* 印 */
.tag { display:inline-block; border-radius:5px; padding:2px 7px; font-size:.68rem;
       font-weight:700; white-space:nowrap; }
.tag.gen{background:#E3EDFB;color:#1E4E9C}.tag.res{background:#FDE7E3;color:#A4381F}
.tag.est{background:#FFF1D6;color:#8A5A00}.tag.unv{background:#EDEFF4;color:#5A6478}
.tag.warn{background:#FDECEA;color:#B03A26}.tag.ok{background:#E4F4EA;color:#1E6B3A}
.days-0 { color:#B03A26; font-weight:700; }
.days-30 { color:#C4681A; font-weight:700; }

/* ページ送り */
.pager { display:flex; gap:10px; align-items:center; justify-content:center;
         margin:18px 0 0; font-size:.85rem; color:var(--mut); }
.pager a { padding:7px 14px; border:1px solid var(--line); border-radius:8px;
           text-decoration:none; }

/* 詳細 */
.detail { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.detail .dh { background:var(--navy); color:#fff; padding:16px 20px; }
.detail .dh .t { font-size:1.05rem; font-weight:700; }
.detail .dh .m { color:var(--ice); font-size:.76rem; margin-top:5px; }
.detail .db { padding:20px; }
dl { display:grid; grid-template-columns:minmax(130px,170px) 1fr; gap:0;
     font-size:.83rem; margin:0; }
dt { color:var(--mut); padding:9px 0; border-bottom:1px solid #EFF2F8; }
dd { margin:0; padding:9px 0; border-bottom:1px solid #EFF2F8; }
.raw { color:var(--mut); font-size:.75rem; line-height:1.7; display:block;
       margin-top:4px; }
ul.files { list-style:none; margin:16px 0 0; padding:0; }
ul.files li { background:var(--tint); border-radius:8px; padding:10px 14px;
              font-size:.8rem; margin-bottom:8px; display:flex;
              justify-content:space-between; gap:12px; flex-wrap:wrap; }
ul.files .meta { color:var(--mut); font-size:.72rem; }

.note { background:#FFF6E5; border-left:4px solid var(--coral); padding:13px 17px;
        border-radius:0 8px 8px 0; margin:0 0 22px; font-size:.83rem;
        line-height:1.75; }
.empty { background:var(--tint); border-radius:12px; padding:26px; text-align:center;
         color:var(--mut); font-size:.88rem; }

/* 書き込みフォーム（期間の確認記録） */
.ok { background:#E4F4EA; color:#1E6B3A; border-radius:8px; padding:12px 16px;
      font-size:.85rem; margin:0 0 16px; line-height:1.7; }
.wform { background:var(--tint); border-radius:10px; padding:18px 20px; margin:0 0 8px; }
.wform label { display:block; font-size:.82rem; color:var(--mut); margin:0 0 14px; }
.wform label.chk { display:flex; align-items:center; gap:8px; }
.wform input[type=text], .wform input[type=date] {
  display:block; width:100%; margin-top:6px; border:1px solid #D5DCEA;
  border-radius:8px; padding:9px 12px; font-size:.88rem; font-family:inherit;
  color:var(--ink); background:#fff; }
.wform input[type=checkbox] { margin:0; }
.wform .row { display:flex; gap:16px; flex-wrap:wrap; }
.wform .row label { flex:1; min-width:180px; }
.wform button { background:var(--navy); color:#fff; border:0; border-radius:8px;
                padding:11px 22px; font-size:.88rem; font-weight:700;
                font-family:inherit; }
.wform button:hover { background:var(--navy2); }
.wform button.btn-sub { background:#8A93A6; }
.req { color:var(--coral); font-weight:700; font-size:.72rem; }
details { margin:0 0 16px; font-size:.85rem; }
summary { cursor:pointer; color:var(--mut); padding:6px 0; }

/* ===========================================================================
   2026-09-05 追加。外部レビュー（Codex＋Gemini）で採った分だけ入れる。
   ★入れなかったもの: 印刷用スタイル（実需が未確認）／画面幅の拡張（視線移動の副作用）
   =========================================================================== */

/* --- キーボード操作 -------------------------------------------------------
   ★Let's Note FC6 はタッチパネル非搭載。操作はキーボードとトラックパッド。
     さらに WQHD デュアルとの行き来でポインタを見失いやすい（Gemini指摘）。
     輪郭だけでなく背景も変えて、今どこにいるかを強く出す。            */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, select:focus-visible { background: #FFFBF0; }

/* --- 行の追跡（ポインタを見失わない）------------------------------------- */
tbody tr:nth-child(even) td { background: #FAFBFE; }
tbody tr:hover td { background: var(--tint); }
tbody tr:focus-within td { background: #FFF6E5; }

/* --- 制限つきの行 ---------------------------------------------------------
   ★色だけに頼らない。行頭の縦線は「補助」で、意味は行内の「制限つき」の文字が持つ。
     画面共有や肩越しに見られたときに、機密が混じっていると気づけるようにする。 */
tr.row-res td:first-child { border-left: 4px solid var(--coral); }
tr.row-res td { background: #FFF9F8; }
tbody tr.row-res:hover td { background: #FFF0EC; }

/* --- 押せない理由をその場に出す -------------------------------------------
   ★ボタンを黙って消さない。消すと「エラー」「権限が消えた」と見え、
     代表への問い合わせになる（Gemini指摘）。不活性にして理由を添える。 */
.why { background: #FFF6E5; border-left: 4px solid #D9A441;
       padding: 10px 14px; border-radius: 0 8px 8px 0;
       font-size: .82rem; color: #6B5218; margin: 0 0 12px; line-height: 1.7; }
button[disabled] { background: #C3C9D6; cursor: not-allowed; }
button[disabled]:hover { background: #C3C9D6; }

.notice-block { background: #FFF6E5; border: 1px solid #E8D5A8; border-radius: 10px;
                padding: 16px 20px; margin: 0 0 20px; font-size: .85rem;
                line-height: 1.8; }
.notice-block strong { color: #8A5A00; }
.moving-list { margin: 10px 0; padding-left: 20px; font-size: .8rem; }
.moving-list .raw { margin-top: 2px; }

/* --- 空状態 ---------------------------------------------------------------
   ★「検索結果0件」と「見える契約が無い」を分ける。
     前者は条件を外す導線、後者は問い合わせ先を出す。 */
.empty p { margin: 0 0 10px; }
.empty .btn { margin-top: 6px; }

/* --- ヘッダの能力表示 -----------------------------------------------------
   ★長い権限文字列を並べない（Gemini指摘: 認知負荷）。
     いま制限つきを見ているかどうかだけを、短く出す。 */
.userbox .tag { font-size: .68rem; }

/* --- データの新しさ（★常時表示）-------------------------------------------
   kintone を正本とする閲覧版なので、いつ時点かを必ず出す。
   目立たせすぎず、しかし見落とさない位置に置く。 */
.asof { background:#FFF6E5; border-bottom:1px solid #E8D5A8; color:#6B5218;
        font-size:.78rem; padding:8px 24px; line-height:1.6; }
.asof strong { color:#8A5A00; }