/* 杜王町運輸 — 配車管理画面
   会社サイト（紙地・写真主導・余白広め）とは意図的に別の設計言語にする。
   業務システム系＝暗いサイドバー／情報密度高め／数字は等幅／余白は詰める。 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --f:'Zen Kaku Gothic New',sans-serif;
  --bg:#eef1ee; --card:#fff; --ink:#1b2420; --soft:#6a776f; --line:#dbe1dc;
  --deep:#16241d; --deep-2:#1f3329; --fuka:#1f4d3a; --shin:#5f9e3c; --aka:#8cc152;
  --warn:#b4761a; --danger:#a3411f;
}
html{scroll-behavior:smooth}
body.adm{font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.6;font-size:14px;
  display:grid;grid-template-columns:224px 1fr;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--shin);outline-offset:2px}

/* --- サイドバー --- */
.adm__side{background:var(--deep);color:#cfdad3;padding:1.3rem 1.1rem;display:flex;flex-direction:column;
  gap:1.4rem;position:sticky;top:0;height:100vh}
.adm__brand{font-size:1.15rem;font-weight:700;letter-spacing:.04em;color:#fff;line-height:1.3}
.adm__brand span{color:var(--aka)}
.adm__brand em{display:block;font-style:normal;font-size:.72rem;font-weight:400;letter-spacing:.2em;
  color:#8fa89a;margin-top:.25rem}
.adm__nav{display:flex;flex-direction:column;gap:.15rem}
.adm__nav a{padding:.55rem .7rem;border-radius:3px;font-size:.88rem;border-left:2px solid transparent;
  transition:background .18s,border-color .18s,color .18s}
.adm__nav a:hover{background:var(--deep-2);color:#fff}
.adm__nav a.is-on{background:var(--deep-2);border-left-color:var(--aka);color:#fff}
.adm__side-foot{margin-top:auto;font-size:.72rem;line-height:1.7;color:#8fa89a;
  border-top:1px solid #2c4136;padding-top:1rem}
.adm__demo{display:inline-block;font-size:.66rem;letter-spacing:.14em;color:#17280c;background:var(--aka);
  padding:.1em .7em;border-radius:2px;margin-bottom:.5rem;font-weight:700}
.adm__reset{margin-top:.7rem;width:100%;background:transparent;border:1px solid #2c4136;color:#8fa89a;
  border-radius:3px;padding:.45em .6em;font-size:.72rem;transition:border-color .18s,color .18s}
.adm__reset:hover{border-color:var(--aka);color:var(--aka)}

/* --- 本体 --- */
.adm__main{padding:1.4rem 1.6rem 3rem;min-width:0}
.adm__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.adm__h1{font-size:1.3rem;font-weight:700;letter-spacing:.02em}
.adm__date{font-size:.86rem;color:var(--soft);font-variant-numeric:tabular-nums}
.adm__daynav{display:flex;gap:.4rem}
.adm__daynav button{background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:.45em 1em;font-size:.82rem;color:var(--ink);transition:border-color .18s,background .18s}
.adm__daynav button:hover{border-color:var(--fuka);background:#f6f9f6}

/* --- KPI --- */
.adm__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.4rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:.85rem 1rem;
  border-top:3px solid var(--fuka)}
.kpi--warn{border-top-color:var(--warn)}
.kpi__l{font-size:.76rem;color:var(--soft);letter-spacing:.04em}
.kpi__n{font-size:1.9rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi__n small{font-size:.8rem;font-weight:400;color:var(--soft);margin-left:.2em;letter-spacing:0}
.kpi--warn .kpi__n{color:var(--warn)}
.kpi__bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:.4rem}
.kpi__bar span{display:block;height:100%;background:var(--shin);width:0;transition:width .5s ease}

/* --- パネル共通 --- */
.adm__panel{background:var(--card);border:1px solid var(--line);border-radius:4px;margin-bottom:1.4rem}
.adm__panel-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.adm__panel-h h2{font-size:.98rem;font-weight:700;letter-spacing:.03em}
.adm__hint{font-size:.76rem;color:var(--soft)}
.adm__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- 配車ボード --- */
.bd{min-width:820px;font-size:.78rem}
.bd__head,.bd__row{display:grid;grid-template-columns:9.5rem 1fr}
.bd__head{border-bottom:1px solid var(--line);background:#f6f8f6;position:sticky;top:0;z-index:1}
.bd__hcell{padding:.5rem .3rem;text-align:center;color:var(--soft);font-variant-numeric:tabular-nums;
  border-left:1px solid var(--line)}
.bd__hours{display:grid;grid-template-columns:repeat(14,1fr)}
.bd__label{padding:.5rem .8rem;color:var(--soft);font-size:.74rem;letter-spacing:.06em}
.bd__row{border-bottom:1px solid var(--line);min-height:3.1rem}
.bd__row:last-child{border-bottom:none}
.bd__drv{padding:.55rem .8rem;border-right:1px solid var(--line);display:flex;flex-direction:column;
  justify-content:center;gap:.1rem}
.bd__drv-n{font-weight:500;font-size:.86rem}
.bd__drv-c{font-size:.7rem;color:var(--soft)}
.bd__lane{position:relative;display:grid;grid-template-columns:repeat(14,1fr);
  background-image:repeating-linear-gradient(to right,transparent,transparent calc(100%/14 - 1px),var(--line) calc(100%/14 - 1px),var(--line) calc(100%/14));
  cursor:default}
.bd__lane.is-target{background-color:#f0f7ec;cursor:pointer;outline:1px dashed var(--shin);outline-offset:-2px}
.bd__job{grid-row:1;margin:.3rem .12rem;padding:.22rem .45rem;border-radius:3px;overflow:hidden;
  background:#e6f0dd;border:1px solid #bdd6a8;border-left:3px solid var(--fuka);min-width:0}
.bd__job.is-done{background:#eceeed;border-color:var(--line);border-left-color:var(--soft);opacity:.75}
.bd__job-c{font-weight:500;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd__job-m{font-size:.66rem;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.bd__empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--soft);font-size:.72rem;opacity:.7}

/* --- 依頼テーブル --- */
.adm__filters{display:flex;gap:.3rem}
.adm__filters button{background:transparent;border:1px solid var(--line);border-radius:99px;
  padding:.28em .95em;font-size:.76rem;color:var(--soft);transition:all .18s}
.adm__filters button:hover{border-color:var(--fuka);color:var(--ink)}
.adm__filters button.is-on{background:var(--fuka);border-color:var(--fuka);color:#fff}

.tbl{width:100%;min-width:940px;border-collapse:collapse;font-size:.8rem}
.tbl th{text-align:left;font-weight:500;color:var(--soft);font-size:.74rem;letter-spacing:.04em;
  padding:.55rem .7rem;background:#f6f8f6;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:#f7faf7}
.tbl tbody tr.is-sel{background:#eef6e8;box-shadow:inset 3px 0 0 var(--shin)}
.tbl__id{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--soft);font-size:.74rem;white-space:nowrap}
.tbl__co{font-weight:500}
.tbl__sub{font-size:.72rem;color:var(--soft)}
.tbl__num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl__empty{text-align:center;color:var(--soft);padding:2rem 1rem}

.chip{display:inline-block;font-size:.7rem;padding:.16em .7em;border-radius:99px;white-space:nowrap;border:1px solid}
.chip--new{background:#fdf3e1;border-color:#e6cfa3;color:#8a5606}
.chip--assigned{background:#e8f2e0;border-color:#c3d9ad;color:#2c5c1f}
.chip--done{background:#eceeed;border-color:var(--line);color:var(--soft)}
.chip--area{background:#eef2f5;border-color:#ccd8e0;color:#37596e}

.act{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:.3em .8em;
  font-size:.74rem;color:var(--ink);white-space:nowrap;transition:all .18s}
.act:hover{border-color:var(--fuka);background:#f2f7f1}
.act--pri{background:var(--fuka);border-color:var(--fuka);color:#fff}
.act--pri:hover{background:#163b2c;color:#fff}

/* --- レスポンシブ --- */
@media (max-width:900px){
  body.adm{grid-template-columns:1fr}
  .adm__side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
  .adm__nav{flex-direction:row;flex-wrap:wrap}
  .adm__side-foot{margin-top:0;border-top:none;padding-top:0;width:100%}
  .adm__main{padding:1.1rem}
  .adm__kpis{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important}
}

/* --- 画面内のお知らせ --- */
.adm__notice{margin:0 1rem 0;padding:.55rem .8rem;border-radius:3px;font-size:.8rem;border:1px solid}
.adm__notice.is-ok{background:#eaf3e3;border-color:#c3d9ad;color:#2c5c1f}
.adm__notice.is-warn{background:#fdf1de;border-color:#e6cfa3;color:#8a5606}