/* 週次 › 数字 › お金（2026-10-30 2段目）。見本 mock-money.html の部品。セレクタは #tab-insights の中に限る */
#tab-insights .is-ok { color: var(--ok); }
#tab-insights .is-ng { color: var(--ng); }
#tab-insights .is-unk { color: var(--unk); }
#tab-insights .card-body { padding: var(--card-pad-y) var(--card-pad); }
#tab-insights .card-body.flush { padding: 0 0 8px; }

/* 目標の現状 */
#tab-insights .goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tab-insights .goal { padding: var(--card-pad-y) var(--card-pad) var(--card-pad); min-width: 0; }
#tab-insights .goal + .goal { border-left: 1px solid var(--line-soft); }
#tab-insights .goal .lbl { font-size: 12px; color: var(--muted); white-space: nowrap; display: flex; gap: 8px; align-items: center; }
#tab-insights .goal .lbl b { color: var(--text); font-weight: 600; }
#tab-insights .big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 6px; white-space: nowrap; color: var(--text); }
#tab-insights .big.is-ok { color: var(--ok); }
#tab-insights .big.is-ng { color: var(--ng); }
#tab-insights .big.is-unk { color: var(--unk); }
#tab-insights .big small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
#tab-insights .meter { position: relative; height: 6px; background: var(--sunken); border-radius: var(--radius); margin: 10px 0 12px; box-shadow: inset 0 0 0 1px var(--line-soft); }
#tab-insights .meter.is-blank { visibility: hidden; }
#tab-insights .meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius); }
#tab-insights .facts { display: grid; gap: 4px; }
#tab-insights .fact { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; white-space: nowrap; }
#tab-insights .fact span:first-child { color: var(--muted); }
#tab-insights .fact span:last-child { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

/* 受託の入金（月別）: 棒は .plot の高さを100%として描き、目標線も同じ基準の bottom で置く */
#tab-insights .chart { padding-top: 24px; }
#tab-insights .plot { position: relative; display: grid; gap: 16px; align-items: end; height: 206px; }
#tab-insights .target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--text); z-index: 1; pointer-events: none; }
#tab-insights .target span { position: absolute; left: 0; top: -18px; font-size: 11px; color: var(--text); background: var(--card); padding-right: 6px; white-space: nowrap; }
#tab-insights .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
#tab-insights .bar .v { margin-bottom: 4px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#tab-insights .bar .b { display: block; flex: 0 0 auto; width: 100%; max-width: 56px; min-height: 2px; background: var(--primary); border-radius: var(--radius) var(--radius) 0 0; }
#tab-insights .bar .b.plan { background: var(--primary-glow); box-shadow: inset 0 0 0 1px var(--primary); }
#tab-insights .bar:hover .b { background: var(--primary-hover); }
#tab-insights .bar:hover .b.plan { background: var(--run-bg); }
#tab-insights .xlab { display: grid; gap: 16px; border-top: 1px solid var(--line); }
#tab-insights .xlab span { text-align: center; font-size: 12px; color: var(--muted); padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-insights table.t col.c-amt { width: 120px; }
#tab-insights table.t col.c-st { width: 96px; }
#tab-insights table.t col.c-h { width: 88px; }
#tab-insights table.t th.num { text-align: right; }
#tab-insights table.t td.muted { color: var(--muted); }

/* 工数 */
#tab-insights .hours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
#tab-insights .hours h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
#tab-insights .wbars { display: grid; gap: 6px; align-items: end; height: 110px; }
#tab-insights .wbars i { display: block; min-height: 2px; background: var(--primary); border-radius: var(--radius) var(--radius) 0 0; }
#tab-insights .wbars i.now { background: var(--primary-glow); box-shadow: inset 0 0 0 1px var(--primary); }
#tab-insights .wlab { display: grid; gap: 6px; border-top: 1px solid var(--line); }
#tab-insights .wlab span { font-size: 11px; color: var(--muted); text-align: center; padding-top: 4px; white-space: nowrap; }
#tab-insights .ratio { display: flex; height: 10px; border-radius: var(--radius); overflow: hidden; margin: 6px 0 8px; background: var(--line); }
#tab-insights .ratio i:first-child { background: var(--primary); }
#tab-insights .ratio i:last-child { flex: 1; }
#tab-insights .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
#tab-insights .legend span { white-space: nowrap; }
#tab-insights .legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
#tab-insights .legend-owner { margin-top: 12px; }

@media (max-width: 1100px) { #tab-insights .hours { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    #tab-insights .goals { grid-template-columns: minmax(0, 1fr); }
    #tab-insights .goal + .goal { border-left: 0; border-top: 1px solid var(--line-soft); }
    #tab-insights .plot, #tab-insights .xlab { gap: 6px; }
    #tab-insights .bar .v { font-size: 11px; }
    #tab-insights .wlab span:nth-child(even) { visibility: hidden; }
    #tab-insights .hs { display: none; }
}
