/* ==========================================================================
   株式会社TASK 公式LINEシステム — 共通スタイル
   ドライバー報告フォーム（index.html）と管理ダッシュボード（dashboard.html）
   の両方から読み込む。デザイントークンの正本はこのファイル1つ。
   ※ UI/UX改善候補リスト #49 #50 #52 #53 #54 対応
   ========================================================================== */

/* ── デザイントークン ──────────────────────────────────────
   色は WCAG AA（本文4.5:1）を満たす値を採用している。
   数値を変えるときは必ずコントラスト比を確認すること。          */
:root{
  /* ブランド */
  --navy:#1f3a5f;          /* 主要アクション・見出し（白文字で11.5:1） */
  --navy-d:#16294a;
  --navy-tint:#eef2f7;

  /* 意味の色（#50 赤は破壊操作専用。主要アクションは紺） */
  --danger:#c62f2f;        /* 削除・エラー（白文字で5.5:1）        */
  --danger-bg:#fdecec;
  --danger-tx:#a52121;     /* 淡い背景の上に置くテキスト用          */
  --ok:#1b6b2f;            /* 完了（#e8f5e9 の上で5.9:1）          */
  --ok-bg:#e8f5e9;
  --warn:#9a5300;          /* 未処理（#fff4e0 の上で5.5:1）        */
  --warn-bg:#fff4e0;

  /* 面と文字 */
  --bg:#f4f6f9;
  --card:#ffffff;
  --line:#d8dee7;
  --line-strong:#c3ccd8;
  --txt:#1c2430;
  --muted:#5a6470;         /* #f4f6f9 の上で5.6:1（旧#6b7682は4.3:1で未達） */
  --muted-soft:#7c8694;    /* 装飾のみ。本文には使わない            */

  /* 形 */
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-pill:999px;

  /* 影 */
  --sh-1:0 1px 2px rgba(20,40,70,.06);
  --sh-2:0 2px 8px rgba(20,40,70,.07);
  --sh-3:0 12px 32px rgba(20,40,70,.16);

  /* 余白 */
  --gap:12px;
  --pad:16px;

  /* 安全領域（#20） */
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

/* ── ダークモード（#54） ────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root{
    --navy:#3b6499;
    --navy-d:#28477199;
    --navy-tint:#1c2735;

    --danger:#e05a55;
    --danger-bg:#3a1f1f;
    --danger-tx:#ff9d97;
    --ok:#5cc271;
    --ok-bg:#16301c;
    --warn:#e0a44e;
    --warn-bg:#332612;

    --bg:#11151b;
    --card:#1a202a;
    --line:#2c3542;
    --line-strong:#3b4655;
    --txt:#e7ecf3;
    --muted:#a3adbb;
    --muted-soft:#8790a0;

    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 8px rgba(0,0,0,.35);
    --sh-3:0 12px 32px rgba(0,0,0,.5);
  }
}

/* ── リセット ────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.7;
  overscroll-behavior-y:none;
}
h1,h2,h3,p,ul,ol{margin:0;}
button{font-family:inherit; color:inherit;}
.hidden{display:none !important;}

/* 読み上げ専用（画面には出さないがスクリーンリーダーには読ませる） */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── アイコン（Lucide / ISC License をSVGスプライトで埋め込み） ── */
.sprite{position:absolute; width:0; height:0; overflow:hidden;}
.ic{
  width:1.15em; height:1.15em; flex:0 0 auto;
  display:inline-block; vertical-align:-.18em; color:inherit;
}

/* ── フォーカスリング（#21 #56）────────────────────────────
   マウス/タップでは出さず、キーボード操作のときだけ出す。       */
:focus{outline:none;}
:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:2px;
  border-radius:4px;
}

/* ── 入力欄 ──────────────────────────────────────────────
   font-size は必ず16px。16px未満だとiOSがフォーカス時に
   ページを勝手に拡大する（#25）。                              */
.f-input,.f-select,.f-textarea{
  width:100%;
  font-size:16px;
  line-height:1.5;
  padding:11px 12px;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--card);
  color:var(--txt);
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
}
.f-textarea{min-height:76px; resize:vertical;}
.f-input:focus,.f-select:focus,.f-textarea:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent);
}
.f-input::placeholder,.f-textarea::placeholder{color:var(--muted-soft);}

/* プルダウンは矢印を描き直す（#21 で appearance:none により消えていた） */
.f-select-wrap{position:relative;}
.f-select-wrap .ic{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--muted); width:18px; height:18px;
}
.f-select{padding-right:38px;}

/* 未入力エラーのハイライト（#7） */
.f-input.invalid,.f-select.invalid,.f-textarea.invalid,.invalid > .f-input{
  border-color:var(--danger);
  background:var(--danger-bg);
}

