:root{
  --navy:#1d3557; --navy-2:#264a73; --bg:#f3f5f8; --card:#fff; --line:#dfe4eb; --text:#1f2933; --muted:#6b7785;
  --red:#c62828; --red-bg:#fdecea; --orange:#d9480f; --orange-bg:#fff0e6; --amber:#b7791f; --amber-bg:#fff8e1;
  --blue:#1c6dd0; --blue-bg:#e7f0fb; --green:#2f855a; --green-bg:#e9f6ee; --purple:#6b46c1; --purple-bg:#f1ebfb;
  --radius:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:1.45rem;margin:0} h2{font-size:1.08rem;margin:0 0 .75rem} h3{font-size:.98rem;margin:1.2rem 0 .5rem}
small,.small{font-size:.84rem} .muted{color:var(--muted)} .nowrap{white-space:nowrap} .text-danger{color:var(--red);font-weight:600}
.star{color:#e0a100;margin-right:2px}

/* header */
.topbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:1rem;padding:0 1.25rem;min-height:56px;position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.brand{color:#fff;font-weight:700;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{background:#fff;color:var(--navy);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font-weight:800}
.mainnav{display:flex;align-items:center;gap:.25rem;flex:1}
.mainnav>a,.dd>summary{color:#dbe5f1;padding:.5rem .8rem;border-radius:7px;cursor:pointer;list-style:none;white-space:nowrap}
.mainnav>a:hover,.dd>summary:hover{background:var(--navy-2);text-decoration:none;color:#fff}
.mainnav>a.on,.dd.on>summary{background:#fff;color:var(--navy);font-weight:700}
.dd{position:relative} .dd>summary::-webkit-details-marker{display:none}
.dd>summary::after{content:" ▾";font-size:.75em}
.dd.user{margin-left:auto} .dd.user small{opacity:.75;margin-left:.3rem}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:200px;padding:.35rem;z-index:30}
.dd:not(.user) .dd-menu{left:0;right:auto}
.dd-menu a{display:block;padding:.5rem .75rem;border-radius:6px;color:var(--text)} .dd-menu a:hover{background:var(--bg);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}

.wrap{max-width:1320px;margin:0 auto;padding:1.25rem}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem 0}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.25rem 0 1rem}
.page-head h1 small{font-size:.9rem;font-weight:400;margin-left:.4rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1rem}
.card-accent{border-top:3px solid var(--navy)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.grid-2.wide-left{grid-template-columns:3fr 2fr}
.grid-2>.card{margin-bottom:0} .grid-2{margin-bottom:1rem}

/* buttons & forms */
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--text);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font:inherit;line-height:1.3}
.btn:hover{background:#f7f9fb;text-decoration:none}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff} .btn-primary:hover{background:var(--navy-2)}
.btn-danger{background:#fff;border-color:var(--red);color:var(--red)} .btn-danger:hover{background:var(--red-bg)}
.btn-link{border-color:transparent;background:none;color:var(--blue)}
.btn-sm{padding:.3rem .7rem;font-size:.85rem} .btn-block{width:100%}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;padding:.5rem .6rem;border:1px solid #c9d1db;border-radius:7px;font:inherit;background:#fff;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc2f0;border-color:var(--blue)}
.form label{display:block;margin-bottom:.8rem;font-size:.9rem;font-weight:600}
.form label input,.form label select,.form label textarea{margin-top:.25rem;font-weight:400}
.form label small{display:block;font-weight:400;margin-top:.2rem}
.form label em{color:var(--red);font-style:normal}
label.chk{display:flex!important;align-items:center;gap:.4rem;font-weight:400!important;cursor:pointer}
label.chk.big{font-weight:600!important}
fieldset{border:0;border-top:1px solid var(--line);padding:.9rem 0 .2rem;margin:0}
fieldset:first-of-type{border-top:0;padding-top:0}
legend{font-weight:700;color:var(--navy);padding-right:.5rem}
.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 1rem;align-items:start}
.f-grid label.chk{padding-top:1.9rem}
.list td.c-title{min-width:13em}
.f-grid .span2{grid-column:span 2}
.form-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.form.narrow{max-width:520px}
.preview{background:var(--blue-bg);border-radius:8px;padding:.6rem .8rem;font-size:.9rem;margin-bottom:.8rem}
.preview:empty{display:none}
details>summary{cursor:pointer;color:var(--blue);margin:.3rem 0 .6rem;font-size:.9rem}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.1rem .8rem;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;margin-bottom:.8rem}
.checklist label{font-weight:400;display:flex;gap:.35rem;align-items:center;margin:0}
.cl-group{grid-column:1/-1;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--line);margin-top:.4rem}

