/* ============================================================
   車両整備管理アプリ  スタイル v2（2026-07 デザイン刷新）
   ・元気ジャパン＝スミ×金（会社ブランドカラー）／ファーストスター＝紺×青
   ・スマホは下タブ、PCは横幅を活かした2カラム
   ・ダークモード対応・タップ領域44px以上・フォーカス可視
   ============================================================ */

:root{
  /* 地と文字 */
  --paper:#F4F1EC; --surface:#FFFFFF; --surface-2:#FBF9F6;
  --line:#E3DCD2; --line-soft:#EFEAE3;
  --text:#231815; --text-2:#6B6259; --text-3:#736A61;   /* text-3 は補助文字。4.5:1 以上を確保 */

  /* ブランド（既定＝元気ジャパン スミ×金） */
  --ink:#231815; --ink-2:#372A24;
  --brand:#847336; --brand-ink:#6B5C2B; --brand-lit:#C2A548; --brand-soft:#F3EEDE;

  /* 状態の色（意味を固定する） */
  --wait:#5A6470;  --wait-soft:#EDF0F3;   /* 回答待ち */
  --go:#2E7D32;    --go-soft:#E8F3E9;     /* 完了 */
  --work:#9A6B00;  --work-soft:#FBF0DA;   /* 作業中 */
  --stop:#A32B1E;  --stop-soft:#FBEAE7;   /* 緊急・遅延 */

  --r:12px; --r-sm:8px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(35,24,21,.06), 0 1px 3px rgba(35,24,21,.05);
  --sh-2:0 6px 24px rgba(35,24,21,.12);
  --font:"Meiryo UI","Yu Gothic UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --tap:46px;
}

/* ファーストスター＝紺×青 */
body.fs{
  --ink:#12314F; --ink-2:#1B4066;
  --brand:#1565C0; --brand-ink:#0D47A1; --brand-lit:#7FB3E8; --brand-soft:#E7F0FA;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#171310; --surface:#211B17; --surface-2:#2A231E;
    --line:#3A302A; --line-soft:#332B26;
    --text:#F0EAE2; --text-2:#B5A99D; --text-3:#8A7E73;
    --ink:#100D0B; --ink-2:#1C1613;
    --brand:#C2A548; --brand-ink:#D8BE6C; --brand-soft:#332B18;
    --wait:#9AA6B4; --wait-soft:#26303A;
    --go:#7BC47F;   --go-soft:#1D2E1F;
    --work:#E0AE4A; --work-soft:#332815;
    --stop:#E58274; --stop-soft:#3A211D;
    --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 8px 28px rgba(0,0,0,.5);
  }
  body.fs{ --brand:#7FB3E8; --brand-ink:#A8CCF2; --brand-soft:#16283A; --ink:#0B1723; --ink-2:#132436; }
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  background:var(--paper); color:var(--text);
  font-size:15px; line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }
button{font-family:inherit;}

/* ---------- ヘッダー ---------- */
.header{
  background:var(--ink); color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:20;
}
.header h1{font-size:16px; font-weight:700; letter-spacing:.01em;}
.header .user{font-size:11.5px; color:rgba(255,255,255,.72); margin-top:1px;}
.header [onclick]{
  font-size:12.5px; color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill);
  padding:7px 14px; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.header [onclick]:hover{background:rgba(255,255,255,.12);}

