:root{--side:#0d4a86;--side2:#0a3b6c;--side-tx:#e6eef8;--bg:#f2f5f9;--card:#fff;--line:#e2e8f0;--tx:#1f2937;--mut:#6b7280;--pri:#1e6fd9;--pri2:#1557b0;--ok:#16a34a;--bad:#dc2626;--warn:#d97706;--chip:#eef2f7}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
a{color:var(--pri);text-decoration:none}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;color:var(--tx)}
.boot{padding:40px;color:var(--mut)}
/* 枠 */
.layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-tx);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}.brand b{display:block;font-size:15px}.brand small{opacity:.75;font-size:11px}
.nav a,.nav .grp{display:flex;align-items:center;gap:10px;padding:11px 16px;color:var(--side-tx);font-size:14px;border-left:3px solid transparent}
.nav a:hover{background:rgba(255,255,255,.07)}.nav a.on{background:var(--side2);border-left-color:#7fb4ff;font-weight:600}
.nav .grp{font-size:12px;opacity:.7;padding:14px 16px 6px;letter-spacing:.05em}.nav a.sub{padding-left:32px;font-size:13px}
.nav .ic{width:18px;text-align:center;opacity:.9}
.side .foot{margin-top:auto;padding:12px 16px;font-size:11px;opacity:.7}
.main{min-width:0}
.top{display:flex;align-items:center;gap:10px;background:var(--card);border-bottom:1px solid var(--line);padding:8px 16px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.top .grow{flex:1}.top select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
.syncst{font-size:12px;color:var(--mut)}.syncst.bad{color:var(--bad)}
.page{padding:18px 20px 60px;max-width:1500px}
h1{font-size:20px;margin:4px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}h2{font-size:16px;margin:0 0 10px}h3{font-size:14px;margin:0 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.row{display:flex;gap:14px;flex-wrap:wrap}.col{flex:1;min-width:280px}
.grid2{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:14px}@media(max-width:1000px){.grid2{grid-template-columns:1fr}.layout{grid-template-columns:1fr}.side{position:static;height:auto}}
.btn{background:var(--pri);color:#fff;border:0;border-radius:6px;padding:7px 14px;font-weight:600}.btn:hover{background:var(--pri2)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--pri);border:1px solid #bcd3f2}.btn.ghost:hover{background:#f0f6ff}.btn.danger{background:var(--bad)}.btn.sm{padding:4px 10px;font-size:12px}.btn.ok{background:var(--ok)}
.seg{display:inline-flex;border:1px solid #bcd3f2;border-radius:6px;overflow:hidden}.seg button{background:#fff;border:0;padding:6px 12px;color:var(--pri)}.seg button.on{background:var(--pri);color:#fff}
.chip{display:inline-block;background:var(--chip);border-radius:999px;padding:2px 9px;font-size:12px;margin:1px 2px;white-space:nowrap}.chip.red{background:#fde8e8;color:var(--bad)}.chip.yellow{background:#fef3c7;color:#92400e}.chip.green{background:#dcfce7;color:#166534}.chip.blue{background:#dbeafe;color:#1e40af}.chip.gray{background:#eef2f7;color:#475569}
.mut{color:var(--mut)}.sm{font-size:12px}.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.bad{color:var(--bad)}.ok{color:var(--ok)}.warn{color:var(--warn)}
table{width:100%;border-collapse:collapse}th,td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}th{background:#f6f8fb;font-weight:600;font-size:12px;color:#475569;text-align:left;position:sticky;top:0}
tr.tot td{font-weight:700;background:#f8fafc}tr:hover td{background:#fafcff}
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:8px}
.pimg{width:44px;height:44px;border-radius:6px;object-fit:cover;background:#eef2f7;display:block}.pimg.lg{width:64px;height:64px}.noimg{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:10px}
.pname{font-weight:600}.pcode{font-size:11px;color:var(--mut)}
/* KPI */
.big{font-size:34px;font-weight:700;letter-spacing:.01em}.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}.kv:last-child{border-bottom:0}.kv b{font-variant-numeric:tabular-nums}
.bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--pri)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}.tile .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.tile .l{font-size:12px;color:var(--mut);margin-top:2px}
/* 図表 */
.chart{width:100%;height:auto;display:block}.ch-grid{stroke:#eef2f7}.ch-ax{font-size:11px;fill:#64748b}.ch-bar:hover{opacity:.8}
.ch-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#475569;margin:0 0 4px}.ch-legend i{display:inline-block;width:14px;height:10px;margin-right:4px;vertical-align:middle;border:2px solid}.ch-legend i.lg-line{height:0;border-width:0 0 3px 0}.ch-legend i.lg-dash{height:0;border-width:0 0 3px 0;border-style:dashed}
.donut{width:220px;height:220px}.donut-t{font-size:15px;font-weight:700;fill:var(--tx)}.donut-s{font-size:11px;fill:#64748b}
/* カレンダー */
.cal{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cal .h{background:#f6f8fb;text-align:center;padding:6px;font-size:12px;font-weight:600}.cal .h.sun{color:var(--bad)}.cal .h.sat{color:var(--pri)}
.cal .d{min-height:74px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:5px 7px;font-size:12px;cursor:pointer;background:#fff}.cal .d:nth-child(7n+1){border-left:0}
.cal .d.sun,.cal .d.hol{background:#fff7f7}.cal .d.sat{background:#f5f9ff}.cal .d.off{background:#f8fafc;color:#cbd5e1;cursor:default}.cal .d.sel{outline:2px solid var(--pri);outline-offset:-2px}.cal .d.fut{color:#94a3b8}
.cal .dn{font-weight:700}.cal .hol-b{display:inline-block;background:var(--bad);color:#fff;border-radius:999px;font-size:10px;padding:0 5px;margin-left:4px}
.cal .s{display:flex;justify-content:space-between;color:var(--pri)}.cal .y{display:flex;justify-content:space-between;color:var(--ok)}
/* 日付選択 */
.dp{position:relative;display:inline-block}.dp-btn{background:#fff;border:1px solid #bcd3f2;border-radius:6px;padding:7px 12px;color:var(--pri);min-width:230px;text-align:left}
.dp-pop{position:absolute;z-index:50;top:42px;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.18);padding:12px;width:600px;max-width:92vw}
.dp-pre{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}.dp-pre button{background:#fff;border:1px solid var(--line);border-radius:4px;padding:5px 10px}.dp-pre button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.dp-in{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.dp-in input{border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.dp-cals{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dp-m .mh{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:6px}.dp-m .mh button{background:none;border:0;font-size:16px;color:var(--pri)}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:12px;text-align:center}.dp-g span{padding:5px 0;border-radius:4px}.dp-g .w{color:var(--mut);font-weight:600}.dp-g .c{cursor:pointer}.dp-g .c:hover{background:#e8f1fd}.dp-g .in{background:#dbeafe}.dp-g .edge{background:var(--pri);color:#fff}.dp-g .x{color:#cbd5e1}
.dp-x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:18px;color:var(--mut)}
/* フォーム */
.form label{display:block;margin:6px 0}.form .l{display:block;font-size:12px;color:var(--mut);margin-bottom:3px}.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:#fff}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px}
.qty{width:74px;border:1px solid var(--line);border-radius:6px;padding:5px 6px;text-align:right}
details.opt{border:1px solid var(--line);border-radius:8px;background:#fafcff;margin:8px 0}details.opt>summary{cursor:pointer;padding:9px 12px;font-weight:600;color:var(--pri)}details.opt .in{padding:4px 12px 12px}
.pager{display:flex;gap:4px;align-items:center;margin:10px 0}.pager button{background:#fff;border:1px solid var(--line);border-radius:4px;padding:4px 10px;min-width:34px}.pager button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.note{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px}.note.warn{background:#fffbeb;border-color:#fcd34d}.note.bad{background:#fef2f2;border-color:#fca5a5;color:#991b1b}.note.ok{background:#f0fdf4;border-color:#86efac}
.toast{position:fixed;right:18px;bottom:18px;background:#1f2937;color:#fff;padding:10px 14px;border-radius:8px;z-index:100;max-width:420px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.login{max-width:380px;margin:10vh auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}.login h1{justify-content:center}.login .btn{width:100%;padding:10px}
.menu-user{position:relative}.menu-user .pop{position:absolute;right:0;top:36px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px rgba(15,23,42,.15);min-width:200px;z-index:60}.menu-user .pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 14px}.menu-user .pop button:hover{background:#f1f5f9}
.pill{display:inline-flex;gap:6px;align-items:center;background:#f1f5f9;border-radius:999px;padding:4px 10px;font-size:12px}
.diff-neg{color:var(--bad);font-weight:700}.diff-pos{color:var(--warn);font-weight:700}
.empty{padding:28px;text-align:center;color:var(--mut)}
/* シフト（Lark のシートと同じ色: 土 #E1EAFF・日祝 #FBBFBC・休 #FDDDEF） */
.steps{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.steps a{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--tx)}.steps a.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.sg{border-collapse:separate;border-spacing:0;font-size:12px;width:auto}
.sg th,.sg td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0 2px;text-align:center;min-width:32px;height:28px;position:static;white-space:nowrap}
.sg th{background:#f6f8fb;font-size:12px;line-height:1.1}
.sg .nm{position:sticky;left:0;z-index:3;background:#fff;text-align:left;padding:0 8px;min-width:118px;font-weight:600}
.sg th.nm{background:#f6f8fb;z-index:4}.sg tr.full .nm{color:#1e40af}
.sg .sat{background:#e1eaff}.sg .sun{background:#fbbfbc}.sg .hol{display:block;font-size:9px;color:#b91c1c}
.sg td.c{cursor:pointer}.sg td.c:hover{outline:2px solid var(--pri);outline-offset:-2px}
.sg td.pc{font-weight:600}.sg td.off{background:#fdddef;color:#9d174d;font-weight:400}.sg td.lk{box-shadow:inset 0 0 0 2px #f59e0b}
.sg td.av.all{background:#ecfdf5;color:#15803d;font-weight:700}.sg td.av.all.imp{color:#86efac;font-weight:400}.sg td.av.ng{background:#f1f5f9;color:#94a3b8}.sg td.av.rq{background:#fdddef;color:#9d174d}.sg td.av.tm{background:#eff6ff;color:#1d4ed8;font-size:11px}
.sg tr.evrow td{height:24px}.sg td.ev{font-size:10px;max-width:32px;overflow:hidden;text-overflow:ellipsis;color:#475569}.sg td.ev.busy{background:#fef3c7}
.sg tr.cov td{font-size:11px;height:22px;color:#475569;background:#fafcff}.sg tr.cov td.short{background:#fee2e2;color:#b91c1c;font-weight:700}.sg tr.cov td.dip{background:#fef9c3;color:#854d0e}
.sg tr:hover td{background:inherit}
.popx{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.22);padding:10px;width:292px}
.popx .codes{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.popx .codes button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:4px 6px;min-width:44px}.popx .codes button:hover{background:#f0f6ff}.popx .codes button.on{background:var(--pri);color:#fff;border-color:var(--pri)}