/* HRBudgetPortal v0.6.0 - Budget Comparison Dashboard / Phase C */
.dashboard-page-heading { align-items:stretch; }
.dashboard-heading-context {
    min-width:300px; max-width:430px; padding:18px 20px; border:1px solid var(--line); border-radius:18px;
    background:linear-gradient(145deg,#fff,#f5f9fc); display:flex; flex-direction:column; justify-content:center;
    box-shadow:var(--shadow-soft);
}
.dashboard-heading-context strong { color:var(--brand); font-size:15px; }
.dashboard-heading-context span { color:#51667d; font-size:11px; margin-top:5px; }
.dashboard-heading-context small { color:#8a98a8; font-size:10px; margin-top:7px; }

.dashboard-filter-form { display:grid; gap:10px; }
.budget-contextbar {
    display:grid; grid-template-columns:1.35fr .55fr 1.35fr 1.45fr 1.45fr; gap:10px; align-items:end;
    padding:16px; background:linear-gradient(145deg,#f8fbfd,#eef5fa); border:1px solid #d6e2ec; border-radius:18px; box-shadow:var(--shadow-soft);
}
.budget-context-title { min-width:0; padding-right:8px; }
.budget-context-title .eyebrow { display:block; margin-bottom:4px; font-size:8px; }
.budget-context-title strong { display:block; color:var(--brand); font-size:13px; }
.budget-context-title small { display:block; color:#78899a; font-size:8px; line-height:1.45; margin-top:4px; }
.budget-contextbar .filter-field label { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.budget-contextbar select { width:100%; height:42px; border-radius:11px; font-size:10px; padding:0 9px; background:#fff; }
.budget-context-summary { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:9px 4px 0; }
.budget-context-summary span { display:inline-flex; gap:4px; align-items:center; padding:5px 8px; border-radius:99px; background:#eef4f8; color:#587086; font-size:9px; }
.budget-context-summary b { color:var(--brand); }

.scenario-compare-strip {
    display:grid; grid-template-columns:1.65fr repeat(3,minmax(0,1fr)); gap:10px; align-items:center;
    margin:-10px 0 24px; padding:12px 15px; background:linear-gradient(90deg,#f7f9fb,#fff8ea); border:1px solid #e7dcc0; border-radius:15px; box-shadow:var(--shadow-soft);
}
.scenario-compare-strip span,.scenario-compare-strip small { display:block; color:var(--muted); font-size:8px; }
.scenario-compare-strip strong { display:block; color:var(--brand); font-size:11px; margin-top:3px; }
.scenario-compare-strip b { display:block; color:var(--brand); font-size:12px; margin-top:3px; }

.dot.baseline.line-dot, .dot.compare.line-dot { width:14px; height:0; border-radius:0; background:transparent; }
.dot.baseline.line-dot { border-top:2px dashed #7d8894; }
.dot.compare.line-dot { border-top:2px dashed #d39a4a; }
.comparison-chart { position:relative; }
.comparison-line-overlay {
    position:absolute; left:0; right:0; top:25px; width:100%; height:calc(100% - 47px);
    pointer-events:none; z-index:4; overflow:visible;
}
.comparison-line-overlay polyline { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.comparison-line-overlay.baseline-line polyline { stroke:#7d8894; stroke-dasharray:8 6; opacity:.95; }
.comparison-line-overlay.compare-line polyline { stroke:#d39a4a; stroke-dasharray:4 5; opacity:.95; }
.vbar.forecast-main { opacity:.82; }

.dashboard-filter-shell { margin-bottom:18px; }
.dashboard-filterbar {
    display:grid; grid-template-columns:.72fr 1.15fr 1.1fr 1.15fr 1.2fr .95fr auto; gap:10px; align-items:end;
    padding:16px; background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-soft);
}
.dashboard-filterbar .filter-field { min-width:0; }
.dashboard-filterbar .filter-field label { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.dashboard-filterbar select { width:100%; height:42px; border-radius:11px; font-size:11px; padding:0 10px; }
.dashboard-filterbar select:disabled { background:#f4f6f8; color:#9aa6b3; cursor:not-allowed; }
.dashboard-filter-actions { display:flex; gap:7px; }
.dashboard-filter-actions .btn { min-height:42px; padding:9px 14px; font-size:11px; border-radius:11px; }
.view-toggle { height:42px; padding:3px; display:grid; grid-template-columns:1fr 1fr; border:1px solid #ccd7e1; border-radius:11px; background:#f4f7fa; }
.view-toggle label { margin:0 !important; display:grid !important; place-items:center; border-radius:8px; cursor:pointer; color:#607286 !important; font-size:10px !important; text-transform:none !important; letter-spacing:0 !important; }
.view-toggle label.active, .view-toggle label:has(input:checked) { background:var(--brand); color:#fff !important; box-shadow:0 4px 12px rgba(23,60,97,.18); }
.view-toggle input { position:absolute; opacity:0; pointer-events:none; }
.filter-scope-row { display:flex; gap:7px; flex-wrap:wrap; align-items:center; padding:9px 4px 0; color:#738195; font-size:10px; }
.filter-scope-row > strong { color:var(--brand); }
.filter-scope-row small { margin-left:auto; }
.filter-chip { display:inline-flex; padding:4px 7px; border-radius:99px; background:var(--brand-soft); color:var(--brand-2); font-weight:750; }

.dashboard-notice { padding:11px 14px; margin:0 0 16px; border-radius:13px; font-size:10px; line-height:1.5; border:1px solid var(--line); }
.dashboard-notice.warning { background:var(--warning-soft); border-color:#ecd9a4; color:#765200; }
.dashboard-notice.info { background:var(--brand-soft); border-color:#cfdfec; color:#365b7d; }

.dashboard-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.dashboard-kpi { min-width:0; display:flex; gap:12px; align-items:flex-start; padding:16px; background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow-soft); }
.dashboard-kpi .kpi-icon { flex:0 0 32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--brand-soft); color:var(--brand); font-size:10px; font-weight:900; }
.dashboard-kpi > div:last-child { min-width:0; }
.dashboard-kpi span, .dashboard-kpi small { display:block; color:var(--muted); }
.dashboard-kpi span { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.dashboard-kpi strong { display:block; margin-top:7px; color:var(--brand); font-size:clamp(18px,1.45vw,25px); letter-spacing:-.035em; white-space:nowrap; }
.dashboard-kpi small { margin-top:5px; font-size:9px; line-height:1.4; }
.dashboard-kpi.actual-tone strong { color:#92504b; }
.dashboard-kpi.actual-tone .kpi-icon { color:#8f4a46; background:var(--actual-soft); }
.dashboard-kpi.plan-tone .kpi-icon, .dashboard-kpi.hc-plan-tone .kpi-icon { background:#e7f0f8; color:var(--brand-2); }
.dashboard-kpi.forecast-tone .kpi-icon { background:var(--success-soft); color:var(--success); }
.dashboard-kpi.warning-tone { border-color:#ead9aa; }
.dashboard-kpi.warning-tone .kpi-icon { background:var(--warning-soft); color:var(--warning); }
.dashboard-kpi .muted-value { color:#9ba7b3; }

.analysis-section { margin:0 0 24px; padding:22px; background:rgba(248,250,252,.68); border:1px solid #e2e8ee; border-radius:24px; }
.analysis-section-head { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:start; gap:13px; margin-bottom:16px; }
.analysis-number { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,var(--brand),var(--brand-2)); color:#fff; font-size:10px; font-weight:900; box-shadow:0 8px 18px rgba(36,88,141,.18); }
.analysis-section-head h2 { margin:1px 0 4px; font-size:20px; letter-spacing:-.025em; }
.analysis-section-head p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.analysis-link { color:var(--brand-2); font-size:10px; font-weight:800; padding:8px 0; }
.analysis-link:hover { color:var(--accent); }
.analysis-grid { display:grid; gap:14px; }
.hc-analysis-grid { grid-template-columns:1.65fr .72fr 1fr; align-items:stretch; }
.actual-plan-grid, .cost-analysis-grid { grid-template-columns:1.35fr .65fr .65fr; }
.analysis-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:17px; box-shadow:var(--shadow-soft); }
.chart-card-span-2 { grid-column:span 2; }
.chart-card-full { grid-column:1 / -1; }
.card-title-row { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:14px; }
.card-title-row h3 { margin:0 0 4px; font-size:14px; letter-spacing:-.015em; }
.card-title-row p { margin:0; color:var(--muted); font-size:9px; line-height:1.45; }
.mini-legend { display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:9px; white-space:nowrap; }
.mini-legend span { display:inline-flex; align-items:center; gap:5px; }
.dot { width:8px; height:8px; border-radius:3px; display:inline-block; }
.dot.actual { background:var(--actual); }
.dot.plan { background:var(--brand-2); }
.dot.scope { background:#aab9c7; }
.dot.scope.line-dot { width:14px; height:0; border-radius:0; background:transparent; border-top:2px dashed #9eacba; }

.vertical-chart { height:220px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:7px; align-items:end; padding-top:25px; border-bottom:1px solid #dfe6ec; position:relative; }
.vertical-chart::before, .vertical-chart::after { content:""; position:absolute; left:0; right:0; border-top:1px dashed #e6ebf0; }
.vertical-chart::before { top:33%; }
.vertical-chart::after { top:66%; }
.vcol { height:100%; display:grid; grid-template-rows:minmax(0,1fr) 18px; gap:4px; transition:opacity .15s ease; }
.vcol.dimmed { opacity:.28; }
.vplot { min-height:0; display:flex; align-items:flex-end; justify-content:center; gap:3px; position:relative; z-index:1; }
.vbar { width:min(21px,42%); min-height:2px; border-radius:5px 5px 2px 2px; position:relative; }
.vbar.actual { background:linear-gradient(180deg,#c27a74,#a65d58); }
.vbar.plan { background:linear-gradient(180deg,#3673a9,#24588d); }
.vbar.forecast-overlay { opacity:.58; position:absolute; left:50%; transform:translateX(-50%); width:48%; }
.vbar span { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); font-size:8px; color:#607286; white-space:nowrap; }
.vcol > small { color:#758498; font-size:8px; text-align:center; }
.scope-line-overlay {
    position:absolute; left:0; right:0; top:25px; width:100%; height:calc(100% - 47px);
    pointer-events:none; z-index:2; overflow:visible;
}
.scope-line-overlay polyline {
    fill:none; stroke:#9eacba; stroke-width:2; stroke-dasharray:7 6; opacity:.92; vector-effect:non-scaling-stroke;
}
.scope-marker { position:absolute; left:50%; width:7px; height:7px; border-radius:50%; background:#aebbc7; border:2px solid #fff; box-shadow:0 0 0 1px #9eacba; transform:translate(-50%,50%); z-index:3; }
.money-vertical-chart { height:245px; }
.money-plot .vbar { width:min(24px,46%); }

.gap-list, .rank-bars, .variance-list { display:grid; gap:9px; }
.gap-row { display:grid; grid-template-columns:52px minmax(0,1fr) 35px; gap:8px; align-items:center; font-size:9px; color:var(--muted); }
.gap-row.dimmed, .variance-row.dimmed { opacity:.3; }
.gap-track, .rank-track, .variance-track { height:8px; border-radius:99px; background:#edf1f4; overflow:hidden; }
.gap-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d4dde6,#829bb1); }
.gap-row b { text-align:right; color:var(--brand); font-size:9px; }
.rank-row { display:grid; grid-template-columns:1fr 42px; gap:5px 8px; align-items:center; }
.rank-label { grid-column:1/-1; display:flex; justify-content:space-between; gap:8px; font-size:9px; }
.rank-label span { color:#51667d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-label b { color:var(--brand); }
.rank-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6f96b8,#24588d); }
.rank-row small { text-align:right; color:#8a98a8; font-size:8px; }
.analysis-empty-note { padding:18px 14px; background:#f7f9fb; border:1px dashed #d7e0e8; border-radius:13px; color:#778697; font-size:10px; line-height:1.55; }

.variance-row { display:grid; grid-template-columns:28px minmax(0,1fr) 68px; gap:7px; align-items:center; font-size:8px; color:var(--muted); }
.variance-track i { display:block; height:100%; border-radius:inherit; }
.variance-track i.positive { background:#d39a67; }
.variance-track i.negative { background:#9ab4ca; }
.variance-row b { text-align:right; font-size:8px; }
.variance-na-row { color:#98a5b2; }
.variance-na-row .variance-track { background:repeating-linear-gradient(135deg,#f0f3f6,#f0f3f6 5px,#e7ecf0 5px,#e7ecf0 10px); }
.variance-na-row b, .variance-na { color:#9aa7b4 !important; font-weight:700; }
.variance-footnote { display:block; margin-top:10px; color:#8795a4; font-size:8px; line-height:1.4; }
.positive-text { color:#9a5b22 !important; }
.negative-text { color:#477497 !important; }
.insight-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.insight-card { padding:12px; border-radius:13px; background:#f7f9fb; border:1px solid #e3e9ef; }
.insight-card span, .insight-card small { display:block; color:var(--muted); font-size:8px; }
.insight-card strong { display:block; margin:5px 0 2px; color:var(--brand); font-size:13px; }
.insight-card.actual { background:var(--actual-soft); }
.insight-card.plan { background:var(--brand-soft); }
.insight-card.warning { background:var(--warning-soft); }
.insight-card.success { background:var(--success-soft); }
.compact-table table { font-size:10px; }
.compact-table th, .compact-table td { padding:8px 9px; }

.cost-bar-list { display:grid; gap:12px; }
.cost-bar-row { display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px; align-items:center; }
.cost-bar-label { min-width:0; }
.cost-bar-label strong, .cost-bar-label small { display:block; }
.cost-bar-label strong { color:#40566e; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cost-bar-label small { color:#8a98a8; font-size:8px; margin-top:3px; }
.cost-bar-stack { display:grid; gap:4px; }
.cost-line { display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:8px; align-items:center; }
.cost-line::before { content:""; grid-column:1; grid-row:1; height:8px; background:#edf1f4; border-radius:99px; }
.cost-line i { grid-column:1; grid-row:1; height:8px; border-radius:99px; z-index:1; }
.cost-line i.actual { background:var(--actual); }
.cost-line i.plan { background:var(--brand-2); }
.cost-line span { color:#728195; text-align:right; font-size:8px; white-space:nowrap; }
.donut-wrap { display:grid; grid-template-columns:160px minmax(0,1fr); gap:18px; align-items:center; }
.donut { width:150px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; }
.donut-hole { width:86px; aspect-ratio:1; border-radius:50%; background:#fff; display:grid; place-content:center; text-align:center; box-shadow:0 0 0 1px #e4eaf0; }
.donut-hole strong { color:var(--brand); font-size:10px; max-width:72px; }
.donut-hole small { color:var(--muted); font-size:8px; margin-top:3px; }
.donut-legend { display:grid; gap:7px; }
.donut-legend > div { display:grid; grid-template-columns:8px minmax(0,1fr) 34px; gap:6px; align-items:center; font-size:8px; }
.donut-legend i { width:8px; height:8px; border-radius:3px; }
.donut-legend span { color:#53677e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.donut-legend b { color:var(--brand); text-align:right; }

.hc-trend-card, .hc-gap-card, .hc-distribution-card { min-height:100%; }
.hc-vertical-chart { height:205px; }
.hc-distribution-card .rank-bars { gap:7px; }
.hc-distribution-card .rank-row { gap:4px 7px; }
.actual-plan-main-card .money-vertical-chart { height:225px; }
.insights-panel { padding-top:14px; padding-bottom:14px; }
.insights-panel .card-title-row { margin-bottom:9px; }

@media (max-width:1280px) {
    .budget-contextbar { grid-template-columns:1fr 1fr 1fr 1fr; }
    .budget-context-title { grid-column:1/-1; }
    .scenario-compare-strip { grid-template-columns:1fr 1fr; }
    .dashboard-filterbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .dashboard-filter-actions { justify-content:flex-end; }
    .dashboard-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .hc-analysis-grid, .actual-plan-grid, .cost-analysis-grid { grid-template-columns:1fr 1fr; }
    .hc-trend-card { grid-column:1/-1; }
    .chart-card-span-2 { grid-column:1/-1; }
    .composition-card { grid-column:1/-1; }
}

@media (max-width:900px) {
    .budget-contextbar { grid-template-columns:1fr 1fr; }
    .scenario-compare-strip { grid-template-columns:1fr 1fr; }
    .dashboard-page-heading { flex-direction:column; align-items:stretch; }
    .dashboard-heading-context { max-width:none; min-width:0; }
    .dashboard-filterbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .filter-scope-row small { width:100%; margin-left:0; }
    .analysis-section { padding:15px; border-radius:19px; }
    .analysis-section-head { grid-template-columns:38px 1fr; }
    .analysis-link { grid-column:2; padding:0; }
    .hc-analysis-grid, .actual-plan-grid, .cost-analysis-grid { grid-template-columns:1fr; }
    .hc-trend-card, .chart-card-span-2, .chart-card-full, .composition-card { grid-column:auto; }
    .insight-list { grid-template-columns:1fr; }
    .vertical-chart { gap:4px; overflow-x:auto; }
    .cost-bar-row { grid-template-columns:1fr; }
    .donut-wrap { grid-template-columns:1fr; justify-items:center; }
    .donut-legend { width:100%; }
}

@media (max-width:620px) {
    .budget-contextbar, .scenario-compare-strip { grid-template-columns:1fr; }
    .dashboard-filterbar, .dashboard-kpi-grid { grid-template-columns:1fr; }
    .dashboard-filter-actions { justify-content:stretch; }
    .dashboard-filter-actions .btn { flex:1; }
    .analysis-section-head { grid-template-columns:34px 1fr; }
    .analysis-number { width:32px; height:32px; }
    .card-title-row { flex-direction:column; }
    .mini-legend { white-space:normal; }
    .vertical-chart { min-width:620px; }
    .analysis-card { overflow-x:auto; }
}