:root { --navy:#1f3b66; --blue:#2e6fd9; --line:#e2e6ea; --bg:#f5f7fa; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #23272e; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 16px; background: var(--navy); color: #fff; padding: 10px 18px; }
.topbar .brand { color: #fff; font-weight: 800; text-decoration: none; font-size: 16px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: #dbe6f7; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.spacer { flex: 1; }
.who { font-size: 13px; color: #cfe0f7; }
.logout button { background: transparent; border: 1px solid #6f89b5; color: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.logout { margin: 0; }
.wrap { max-width: 1100px; margin: 22px auto; padding: 0 18px; }
h1 { font-size: 20px; margin: 0 0 12px; color: var(--navy); }
.muted { color: #7a869a; font-size: 13px; }
.small { font-size: 12px; }
.err { background: #fdecea; color: #b0281a; border: 1px solid #f3b7b0; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.ok { background: #e8f6ec; color: #1e7a37; border: 1px solid #b7e0c3; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
/* login */
.login-box { max-width: 360px; margin: 8vh auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.login-box h1 { text-align: center; }
.login-box label, .form-card label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 4px; color: #445; }
.login-box input, .form-card input, .form-card select { width: 100%; padding: 9px 10px; border: 1px solid #cfd4da; border-radius: 7px; font-size: 14px; }
button.primary { margin-top: 16px; width: 100%; background: var(--blue); color: #fff; border: none; border-radius: 8px; padding: 10px; font-size: 15px; font-weight: 700; cursor: pointer; }
button.primary:hover { background: #2559b0; }
/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 14px 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
a.card:hover { border-color: var(--blue); }
.c-label { font-size: 13px; color: #7a869a; }
.c-num { font-size: 30px; font-weight: 800; color: var(--navy); }
/* form card */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; max-width: 520px; }
.form-card select { width: 100%; }
/* table */
.search { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.search input { padding: 8px 10px; border: 1px solid #cfd4da; border-radius: 7px; min-width: 240px; }
.search button { padding: 8px 14px; border: 1px solid var(--blue); background: var(--blue); color: #fff; border-radius: 7px; cursor: pointer; }
.search .clear { font-size: 13px; color: #7a869a; }
.tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid #eef0f2; padding: 8px 10px; text-align: left; white-space: nowrap; }
thead th { background: #f7f8fa; color: #556; position: sticky; top: 0; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 14px 0; font-size: 14px; }
.pager a { color: var(--blue); text-decoration: none; }
.mini-del { background: #fff; color: #c0392b; border: 1px solid #e6b0aa; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.mini-del:hover { background: #fdecea; }
h2 { color: var(--navy); }
.navsep { color: #6f89b5; margin: 0 2px; }
/* ガント */
.gantt-wrap { background:#fff; border:1px solid var(--line); border-radius:10px; overflow-x:auto; }
.gantt-head, .gantt-row { display:flex; align-items:stretch; border-bottom:1px solid #eef0f2; min-width:900px; }
.gantt-label { flex:0 0 120px; padding:6px 10px; font-size:12px; font-weight:700; color:#445; border-right:1px solid var(--line); background:#f7f8fa; display:flex; align-items:center; }
.gantt-track { position:relative; flex:1; min-height:30px; }
.gantt-head .gantt-track { display:flex; }
.gantt-daycol { font-size:10px; color:#7a869a; text-align:center; border-right:1px solid #f0f2f5; padding:4px 0; }
.gantt-grid { position:absolute; top:0; bottom:0; border-right:1px solid #f2f4f7; }
.gantt-bar { position:absolute; top:4px; height:22px; border-radius:4px; color:#fff; font-size:11px; line-height:22px; padding:0 6px; overflow:hidden; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.15); cursor:default; }
.gb-mi{background:#8fa6cc} .gb-ch{background:#2e6fd9} .gb-cd{background:#b97700} .gb-do{background:#1e7a37}
.lg{display:inline-block;padding:1px 6px;border-radius:4px;color:#fff;font-size:11px;margin-left:3px}
.lg-mi{background:#8fa6cc}.lg-ch{background:#2e6fd9}.lg-cd{background:#b97700}.lg-do{background:#1e7a37}
/* ステータスバー */
.statusbar{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line);margin:8px 0}
.statusbar .seg{color:#fff;font-size:11px;text-align:center;line-height:26px;white-space:nowrap;overflow:hidden}
/* モーダル */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-card{background:#fff;border-radius:12px;padding:22px;max-width:520px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* 入力の共通調整 */
td input, td select { padding:5px 6px; border:1px solid #cfd4da; border-radius:6px; font-size:13px; }
.tstamp{background:#eef2f8;border:1px solid #cfd8e6;border-radius:6px;padding:4px 8px;cursor:pointer;font-size:12px}
label.small input, label.small select { display:inline-block; width:auto; }