/* ---------- タブ（スマホ＝下固定 / PC＝上） ---------- */
.tab-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--surface);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px rgba(35,24,21,.06);
}
.tab-btn{
  flex:1; min-height:var(--tap); padding:8px 4px 7px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:none; background:none; cursor:pointer;
  font-size:11px; font-weight:700; color:var(--text-3);
  border-top:3px solid transparent; margin-top:-1px;
}
.tab-btn.active{ color:var(--brand-ink); border-top-color:var(--brand); }
.tab-icon{ font-size:0; width:22px; height:22px; display:block; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.tab-btn[data-tab="home"] .tab-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");}
.tab-btn[data-tab="new"] .tab-icon,.tab-btn[data-tab="jobs"] .tab-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2 2.3-2.3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2 2.3-2.3z'/%3E%3C/svg%3E");}
.tab-btn[data-tab="vehicles"] .tab-icon,.tab-btn[data-tab="hist"] .tab-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11v8H2z'/%3E%3Cpath d='M13 11h4l3 3v2h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11v8H2z'/%3E%3Cpath d='M13 11h4l3 3v2h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");}

/* ---------- 画面 ---------- */
.screen{display:none; padding:16px 16px 96px; max-width:520px; margin:0 auto;}
.screen.active{display:block;}

.section-title{
  font-size:11.5px; font-weight:700; color:var(--text-3);
  letter-spacing:.08em; margin:20px 2px 8px; text-transform:none;
}
.screen > .section-title:first-child{margin-top:4px;}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); margin-bottom:14px; overflow:hidden;
}
.card-header{
  padding:14px 16px; font-size:15px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.card-body{padding:0 16px 16px;}

/* ---------- 集計タイル ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:6px;}
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 8px; text-align:center; box-shadow:var(--sh-1);
}
.stat-num{font-size:27px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--text);}
.stat-num.red{color:var(--stop);} .stat-num.orange{color:var(--work);}
.stat-num.green{color:var(--go);} .stat-num.theme{color:var(--brand-ink);}
.stat-label{font-size:10.5px; color:var(--text-2); margin-top:3px; font-weight:600;}

/* ---------- リスト ---------- */
.list-item{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; min-height:var(--tap);
  border-bottom:1px solid var(--line-soft); cursor:pointer;
  transition:background .12s ease;
}
.list-item:last-child{border-bottom:none;}
.list-item:hover{background:var(--surface-2);}
.list-item:active{background:var(--line-soft);}

.list-icon{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--wait-soft); color:var(--wait);
  font-size:0; position:relative;
}
.list-icon::before{
  content:''; width:21px; height:21px; background:currentColor;
  -webkit-mask:var(--ic) no-repeat center/contain; mask:var(--ic) no-repeat center/contain;
}
.list-icon{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2 2.3-2.3z'/%3E%3C/svg%3E");}
.list-icon.i-work{background:var(--work-soft); color:var(--work);}
.list-icon.i-done{background:var(--go-soft); color:var(--go);
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");}
.list-icon.i-urgent{background:var(--stop-soft); color:var(--stop);
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17H2.5z'/%3E%3Cpath d='M12 9v5'/%3E%3Cpath d='M12 17.6v.01'/%3E%3C/svg%3E");}
.list-icon.i-truck{background:var(--brand-soft); color:var(--brand-ink);
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11v8H2z'/%3E%3Cpath d='M13 11h4l3 3v2h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");}

.list-main{flex:1; min-width:0;}
.list-title{font-size:15px; font-weight:700; letter-spacing:.01em;}
.list-sub{font-size:12px; color:var(--text-2); margin-top:3px;}
.list-right{text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
.list-amount{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;}
.list-date{font-size:10.5px; color:var(--text-3); font-variant-numeric:tabular-nums;}

/* 納品予定日＝一番知りたい情報。右に大きく */
.due{ text-align:right; line-height:1.15; }
.due-label{font-size:9.5px; color:var(--text-3); font-weight:700; letter-spacing:.04em;}
.due-date{font-size:17px; font-weight:800; color:var(--brand-ink); font-variant-numeric:tabular-nums;}
.due.late .due-date{color:var(--stop);}
.due-late{font-size:10px; font-weight:800; color:var(--stop);}

/* ---------- バッジ ---------- */
.badge{
  display:inline-block; padding:4px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; white-space:nowrap; line-height:1.4;
}
.badge.new{background:var(--wait-soft); color:var(--wait);}
.badge.progress{background:var(--work-soft); color:var(--work);}
.badge.done{background:var(--go-soft); color:var(--go);}
.badge.cancel{background:var(--line-soft); color:var(--text-3);}
.badge.urgent{background:var(--stop-soft); color:var(--stop);}
.badge.emg{background:var(--stop); color:#fff;}
.badge.late{background:var(--stop); color:#fff;}
/* ダークでは地が明るいサーモンになるため、文字を暗くしてコントラストを確保 */
@media (prefers-color-scheme: dark){
  .badge.emg,.badge.late{color:#1A100D;}
}

/* ---------- フォーム ---------- */
.form-group{margin-bottom:18px;}
.form-label{display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--text);}
.form-input,.form-select,.form-textarea{
  width:100%; min-height:var(--tap); padding:11px 13px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:16px; font-family:inherit; background:var(--surface); color:var(--text);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.form-textarea{min-height:84px; resize:vertical; line-height:1.6;}
.form-select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:17px; padding-right:38px;}
.req{color:var(--stop); font-weight:700;}
.hint{font-size:11.5px; color:var(--text-3); margin-top:5px;}
.plate-row{display:flex; gap:8px; align-items:flex-end;}
.plate-row .pl{font-size:10.5px; color:var(--text-3); margin-bottom:4px; font-weight:700;}

/* ---------- ボタン ---------- */
.btn{
  width:100%; min-height:52px; padding:14px;
  border:none; border-radius:var(--r); font-size:16px; font-weight:700;
  color:#fff; background:var(--brand-ink); cursor:pointer;
  box-shadow:var(--sh-1); transition:filter .12s ease, transform .06s ease;
}
.btn:hover{filter:brightness(1.08);} .btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.secondary{background:var(--surface); color:var(--text); border:1.5px solid var(--line); box-shadow:none;}
.btn.secondary:hover{background:var(--surface-2); filter:none;}
.btn+.btn{margin-top:10px;}

.priority-row{display:flex; gap:8px;}
.priority-opt{
  flex:1; min-height:var(--tap); padding:11px 6px; text-align:center;
  border:2px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
  font-size:14px; font-weight:700; color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
}
.priority-opt:hover{border-color:var(--text-3);}
.priority-opt.sel{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink);}
.priority-opt[data-v="緊急"].sel{border-color:var(--stop); background:var(--stop-soft); color:var(--stop);}

/* ---------- 詳細 ---------- */
.detail-row{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft);}
.detail-row:last-child{border-bottom:none;}
.detail-label{width:98px; font-size:12.5px; color:var(--text-2); flex-shrink:0; font-weight:600;}
.detail-value{font-size:14px; flex:1; min-width:0; word-break:break-word;}

.timeline{padding:6px 0 0 20px; border-left:2px solid var(--line); margin-left:9px;}
.tl-item{padding:0 0 18px 18px; position:relative;}
.tl-item:last-child{padding-bottom:4px;}
.tl-item::before{
  content:''; position:absolute; left:-26px; top:5px; width:11px; height:11px;
  border-radius:50%; background:var(--surface); border:2.5px solid var(--line);
}
.tl-item.active::before{border-color:var(--brand); background:var(--brand);}
.tl-time{font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums;}
.tl-text{font-size:13.5px; margin-top:2px;}

.v-plate{
  display:inline-block; padding:5px 11px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px;
  font-size:14px; font-weight:800; letter-spacing:1px; font-variant-numeric:tabular-nums;
}

.empty{text-align:center; color:var(--text-3); font-size:13px; padding:38px 16px; line-height:1.8;}
.change-banner{background:var(--work-soft); color:var(--work); padding:11px 16px; font-size:12.5px; font-weight:600; border-bottom:1px solid var(--line);}

/* ---------- グラフ ---------- */
.bar-chart{display:flex; align-items:flex-end; gap:7px; height:128px; padding:12px;}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;}
.bar-value{font-size:10.5px; font-weight:800; margin-bottom:4px; font-variant-numeric:tabular-nums;}
.bar-fill{width:100%; border-radius:5px 5px 0 0; min-height:3px;}
.bar-label{font-size:10px; color:var(--text-3); margin-top:5px;}

/* ---------- モーダル ---------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(20,14,11,.5); backdrop-filter:blur(2px);
  display:none; align-items:flex-end; justify-content:center; z-index:50;
}
.modal-bg.show{display:flex; animation:fade .16s ease;}
.modal{
  background:var(--surface); width:100%; max-width:520px;
  border-radius:18px 18px 0 0; max-height:92vh; overflow-y:auto;
  padding:18px 18px calc(30px + env(safe-area-inset-bottom));
  animation:slideUp .2s cubic-bezier(.2,.8,.3,1);
}
.modal h2{font-size:17px; margin-bottom:14px;}
.back{
  font-size:13px; font-weight:700; color:var(--text-2); cursor:pointer;
  display:inline-flex; align-items:center; min-height:36px; margin-bottom:8px;
}
.back:hover{color:var(--text);}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

.toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600; z-index:100; opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none; max-width:90%; box-shadow:var(--sh-2);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================================================
   PC（横幅を活かす）
   ============================================================ */
@media (min-width:900px){
  body{background:var(--paper);}
  .header{padding:15px 32px; justify-content:flex-start; gap:24px;}
  .header > div:first-child{flex:1;}
  .header h1{font-size:17px;}

  /* タブを上のピル型に戻す */
  .tab-nav{
    position:sticky; top:57px; bottom:auto; left:auto; right:auto;
    border-top:none; border-bottom:1px solid var(--line);
    box-shadow:none; padding:9px 32px; gap:8px;
    background:var(--surface);
  }
  .tab-btn{
    flex:0 0 auto; flex-direction:row; gap:8px; min-height:42px;
    padding:8px 20px; border-top:none; border-radius:var(--r-pill);
    font-size:13.5px; color:var(--text-2);
  }
  .tab-btn:hover{background:var(--surface-2);}
  .tab-btn.active{background:var(--brand-soft); color:var(--brand-ink); border-top:none;}
  .tab-icon{width:19px; height:19px;}

  .screen{max-width:1120px; padding:24px 32px 56px;}
  .stats{gap:12px; margin-bottom:8px;}
  .stat-card{padding:18px 14px;}
  .stat-num{font-size:34px;}
  .stat-label{font-size:12px;}

  /* 一覧と入力を2カラムに */
  .screen#s-new .card, .screen#s-resp .card{max-width:680px;}
  .list-item{padding:16px 20px;}
  .list-title{font-size:16px;}
  .list-sub{font-size:13px;}
  .due-date{font-size:19px;}

  .modal-bg{align-items:center;}
  .modal{border-radius:var(--r); max-width:660px; max-height:86vh; padding:26px 28px;}
  .toast{bottom:32px;}
}

/* 印刷（依頼票を紙で回す用） */
@media print{
  .tab-nav,.toast,.header [onclick],.btn{display:none!important;}
  body{background:#fff; color:#000;}
  .screen{display:block!important; max-width:none; padding:0;}
  .card{box-shadow:none; border:1px solid #999; break-inside:avoid;}
  .modal-bg{position:static; display:block!important; background:none;}
  .modal{max-height:none; box-shadow:none; border-radius:0;}
}