/* ラベル */
.f-label{
  display:block; font-size:13.5px; font-weight:700;
  margin-bottom:6px; color:var(--txt);
}
.f-req{
  color:var(--danger-tx); font-size:11px; font-weight:700;
  margin-left:5px; vertical-align:1px;
}
.f-opt{
  color:var(--muted); font-size:11px; font-weight:600;
  margin-left:5px; vertical-align:1px;
}
.f-help{display:block; font-size:12.5px; color:var(--muted); margin:-2px 0 7px;}
.f-row{margin-bottom:15px;}
.f-row:last-child{margin-bottom:0;}

/* ── ボタン ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; border:1.5px solid transparent; border-radius:var(--r);
  padding:14px 18px; font-size:16px; font-weight:700;
  cursor:pointer; text-decoration:none; line-height:1.4;
  transition:transform .08s ease, filter .12s ease;
}
.btn:active{transform:scale(.985); filter:brightness(.94);}   /* #53 押下感 */
.btn:disabled{opacity:.5; cursor:default; transform:none; filter:none;}

.btn-primary{background:var(--navy); color:#fff;}             /* #50 主要=紺 */
.btn-danger{background:var(--danger); color:#fff;}            /* #50 赤=破壊 */
.btn-ghost{background:var(--card); color:var(--txt); border-color:var(--line-strong);}
.btn-line{background:#06C755; color:#fff;}
.btn-sm{padding:10px 14px; font-size:14px; border-radius:var(--r-sm);}

/* アイコンだけの丸ボタン。見た目より当たり判定を広げる（#9 #34） */
.btn-icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--card); color:var(--muted);
  cursor:pointer;
}
.btn-icon::after{content:""; position:absolute; inset:-6px;}  /* タップ領域を44px相当に */
.btn-icon:active{background:var(--navy-tint);}

/* ── カード ────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-2);
}
.card-pad{padding:15px 14px;}

/* セクション見出し */
.sec-title{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color:var(--muted);
  letter-spacing:.05em; margin-bottom:11px;
}

/* ── チップ（絞り込み） ──────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1.5px solid var(--line); background:var(--card); color:var(--muted);
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600; white-space:nowrap;
  flex-shrink:0; cursor:pointer; line-height:1.4;
}
.chip:active{background:var(--navy-tint);}
.chip.on{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ── 状態バッジ ────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; padding:3px 9px;
  border-radius:var(--r-sm); white-space:nowrap; line-height:1.6;
}
.badge-done{background:var(--ok-bg);     color:var(--ok);}
.badge-error{background:var(--danger-bg);color:var(--danger-tx);}
.badge-pending{background:var(--warn-bg);color:var(--warn);}

/* ── トースト（#48 折り返す） ──────────────────────────── */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(8px);
  bottom:calc(var(--safe-b) + 18px);
  max-width:min(90vw, 420px);
  background:rgba(20,30,50,.94); color:#fff;
  padding:11px 18px; border-radius:var(--r);
  font-size:14px; line-height:1.6; z-index:200;
  white-space:normal; word-break:break-word; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--danger);}

/* ── 全画面オーバーレイ（処理中） ────────────────────────── */
.overlay{
  position:fixed; inset:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.overlay.show{display:flex;}
.overlay-box{text-align:center; max-width:300px; width:100%;}

.spinner{
  width:42px; height:42px; margin:0 auto 16px;
  border:4px solid var(--line); border-top-color:var(--navy);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2.4s;}
  .btn:active{transform:none;}
}

/* 進捗バー（#8） */
.progress{
  height:6px; border-radius:3px; background:var(--line);
  overflow:hidden; margin-top:14px;
}
.progress > span{
  display:block; height:100%; width:0%;
  background:var(--navy); border-radius:3px;
  transition:width .3s ease;
}

/* ── モーダル ────────────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,22,34,.55);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal.show{display:flex;}
.modal-box{
  background:var(--card); border-radius:var(--r-lg);
  padding:26px 22px 22px; width:100%; max-width:360px;
  box-shadow:var(--sh-3); text-align:center;
}
.modal-title{font-size:17px; font-weight:700; margin-bottom:8px;}
.modal-desc{font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:20px;}
.modal-btns{display:flex; gap:10px;}
.modal-btns .btn{flex:1;}

/* ── 通知メッセージ（画面内インライン） ──────────────────── */
.notice{
  display:flex; gap:10px; align-items:flex-start;
  border-radius:var(--r); padding:13px 14px;
  font-size:14px; line-height:1.7;
}
.notice .ic{margin-top:3px;}
.notice-ok{background:var(--ok-bg);     color:var(--ok);     border:1px solid color-mix(in srgb,var(--ok) 30%, transparent);}
.notice-ng{background:var(--danger-bg); color:var(--danger-tx); border:1px solid color-mix(in srgb,var(--danger) 30%, transparent);}
.notice-warn{background:var(--warn-bg); color:var(--warn);  border:1px solid color-mix(in srgb,var(--warn) 30%, transparent);}
.notice-info{background:var(--navy-tint); color:var(--txt); border:1px solid var(--line);}
.notice b{font-weight:700;}
.notice .notice-body{flex:1; min-width:0;}