/* =========================================================
   日報・売上仕分け（試作） — この製品の追加分
   土台＝assets/app.css（＆TAXI業務基盤と同じトークン体系＝弊社SaaS共通デザイン v2）。
   ここに書くのは①数字の書体 ②運転日報（帳票）③取込の検査の層 ④旧クラス名の受け皿 だけ。
   トークン（--s1〜--s7・状態色・影）は app.css のものを使い、一度きりの値を置かない。
   ========================================================= */

/* ---------- 1. 数字の書体（2026-09-19 浜田さん指示で Inter → 明朝） ----------
   欧文セリフを先頭に置き、日本語は Noto Sans JP に落とす。
   こうすると「数字だけ明朝・日本語はゴシック」になり、セルに日付と曜日が混ざっても崩れない。
   （Shippori Mincho を先頭にすると日本語まで明朝になるので、帳票の見出しにだけ使う） */
:root{
  --font-num:"Noto Serif","Noto Sans JP","Hiragino Mincho ProN",serif;
  --font-mincho:"Shippori Mincho","Noto Serif","Hiragino Mincho ProN","Yu Mincho",serif;
  --brand:#2F8A6B;          /* ふたば日報の主色（共通デザインの「ブランド」節だけ上書き） */
  --brand-dark:#247056;
  --brand-soft:#E6F2ED;
  --nav-active:#3EAD87;
}
.kpi .value,.stat-value,.lane .v,.countup,.mono,.paper-head-r,
table.grid td,table.grid th,table.kv td,table.kv th{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
}
.kpi .value{font-weight:700;}
table.grid td.num{font-weight:500;}
table.grid tr.sumline td.num,table.grid tfoot td,table.grid tfoot td.num{font-weight:700;}

/* ---------- 2. 旧クラス名の受け皿 ----------
   画面側は josei-works 由来の名前（.card-title・.stat）を使っている。
   共通デザインの名前（.card-head > h2・.kpi）へ寄せるまでの橋渡し。 */
.card-title{
  display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--ink);
}
.card-title .muted{font-weight:400; font-size:11.5px; color:var(--ink-3);}
.card-body.flush{padding:0;}
.card-pad{padding:var(--s3) var(--s4);}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s3); margin-bottom:var(--s4);}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:var(--s3) var(--s4); text-align:left;
  font-family:inherit; cursor:default; display:flex; flex-direction:column; gap:2px;
}
button.stat{cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s;}
button.stat:hover{border-color:var(--brand); box-shadow:var(--shadow-2); transform:translateY(-1px);}
.stat-label{font-size:11.5px; color:var(--ink-2); font-weight:700;}
.stat-value{font-size:25px; font-weight:700; line-height:1.15; color:var(--ink);}
.stat-value small{font-family:"Noto Sans JP",sans-serif; font-size:12px; color:var(--ink-3); margin-left:2px;}
.stat-sub{font-size:11px; color:var(--ink-3); line-height:1.5;}
.stat.ok .stat-value{color:var(--brand-dark);}
.stat.warn{border-left:3px solid var(--warn);}
.stat.warn .stat-value{color:var(--warn);}
.stat.danger{border-left:3px solid var(--danger);}
.stat.danger .stat-value{color:var(--danger);}
.welcome{margin-bottom:var(--s4);}
.welcome-hello{font-size:15px; font-weight:700;}
.welcome-date{font-size:11.5px; color:var(--ink-3);}
.note-line{font-size:11.5px; color:var(--ink-3); margin:var(--s3) 2px;}
.go-mark{color:var(--ink-3);}
table.grid.linkable tbody tr{cursor:pointer;}
table.grid.slim{font-size:12.5px;}
.ym-select{
  height:30px; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--surface); font-family:inherit; font-size:12.5px; padding:0 var(--s2); color:var(--ink);
}
.brand-tag{
  font-size:9px; font-weight:700; border:1px solid rgba(255,255,255,.35); border-radius:4px;
  padding:0 4px; margin-left:5px; vertical-align:middle; color:var(--nav-text);
}
.nav-badge{
  margin-left:auto; background:var(--warn); color:#fff; font-size:10px; font-weight:700;
  border-radius:999px; padding:0 6px; min-width:17px; text-align:center;
}
/* ヘッダーの社名。狭い画面で1文字ずつ折り返して縦に潰れるのを止める
   （2026-09-19 375pxで実発火。flex の子は既定で縮むので min-width:0 と nowrap が要る） */
.header-co{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
@media(max-width:900px){ .header-co{font-size:12px; max-width:52vw;} }

.banner{
  display:flex; gap:var(--s3); align-items:center; background:var(--warn-soft);
  border:1px solid rgba(200,138,22,.35); color:#7a5205; border-radius:var(--radius);
  padding:var(--s3) var(--s4); margin-bottom:var(--s4); font-size:12.5px;
}
.banner>div{flex:1;}
.form-row{display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s3);}
.form-row label{font-size:11.5px; color:var(--ink-2); font-weight:700;}
.form-row input,.form-row select,.form-row textarea{
  height:32px; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:0 var(--s2); font-family:inherit; font-size:13px; color:var(--ink); background:var(--surface);
}
.form-row textarea{height:auto; padding:var(--s2);}
.right{margin-left:auto;}
.mt{margin-top:var(--s3);}
table.kv{width:100%; border-collapse:collapse; font-size:12.5px;}
table.kv th,table.kv td{border-bottom:1px solid var(--line); padding:5px var(--s2); text-align:left;}
table.kv th{color:var(--ink-2); font-weight:700; width:22%;}