.filters{padding:.8rem 1rem}
.filters .f-row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end}
.filters .f-row+.f-row{margin-top:.6rem}
.filters label{font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;gap:.2rem;min-width:150px}
.filters label.chk{flex-direction:row;min-width:0;color:var(--text);font-size:.9rem;padding-bottom:.45rem}
.inline-filter select{width:auto;min-width:200px}

/* flash */
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem}
.flash-ok{background:var(--green-bg);color:#1e5e3e;border:1px solid #b9e0c8}
.flash-err{background:var(--red-bg);color:var(--red);border:1px solid #f3c2bd}
.note{background:#f8fafc;border-left:4px solid var(--navy);padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}
.alert-bar{background:var(--red);color:#fff;padding:.8rem 1.1rem;border-radius:8px;margin-bottom:1rem;font-weight:600}
.alert-bar a{color:#fff;text-decoration:underline;margin-left:.5rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;display:flex;flex-direction:column;color:var(--text);border-left:5px solid}
.stat:hover{text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.07)}
.stat .n{font-size:2rem;font-weight:800;line-height:1.1} .stat .l{font-size:.82rem;color:var(--muted)}
.stat-expired{border-left-color:var(--red)} .stat-expired .n{color:var(--red)}
.stat-urgent{border-left-color:var(--orange)} .stat-urgent .n{color:var(--orange)}
.stat-window{border-left-color:var(--blue)} .stat-window .n{color:var(--blue)}
.stat-soon{border-left-color:var(--amber)} .stat-soon .n{color:var(--amber)}
.stat-progress{border-left-color:var(--purple)} .stat-progress .n{color:var(--purple)}

/* badges */
.badge{display:inline-block;padding:.12rem .55rem;border-radius:99px;font-size:.76rem;font-weight:700;white-space:nowrap;margin:1px 2px 1px 0;vertical-align:middle}
.st-expired{background:var(--red);color:#fff} .st-urgent{background:var(--orange-bg);color:var(--orange);border:1px solid #f5b98f}
.st-window{background:var(--blue-bg);color:var(--blue)} .st-soon{background:var(--amber-bg);color:var(--amber)}
.st-ok{background:var(--green-bg);color:var(--green)} .st-progress{background:var(--purple-bg);color:var(--purple)}
.st-archived{background:#eceff3;color:var(--muted)}
.tag{font-size:.72rem;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 .35rem;color:var(--muted)}
.role{font-size:.78rem;padding:.1rem .5rem;border-radius:4px}
.role-admin{background:var(--navy);color:#fff} .role-manager{background:var(--blue-bg);color:var(--blue)} .role-user{background:var(--bg);color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.list{width:100%;border-collapse:collapse;font-size:.92rem}
table.list th{text-align:left;font-size:.78rem;color:var(--muted);font-weight:600;padding:.5rem .6rem;border-bottom:2px solid var(--line);white-space:nowrap}
table.list td{padding:.6rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
table.list tbody tr[onclick]{cursor:pointer}
table.list tbody tr[onclick]:hover{background:#f7faff}
table.list tr.grp td{background:#eef2f7;font-weight:700;color:var(--navy);padding:.4rem .6rem}
table.list tr.row-expired td:first-child,table.list tr.row-deadline td:first-child{box-shadow:inset 4px 0 var(--red)}
table.list tr.row-expired,table.list tr.row-deadline{background:#fff7f6}
table.list tr.row-urgent td:first-child{box-shadow:inset 4px 0 var(--orange)}
table.list tr.row-window td:first-child{box-shadow:inset 4px 0 var(--blue)}
table.list tr.row-soon td:first-child{box-shadow:inset 4px 0 var(--amber)}
table.list tr.archived{opacity:.55}
table.list tr.selected{background:var(--blue-bg)}
.c-st{width:1%}
.left{font-size:.82rem;color:var(--muted)}
.left-expired,.left-deadline{color:var(--red);font-weight:700} .left-urgent{color:var(--orange);font-weight:700}
.empty{color:var(--muted);text-align:center;padding:1.5rem 0;margin:0}

/* detail */
.big-deadline{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;border-radius:var(--radius);padding:1rem 1.3rem;margin-bottom:1rem;background:#fff;border:1px solid var(--line)}
.big-deadline .lbl{display:block;font-size:.78rem;opacity:.8}
.big-deadline .date{font-size:1.6rem;font-weight:800}
.big-deadline .remain{font-size:1.25rem;font-weight:800;padding:.3rem .9rem;border-radius:8px;background:rgba(0,0,0,.06)}
.big-deadline.st-expired{background:var(--red);color:#fff;border-color:var(--red)}
.big-deadline.st-urgent{background:var(--orange-bg);border-color:#f5b98f}
.big-deadline.st-window{background:var(--blue-bg)} .big-deadline.st-soon{background:var(--amber-bg)} .big-deadline.st-ok{background:var(--green-bg)}
.dl{display:grid;grid-template-columns:110px 1fr;gap:.45rem .8rem;margin:0}
.dl dt{color:var(--muted);font-size:.85rem} .dl dd{margin:0}
.plan,.recip{margin:0 0 1rem;padding-left:1.1rem;font-size:.9rem}
.plan li.past{color:#aab3bd;text-decoration:line-through}
.rem-list{list-style:none;margin:0;padding:0}
.rem-list li{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.rem-list li.today{background:var(--amber-bg);margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;border-radius:6px}
.rem-date{min-width:110px;font-weight:700;font-size:.9rem}
.rem-date small{font-weight:400;color:var(--muted)}

/* companies */
.dept-rows{display:flex;flex-direction:column;gap:.4rem}
.dept-row{display:grid;grid-template-columns:200px 1fr 80px 70px auto;gap:.5rem;align-items:center}
.dept-row textarea{resize:vertical;min-height:38px}
.dept-row.inactive{opacity:.55} .dept-row.new{border-top:1px dashed var(--line);padding-top:.5rem}
.w-num{width:80px}
.tabs{display:flex;gap:.3rem;margin-bottom:.8rem}
.tabs a{padding:.45rem 1rem;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--text)}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.login-box{max-width:380px;margin:4rem auto}
.login-box h1{margin-bottom:.2rem}

@media (max-width:1000px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .grid-2,.grid-2.wide-left{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding:.8rem}
  .nav-toggle{display:block}
  .mainnav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:.5rem}
  .nav-open .mainnav{display:flex}
  .dd.user{margin-left:0} .dd-menu{position:static;box-shadow:none;margin:.3rem 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .f-grid .span2{grid-column:auto}
  .dept-row{grid-template-columns:1fr 1fr;}
  .filters label{min-width:calc(50% - .5rem);flex:1}
  .big-deadline .date{font-size:1.3rem}
}
@media print{.topbar,.filters,.actions,.foot{display:none}.card{border:0}}
.grid-2>*,.wrap>*{min-width:0} main.wrap{overflow-x:hidden}