/* ========================================
   sales.css  -  売上ビュー（PitFlow v0.102.0）
   ダーク/ライト両対応：既存の CSS 変数（--bg2/--bg3/--text/--text2/--text3/--border/--border2/--r）に追従
   ======================================== */

#view-sales-body{ padding:4px 2px 40px; }

/* ヘッダ：タブ＋期間ナビ */
.sv-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:2px 2px 14px; }
.sv-tabs{ display:inline-flex; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.sv-tab{ border:0; background:transparent; color:var(--text2); font-size:13px; font-weight:700; padding:6px 16px; border-radius:8px; cursor:pointer; }
.sv-tab.on{ background:var(--brand,#1f7a4d); color:#fff; }
.sv-nav{ display:inline-flex; align-items:center; gap:6px; }
.sv-nav b{ min-width:104px; text-align:center; font-size:15px; }
.sv-nav button{ border:1px solid var(--border); background:var(--bg3); color:var(--text); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:13px; }
.sv-nav button:hover{ border-color:var(--brand,#1f7a4d); }
.sv-nav .sv-now{ width:auto; padding:0 12px; font-size:12px; }

/* ヒーロー */
.sv-hero{ background:var(--bg2); border:1px solid var(--border); border-radius:var(--r,14px); padding:16px 18px 8px; margin-bottom:14px; }
.sv-hero-row{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end; margin-bottom:6px; }
.sv-hero-main{ min-width:180px; }
.sv-hero-lb{ font-size:12px; color:var(--text3); font-weight:600; }
.sv-hero-num{ font-size:34px; font-weight:800; line-height:1.15; letter-spacing:-.02em; }
.sv-hero-num span{ font-size:15px; font-weight:700; margin-left:3px; color:var(--text2); }
.sv-hero-sub{ font-size:12px; color:var(--text2); margin-top:2px; }
.sv-hero-pace{ margin-left:auto; text-align:center; padding:6px 16px; border-radius:12px; border:1px solid var(--border); }
.sv-hero-pace .sv-hero-num{ font-size:28px; }
.sv-pace-ok{ background:rgba(29,185,122,.12); border-color:rgba(29,185,122,.5); }
.sv-pace-ok .sv-hero-num{ color:#1db97a; }
.sv-pace-near{ background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.5); }
.sv-pace-near .sv-hero-num{ color:#eab308; }
.sv-pace-warn{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.45); }
.sv-pace-warn .sv-hero-num{ color:#ef4444; }

/* カード共通 */
.sv-card{ background:var(--bg2); border:1px solid var(--border); border-radius:var(--r,14px); padding:14px 16px; margin-bottom:14px; }
.sv-card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; font-weight:700; margin-bottom:8px; }
.sv-legend{ font-size:11px; color:var(--text3); font-weight:600; display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sv-lg{ display:inline-block; width:14px; height:0; border-top-width:3px; border-top-style:solid; vertical-align:middle; margin-right:1px; }
.sv-lg-actual{ border-top-color:#1db97a; }
.sv-lg-proj{ border-top-style:dotted; border-top-color:#1db97a; }
.sv-lg-min{ border-top-style:dashed; border-top-color:var(--text3); }
.sv-lg-max{ border-top-style:dashed; border-top-color:#fbbf24; }
.sv-lg-prev{ border-top-color:#9ca3af; }
.sv-note{ font-size:11.5px; color:var(--text3); line-height:1.55; margin-top:8px; }
.sv-foot{ font-size:11px; color:var(--text3); line-height:1.6; margin:4px 2px 0; }
.sv-empty{ font-size:13px; color:var(--text3); padding:14px 4px; text-align:center; }

/* SVG チャート */
.sv-chart{ width:100%; height:auto; display:block; }
.sv-grid{ stroke:var(--border2,#2a3340); stroke-width:1; }
.sv-grid-min{ stroke:var(--text3); stroke-dasharray:4 4; opacity:.7; }
.sv-ylab, .sv-xlab{ fill:var(--text3); font-size:10px; }
.sv-pace{ stroke-width:1.6; fill:none; }
.sv-pace-min{ stroke:var(--text3); stroke-dasharray:5 4; }
.sv-pace-max{ stroke:#fbbf24; stroke-dasharray:5 4; opacity:.8; }
.sv-actual-area{ fill:rgba(29,185,122,.16); stroke:none; }
.sv-actual-line{ fill:none; stroke:#1db97a; stroke-width:2.4; stroke-linejoin:round; }
.sv-actual-dot{ fill:#1db97a; stroke:var(--bg2); stroke-width:2; }
.sv-proj{ stroke:#1db97a; stroke-width:2; stroke-dasharray:2 4; opacity:.8; }
.sv-today{ stroke:var(--text3); stroke-width:1; stroke-dasharray:2 3; opacity:.7; }
.sv-bar-act{ fill:#1db97a; }
.sv-bar-prev{ fill:#9ca3af; }

/* 積み上げ横バー（着地） */
.sv-stack{ width:100%; height:auto; display:block; margin-top:4px; }
.sv-stack-bg{ fill:var(--bg3); }
.sv-mk{ stroke-width:2; }
.sv-mk-lb{ fill:var(--text3); font-size:9.5px; }

/* 確度別サマリー */
.sv-tiers{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:900px){ .sv-tiers{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .sv-tiers{ grid-template-columns:repeat(2,1fr); } }
.sv-tier{ background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--tc); border-radius:10px; padding:10px 12px; }
.sv-tier-top{ display:flex; align-items:center; gap:6px; }
.sv-tier-dot{ width:9px; height:9px; border-radius:50%; }
.sv-tier-l{ font-size:12.5px; font-weight:700; }
.sv-tier-cnt{ margin-left:auto; font-size:11px; color:var(--text3); }
.sv-tier-num{ font-size:22px; font-weight:800; margin-top:3px; letter-spacing:-.02em; }
.sv-tier-note{ font-size:10.5px; color:var(--text3); line-height:1.45; margin-top:3px; }

/* 課別 */
.sv-courses{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
@media (max-width:700px){ .sv-courses{ grid-template-columns:1fr; } }
.sv-course{ background:var(--bg2); border:1px solid var(--border); border-left:4px solid var(--cc); border-radius:12px; padding:12px 14px; }
.sv-course-h{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sv-course-pill{ color:#fff; font-size:12px; font-weight:800; padding:2px 10px; border-radius:999px; }
.sv-course-team{ font-size:12px; color:var(--text2); }
.sv-course-land{ margin-left:auto; font-size:12px; font-weight:700; color:var(--text); }
.sv-mini{ width:100%; height:12px; display:block; border-radius:3px; overflow:hidden; margin-bottom:10px; }
.sv-course-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
@media (max-width:520px){ .sv-course-grid{ grid-template-columns:repeat(3,1fr); } }
.sv-cc{ display:flex; flex-direction:column; gap:1px; font-size:11px; color:var(--text2); }
.sv-cc-dot{ width:8px; height:8px; border-radius:50%; }
.sv-cc-l{ color:var(--text3); }
.sv-cc b{ font-size:13px; color:var(--text); }
.sv-cc i{ font-size:10px; color:var(--text3); font-style:normal; }

/* テーブル */
.sv-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sv-table th{ text-align:right; font-size:11px; color:var(--text3); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border); }
.sv-table th:first-child{ text-align:left; }
.sv-table td{ padding:7px 8px; border-bottom:1px solid var(--border2,#232b36); }
.sv-td-name{ font-weight:700; }
.sv-num{ text-align:right; font-variant-numeric:tabular-nums; }
.sv-tr-total td{ border-top:2px solid var(--border); font-weight:800; border-bottom:none; }

/* ===== v0.103 タブ拡張（クォーター/作業内容/フロント） ===== */
.sv-tabbar{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin:0 2px 12px; flex-wrap:wrap; }
.sv-topbtn{ border:0; background:transparent; color:var(--text2); font-size:14px; font-weight:700; padding:9px 16px; border-bottom:3px solid transparent; margin-bottom:-1px; cursor:pointer; }
.sv-topbtn:hover{ color:var(--text); }
.sv-topbtn.on{ color:var(--brand,#1f7a4d); border-bottom-color:var(--brand,#1f7a4d); }

/* 達成率テキスト色 */
.sv-ok{ color:#1db97a; } .sv-near{ color:#eab308; } .sv-warn{ color:#ef4444; }

/* クォーターカード */
.sv-qcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:640px){ .sv-qcards{ grid-template-columns:repeat(2,1fr); } }
.sv-qcard{ background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:11px 13px; }
.sv-qcard.now{ border-color:var(--brand,#1f7a4d); box-shadow:0 0 0 1px var(--brand,#1f7a4d) inset; }
.sv-qcard-h{ font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; }
.sv-qcard-h span{ color:var(--text3); font-weight:600; font-size:11px; }
.sv-qcard-h em{ margin-left:auto; font-style:normal; font-size:10px; color:#fff; background:var(--brand,#1f7a4d); padding:1px 7px; border-radius:999px; }
.sv-qcard-num{ font-size:21px; font-weight:800; margin:4px 0 2px; }
.sv-qbar{ height:7px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.sv-qbar i{ display:block; height:100%; background:#1db97a; }
.sv-qbar i.sv-near{ background:#eab308; } .sv-qbar i.sv-warn{ background:#ef4444; } .sv-qbar i.sv-ok{ background:#1db97a; }
.sv-qcard-sub{ font-size:10.5px; color:var(--text3); margin-top:5px; }
.sv-qcard-sub b{ font-size:12px; }

/* ヒートマップ */
.sv-hm{ width:100%; border-collapse:separate; border-spacing:3px; font-size:12px; }
.sv-hm th{ font-size:10.5px; color:var(--text3); font-weight:700; padding:2px; text-align:center; }
.sv-hm th i{ font-style:normal; font-weight:500; font-size:9px; }
.sv-hm-mo{ font-weight:700; text-align:right; padding-right:8px; white-space:nowrap; }
.sv-hm-c, .sv-hm-tot{ text-align:center; border-radius:6px; padding:6px 2px; line-height:1.25; }
.sv-hm-c b, .sv-hm-tot b{ display:block; font-size:12px; }
.sv-hm-c i, .sv-hm-tot i{ display:block; font-style:normal; font-size:9.5px; color:var(--text3); }
.sv-hm-tot{ background:var(--bg3); font-weight:700; }
.sv-hm-lg{ display:inline-block; width:56px; height:9px; vertical-align:middle; border-radius:3px; background:linear-gradient(90deg, rgba(239,68,68,.3), rgba(234,179,8,.35), rgba(29,185,122,.55)); }

/* 作業内容サブ行 / フロント曜日件数 */
.sv-sub td{ color:var(--text2); background:var(--bg2); }
.sv-sub .sv-td-name{ font-weight:500; color:var(--text3); padding-left:16px; }
.sv-down{ font-style:normal; font-size:10px; color:var(--text3); margin-left:2px; }

/* ===== v0.104 ビュー切替・作業内容/フロント カード ===== */
.sv-viewsw{ display:flex; justify-content:flex-end; gap:6px; margin:0 2px 10px; }
.sv-vbtn{ border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:12px; font-weight:700; padding:5px 12px; border-radius:8px; cursor:pointer; }
.sv-vbtn.on{ background:var(--brand,#1f7a4d); color:#fff; border-color:var(--brand,#1f7a4d); }

/* 汎用メトリクス行 */
.sv-metric{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:var(--text3); padding:2px 0; }
.sv-metric b{ font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; }

/* 作業内容 グループカード */
.sv-wgcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
@media (max-width:820px){ .sv-wgcards{ grid-template-columns:1fr; } }
.sv-wgcard{ background:var(--bg2); border:1px solid var(--border); border-top:3px solid var(--cc); border-radius:12px; padding:12px 14px; }
.sv-wgcard-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sv-wgcard-tot{ font-size:13px; font-weight:700; }
.sv-wgcard-share{ margin-left:auto; font-size:11px; color:var(--text3); }
.sv-wgcard-body{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sv-wgcol-h{ font-size:12px; font-weight:700; margin-bottom:4px; border-bottom:1px solid var(--border2,#232b36); padding-bottom:3px; }

/* フロント 大きめカード */
.sv-fcards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-bottom:12px; }
.sv-fcard{ background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.sv-fcard-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.sv-fcard-name{ font-size:17px; font-weight:800; }
.sv-fcard-cnt{ font-size:12px; font-weight:700; color:#fff; background:var(--brand,#1f7a4d); padding:2px 10px; border-radius:999px; }
.sv-fcard-sales{ font-size:28px; font-weight:800; color:#1db97a; letter-spacing:-.02em; }
.sv-fcard-sales span{ font-size:13px; color:var(--text2); margin-left:2px; }
.sv-fmetrics{ display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; margin:8px 0 4px; }
.sv-fm{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:var(--text3); }
.sv-fm b{ font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; }
.sv-fbar-lb{ font-size:10.5px; color:var(--text3); font-weight:700; margin:8px 0 3px; }
.sv-segbar{ display:flex; height:14px; border-radius:4px; overflow:hidden; background:var(--bg3); }
.sv-segbar i{ display:block; height:100%; }
.sv-seglbl{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; font-size:10.5px; color:var(--text2); }
.sv-seglbl i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:3px; vertical-align:middle; }
.sv-dowbars{ display:flex; gap:4px; align-items:flex-end; height:56px; }
.sv-dowbar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.sv-dowbar i{ width:70%; background:#1db97a; border-radius:2px 2px 0 0; min-height:3px; }
.sv-dowbar i.z{ background:var(--border2,#333); }
.sv-dowbar span{ font-size:10px; color:var(--text3); margin-top:2px; }
.sv-dowbar span.wk{ color:#ef6a6a; }
.sv-dowbar em{ font-style:normal; font-size:8.5px; color:var(--text3); }

/* ===== v0.105 印刷/PDF ツールボタン ===== */
.sv-tools{ margin-left:auto; display:flex; gap:6px; align-self:center; }
.sv-toolbtn{ border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.sv-toolbtn:hover{ border-color:var(--brand,#1f7a4d); color:var(--text); }