.login p.sub{font-size:13px; color:var(--brand-dark); font-weight:700; margin:0 0 var(--s3);}
.login .demo-note{
  font-size:11px; color:var(--ink-3); line-height:1.7; background:var(--surface-2);
  border-radius:var(--radius-sm); padding:var(--s2) var(--s3); margin-top:var(--s3);
}

/* ---------- 3. 取込の検査（7層） ---------- */
.lane-row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
.lane{
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3);
  background:var(--surface); display:flex; flex-direction:column; gap:2px;
}
.lane .k{font-size:11.5px; color:var(--ink-2);}
.lane .v{font-size:22px; font-weight:700; color:var(--ink);}
.lane .u{font-size:11px; color:var(--ink-3);}
.lane.ok{border-color:rgba(47,138,107,.35); background:var(--brand-soft);}
.lane.ok .v{color:var(--brand-dark);}
.lane.warn{border-color:rgba(200,138,22,.4); background:var(--warn-soft);}
.lane.warn .v{color:var(--warn);}

.layer{border-top:1px solid var(--line); padding:var(--s3) var(--s4) var(--s1);}
.layer:first-child{border-top:0;}
.layer-head{display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s1);}
.layer-head .muted{font-size:11.5px; color:var(--ink-3);}
.layer-no{
  font-size:10px; font-weight:700; color:#fff; background:var(--brand);
  border-radius:var(--radius-sm); padding:1px 6px;
}
.layer-mark{margin-left:auto; font-size:11px; font-weight:700; color:var(--brand-dark);}
.layer.warn .layer-no{background:var(--warn);}
.layer.warn .layer-mark{color:var(--warn);}
.layer.block{background:var(--danger-soft);}
.layer.block .layer-no{background:var(--danger);}
.layer.block .layer-mark{color:var(--danger);}
.layer table.grid td{border:0; padding:2px 0; font-size:12px; background:none;}
.layer table.grid td:first-child{width:56%;}
.layer table.grid tbody tr:hover td{background:none;}
.layer table.grid tbody tr:nth-child(even) td{background:none;}

/* ---------- 4. 運転日報（紙と同じ並び） ---------- */
.paperbox{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:var(--s4) var(--s5) var(--s5); margin-bottom:var(--s4);
}
.paperbox .card{box-shadow:none; margin-bottom:var(--s3);}
.paper-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4);
  border-bottom:2px solid var(--brand); padding-bottom:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap;
}
.paper-head h2{font-family:var(--font-mincho); font-size:17px; letter-spacing:.04em; margin:0 0 3px;}
.paper-head-r{text-align:right; font-size:12.5px;}
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); align-items:start;}
table.grid tr.sumline td{background:var(--brand-soft);}
table.grid tr.row-cxl td{background:var(--danger-soft); color:#7c4a4a;}
table.grid tr.on td{background:var(--brand-soft);}

@media(max-width:1080px){.cols2{grid-template-columns:1fr;} .lane-row{grid-template-columns:1fr;}}

/* ---------- 5. スマホ ----------
   🔴 土台にした ＆TAXI業務基盤の app.css には、共通デザイン v2 の
   「横長の表を1件＝1カードにする（.to-cards）」と「入力欄16px（iOSの自動ズーム防止）」が入っていない
   （どちらも nii-crm から共通デザインへ取り込まれた部分で、andtaxi-works には未反映）。
   2026-09-19 に375pxで実測して発覚したので、ここで補う。 */
.only-narrow{display:none;}
@media(max-width:900px){
  .paperbox{padding:var(--s3);}
  .stat-row{grid-template-columns:1fr;}
  .page-head .actions{margin-left:0; width:100%;}
  /* 狭い画面での出し分け。これも app.css（andtaxi-works 由来）に無いので補う。
     入れないと、幅の広いチップが社名を押し出して社名が消える（2026-09-19 実発火） */
  .only-wide{display:none !important;}
  .only-narrow{display:inline;}

  /* 入力欄16px。PC専用の密な表だけ個別に戻す */
  input,select,textarea,.ym-select{font-size:16px;}
  .form-row input,.form-row select,.form-row textarea{height:38px;}

  /* 横長の表を1件＝1カードへ。HTMLは変えず td の data-label だけで組み替える */
  .to-cards{min-width:0; width:100%; table-layout:auto; display:block;}
  .to-cards thead{display:none;}
  .to-cards tbody,.to-cards td{display:block; width:auto;}
  .to-cards tr{
    display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s3);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:var(--s2) var(--s3) var(--s3); margin-bottom:var(--s3);
    background:var(--surface); position:relative;
  }
  .to-cards tbody tr:nth-child(even) td,.to-cards tbody tr:hover td{background:none;}
  .to-cards td{border:0; padding:5px 0; text-align:left;}
  .to-cards td.num{text-align:left;}
  .to-cards td[data-label]::before{
    content:attr(data-label); display:block; font-size:11px; color:var(--ink-3); margin-bottom:2px;
  }
  .to-cards td:not([data-label]){display:none;}
  .to-cards td.wide{grid-column:1 / -1;}
  .to-cards tfoot tr{background:var(--brand-soft);}
  .table-wrap{max-height:none;}
}

/* ---------- 6. 印刷 ---------- */
@media print{
  body[data-printscope="paper"] [data-print="rank"],
  body[data-printscope="rank"] [data-print="paper"]{display:none !important;}
  .paperbox{box-shadow:none; border:0; padding:0;}
  .layer{break-inside:avoid;}
}