/* IFM Cloud v0.1 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --navy:#1f4e79; --navy-d:#173a5a; --bg:#f4f6f9; --card:#ffffff;
  --line:#dde3ea; --txt:#22303c; --mut:#6b7a89;
  --red:#c0392b; --red-bg:#fdecea; --amber:#9a6a00; --amber-bg:#fff6dd;
  --green:#1e7e34; --green-bg:#e6f4ea; --blue-bg:#e8f0fe;
}
html,body { height:100%; }
body { font-family:"Meiryo UI",Meiryo,"Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif; background:var(--bg); color:var(--txt); font-size:14px; }

/* login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#1f4e79 0%,#2c6ba0 60%,#3d84c0 100%); padding:16px; }
.login-box { background:#fff; border-radius:12px; padding:40px 36px; width:360px; max-width:100%; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.login-logo img { width:78px; height:78px; }
.login-tabs { display:flex; gap:6px; margin-bottom:14px; }
.login-tabs button { flex:1; padding:9px; border:1px solid var(--line); background:#f2f5f8; color:var(--mut); border-radius:8px; cursor:pointer; font-size:13px; }
.login-tabs button.on { background:var(--navy); color:#fff; border-color:var(--navy); font-weight:bold; }
.login-tabs button:hover { background:#e7edf3; }
.login-tabs button.on:hover { background:var(--navy); }
.login-msg { color:var(--green); font-size:12px; margin-bottom:10px; }
.login-note { font-size:11px; color:var(--mut); margin-top:8px; }
img.brand-ico { width:28px; height:28px; display:block; }
.top-actions { display:flex; align-items:center; gap:12px; }
.top-actions .me { font-size:12px; color:#cfe0f0; }
.top-actions a { color:#cfe0f0; text-decoration:none; font-size:13px; }
.login-box h1 { font-size:20px; color:var(--navy); margin:10px 0 4px; }
.login-sub { color:var(--mut); font-size:12px; margin-bottom:20px; }
.login-err { color:var(--red); font-size:12px; margin-bottom:10px; }
.login-box input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; margin-bottom:12px; }
.login-box .login-btn { width:100%; padding:11px; background:var(--navy); color:#fff; border:0; border-radius:8px; font-size:14px; cursor:pointer; }
.login-box .login-btn:hover { background:var(--navy-d); }
.login-foot { margin-top:18px; font-size:11px; color:var(--mut); }

/* shell */
#topbar { position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; display:flex; align-items:center; gap:18px; padding:0 18px; height:52px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.brand { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.brand-name { font-weight:bold; font-size:15px; }
.brand-ver { font-size:10px; opacity:.6; }
#nav { display:flex; gap:2px; flex:1; overflow-x:auto; }
#nav a { color:#cfe0f0; text-decoration:none; padding:16px 13px; font-size:13px; white-space:nowrap; border-bottom:3px solid transparent; }
#nav a.on { color:#fff; border-bottom-color:#7db8e8; font-weight:bold; }
#nav a:hover { color:#fff; }
.top-actions a.logout { color:#cfe0f0; font-size:12px; text-decoration:none; }
#main { max-width:1280px; margin:0 auto; padding:20px 18px 60px; }
.loading { text-align:center; color:var(--mut); padding:60px 0; }

/* common */
h2.pg { font-size:18px; color:var(--navy); margin-bottom:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h2.pg .sub { font-size:12px; color:var(--mut); font-weight:normal; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.grid { display:grid; gap:14px; }
.grid.c2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.grid.c4 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
table.tb { width:100%; border-collapse:collapse; background:#fff; }
table.tb th { background:var(--navy); color:#fff; text-align:left; padding:8px 10px; font-size:12px; }
table.tb td { border-bottom:1px solid var(--line); padding:8px 10px; vertical-align:top; font-size:13px; }
table.tb tr:hover td { background:#f0f5fa; cursor:pointer; }
.tb-wrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:10px; }
.toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.toolbar input[type=search] { padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:220px; }
.toolbar select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
button.btn { padding:8px 14px; border:0; border-radius:8px; background:var(--navy); color:#fff; cursor:pointer; font-size:13px; }
button.btn.sec { background:#e7edf3; color:var(--navy); }
button.btn.danger { background:var(--red); }
button.btn:hover { opacity:.9; }

/* badges */
.bdg { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; white-space:nowrap; }
.b-P1,.b-alert { background:var(--red-bg); color:var(--red); font-weight:bold; }
.b-P2,.b-warn { background:var(--amber-bg); color:var(--amber); }
.b-P3,.b-check { background:var(--blue-bg); color:var(--navy); }
.b-F消防 { background:#fde8d8; color:#b34700; font-weight:bold; }
.b-active,.b-done { background:var(--green-bg); color:var(--green); }
.b-AT { background:#e8f0fe; color:#1a4d8f; }
.b-OAB { background:#efe6fa; color:#5e35a1; }
.b-共通 { background:#eee; color:#555; }
.b-st-未着手 { background:#eee; color:#666; }
.b-st-進行中 { background:var(--blue-bg); color:var(--navy); font-weight:bold; }
.b-st-完了 { background:var(--green-bg); color:var(--green); }
.b-st-保留 { background:var(--amber-bg); color:var(--amber); }

/* dashboard */
.kpi { text-align:center; padding:18px 10px; }
.kpi .n { font-size:30px; font-weight:bold; }
.kpi .l { font-size:12px; color:var(--mut); margin-top:4px; }
.kpi.red .n { color:var(--red); } .kpi.amber .n { color:var(--amber); } .kpi.blue .n { color:var(--navy); } .kpi.green .n { color:var(--green); }
.dash-list li { list-style:none; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px; display:flex; gap:8px; align-items:baseline; }
.dash-list li:last-child { border-bottom:0; }
.bldg-card h3 { color:var(--navy); font-size:15px; margin-bottom:8px; }
.bldg-card dl { display:grid; grid-template-columns:88px 1fr; gap:4px 10px; font-size:12.5px; }
.bldg-card dt { color:var(--mut); }

/* stages board */
.stages { display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; }
.stage-col { min-width:210px; flex:0 0 210px; background:#eef2f7; border-radius:10px; padding:10px; }
.stage-col h4 { font-size:12px; color:var(--navy); margin-bottom:8px; display:flex; justify-content:space-between; }
.stage-col h4 .cnt { color:var(--mut); }
.case-card { background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy); border-radius:8px; padding:9px 10px; margin-bottom:8px; cursor:pointer; font-size:12.5px; }
.case-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.1); }
.case-card .t { font-weight:bold; margin-bottom:4px; }
.case-card .m { color:var(--mut); font-size:11.5px; }
.stage-flow { font-size:11px; color:var(--mut); margin-bottom:12px; line-height:1.9; }

/* calendar */
.cal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.cal-m { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; }
.cal-m h4 { color:var(--navy); font-size:14px; border-bottom:2px solid var(--navy); padding-bottom:6px; margin-bottom:8px; }
.cal-m li { list-style:none; font-size:12.5px; padding:5px 0; border-bottom:1px dashed var(--line); }
.cal-m li:last-child { border-bottom:0; }

/* modal */
#modal-root .ovl { position:fixed; inset:0; background:rgba(15,30,45,.55); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.modal { background:#fff; border-radius:12px; width:640px; max-width:100%; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.modal h3 { color:var(--navy); font-size:16px; margin-bottom:14px; }
.modal .frm { display:grid; gap:10px; }
.modal label { font-size:12px; color:var(--mut); display:block; margin-bottom:3px; }
.modal input,.modal select,.modal textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit; }
.modal textarea { min-height:70px; resize:vertical; }
.modal .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal .acts { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.modal .log { font-size:12px; background:#f6f8fb; border-radius:8px; padding:10px; max-height:140px; overflow:auto; }
.modal .log li { list-style:none; padding:2px 0; }

/* toast */
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; }
#toast .t { background:#2c3e50; color:#fff; padding:10px 20px; border-radius:20px; font-size:13px; margin-top:8px; box-shadow:0 6px 20px rgba(0,0,0,.3); animation:fadein .2s; }
@keyframes fadein { from { opacity:0; transform:translateY(8px);} to {opacity:1;} }

/* app footer (link circuit: every page keeps exits to docs / promo / automation) */
#appfoot { border-top:1px solid var(--line); background:#fff; padding:14px 18px 18px; text-align:center; font-size:12px; color:var(--mut); line-height:2; }
#appfoot a { color:var(--mut); text-decoration:none; margin:0 7px; white-space:nowrap; }
#appfoot a:hover { color:var(--navy); text-decoration:underline; }

@media (max-width:640px) {
  #topbar { padding:0 10px; gap:8px; }
  .brand-name { display:none; }
  #main { padding:12px 10px 50px; }
}