/* LINE受発注システム 共通デザイントークン
   方針：業務システムの可読性を優先。LINEグリーンはブランドアクセントとして使用。 */
:root {
  --line-primary:   #1A7A3C;     /* 主色：深いグリーン（LINEグリーンを落ち着かせた） */
  --line-brand:     #06C755;     /* LINEブランドグリーン（ロゴ・バッジのみ） */
  --line-soft:      #EBF7F0;     /* 主色の薄い背景 */
  --line-accent:    #2D9E5F;     /* リンク・選択状態 */
  --line-danger:    #BC5450;     /* 警告・エラー */
  --line-warn:      #B58441;     /* 注意・期限間近 */
  --line-success:   #4E8D6E;     /* 成功・完了 */
  --line-ink:       #1E2A35;     /* 本文テキスト */
  --line-muted:     #6B7A87;     /* 補足テキスト */
  --line-line:      #E3E8EC;     /* ボーダー */
  --line-bg:        #F3F6F9;     /* ページ背景 */
}

html { -webkit-text-size-adjust: 100%; }
body { color: var(--line-ink); background: var(--line-bg); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; }

/* ===== サイドバー ===== */
#sidebar { transition: width .15s ease; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--line-muted); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; text-decoration: none;
}
.nav-item:hover { background: #F0F4F7; color: var(--line-ink); }
.nav-item.active { background: var(--line-soft); color: var(--line-primary); }
.nav-item .nav-count {
  margin-left: auto; min-width: 20px; height: 18px;
  padding: 0 6px; border-radius: 9999px;
  background: #EDEFF2; color: var(--line-muted);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.nav-item.active .nav-count { background: var(--line-accent); color: #fff; }
.nav-section-label {
  padding: 14px 12px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  color: #9AA4AF; text-transform: uppercase;
}

/* ===== パネル（カード） ===== */
.panel { background: #fff; border: 1px solid var(--line-line); border-radius: 12px; }
.panel-h {
  padding: 13px 16px; border-bottom: 1px solid var(--line-line);
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--line-ink);
}
.panel-b { padding: 16px; }

/* ===== ボタン ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 8px; font-weight: 600; font-size: 13.5px;
  padding: 8px 14px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--line-primary); color: #fff; }
.btn-primary:hover { opacity: .92; }
.btn-outline { background: #fff; border-color: #C8D0D9; color: var(--line-ink); }
.btn-outline:hover { background: #F4F7FA; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ===== バッジ ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 6px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
}
.badge-danger  { background: #FCEEEE; color: var(--line-danger); }
.badge-warn    { background: #F5EDDE; color: var(--line-warn); }
.badge-success { background: #E6F4EC; color: var(--line-success); }
.badge-muted   { background: #EDEFF2; color: var(--line-muted); }
.badge-primary { background: var(--line-soft); color: var(--line-primary); }

/* ===== アバター ===== */
.avatar {
  width: 30px; height: 30px; border-radius: 9999px;
  display: grid; place-items: center; color: #fff;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ===== ランク ===== */
.rank {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-weight: 800; font-size: 12px; color: #fff; flex-shrink: 0;
}
.rank-A { background: #2D7D46; }
.rank-B { background: #4A90D9; }
.rank-C { background: #9AA4AF; }

/* ===== フォーム ===== */
.label { display: block; font-size: 12px; font-weight: 600; color: var(--line-muted); margin-bottom: 4px; }
.input, .select, .textarea {
  width: 100%; border: 1px solid #C8D0D9; border-radius: 8px;
  padding: 9px 12px; font-size: 14px; background: #fff;
  font-family: inherit; color: var(--line-ink);
}
.input:focus, .textarea:focus { outline: 2px solid var(--line-accent); outline-offset: -1px; }

/* ===== プログレスバー ===== */
.prog { height: 5px; border-radius: 9999px; background: #E8ECF0; overflow: hidden; }
.prog > span { display: block; height: 100%; border-radius: 9999px; background: var(--line-primary); }

/* ===== ステータスバッジ（案件） ===== */
:root {
  --st-quote-req:  #5C7FB8;  /* 見積依頼中：青 */
  --st-quote-iss:  #B58441;  /* 見積書発行済：琥珀 */
  --st-quote-apr:  #4E8D6E;  /* 見積承認済：緑 */
  --st-order:      #7D6FAE;  /* 発注確定：藤 */
  --st-delivery:   #4E939B;  /* 納品手配：青磁 */
  --st-delivered:  #2D9E5F;  /* 納品完了：明るい緑 */
  --st-invoice:    #A96A88;  /* 請求書発行済：薄紅 */
  --st-paid:       #6B7682;  /* 入金確認済：スレート */
}
.st-badge {
  display: inline-flex; align-items: center;
  border-radius: 6px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.st-quote-req  { background: var(--st-quote-req); }
.st-quote-iss  { background: var(--st-quote-iss); }
.st-quote-apr  { background: var(--st-quote-apr); }
.st-order      { background: var(--st-order); }
.st-delivery   { background: var(--st-delivery); }
.st-delivered  { background: var(--st-delivered); }
.st-invoice    { background: var(--st-invoice); }
.st-paid       { background: var(--st-paid); }

/* ===== 区切り線 ===== */
.divider { border: none; border-top: 1px solid var(--line-line); }

/* ===== トグルスイッチ（共通部品） ===== */
.toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle;
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.toggle .track {
  position: absolute;
  inset: 0;
  background: #C8D0D9;
  border-radius: 9999px;
  transition: background .15s;
}
.toggle .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: left .15s;
}
.toggle input:checked ~ .track { background: var(--line-primary); }
.toggle input:checked ~ .knob  { left: 23px; }
.toggle input:disabled ~ .track { opacity: .5; }

/* ===== モバイル対応（サイドバー・ドロワー / ハンバーガー） ===== */
.app-sidebar { display: flex; }
.hamburger { display: none; }
#sidebarBackdrop { display: none; }
@media (max-width: 767px) {
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .app-sidebar.open { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
  .hamburger { display: inline-flex; }
  #sidebarBackdrop.show {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 55;
  }
}