:root{--blue:#168bea;--green:#12aa72;--red:#ff4260;--orange:#d28b00;--text:#202124;--muted:#777;--border:#e8e8e8;--bg:#fff;--sidebar:174px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:#fff;font-size:12px}button{font:inherit;background:#fff;border:0;cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);border-right:1px solid #eee;background:#fff;height:100vh;overflow-y:auto;position:sticky;top:0;z-index:20}.brand{height:45px;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 15px;gap:7px}.brand-mark{width:26px;height:26px;border-radius:50%;background:#1166dc;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800}.brand strong{display:block;font-size:20px;line-height:18px;letter-spacing:-.5px}.brand span{display:block;font-size:6px;font-weight:700}.nav{padding:15px 7px 30px}.nav-item{height:34px;padding:0 8px;display:flex;align-items:center;gap:9px;color:#444;text-decoration:none;border-radius:5px;white-space:nowrap}.nav-item span{width:16px;text-align:center;color:#999;font-size:14px}.nav-item.active{color:#0868ee;background:#f6f9ff}.nav-item.active span{color:#0868ee}.nav-item b{margin-left:auto;background:#f3f7ff;color:#1467ed;padding:2px 6px;border-radius:4px;font-size:10px}.nav-title{font-size:10px;color:#444;padding:15px 8px 5px;display:flex;justify-content:space-between}.main{min-width:0;flex:1}.topbar{height:45px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;padding:0 10px}.top-actions{display:flex;align-items:center;gap:10px}.select-btn{border:1px solid #ddd;border-radius:7px;padding:6px 11px;color:#444;font-size:10px}.avatar{height:24px;width:24px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:9px}.menu-btn{display:none}.content{padding:22px 18px 65px;max-width:1100px;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.page-head h1{font-size:21px;margin:0 0 18px;letter-spacing:-.4px}.page-head p{margin:0;color:#555}.filter-btn{border:1px solid #e5e5e5;border-radius:7px;padding:7px 12px;font-size:10px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:14px;align-items:start}.card{border:1px solid #ededed;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.01)}.table-card{overflow:hidden}.table-wrap{overflow:auto}.table-card table{border-collapse:collapse;width:100%;min-width:690px;font-size:9px}.table-card th,.table-card td{border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;padding:5px 7px;height:20px}.table-card th{font-weight:700;text-align:center;color:#222}.table-card td:nth-child(n+3){text-align:right;white-space:nowrap}.table-card td:first-child{width:63px;white-space:nowrap}.table-card .name{min-width:220px}.table-card tr.group td{color:#aaa}.table-card tr.group td:nth-child(1),.table-card tr.group td:nth-child(2){font-weight:500}.pie-card{min-height:323px;padding:22px 15px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.pie-chart{width:224px;height:224px;border-radius:50%;background:conic-gradient(var(--blue) 0 53.54%,var(--green) 53.54% 60.11%,var(--orange) 60.11% 67.48%,var(--red) 67.48% 100%);position:relative}.pie-chart:after{content:"";position:absolute;inset:1px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px #fff;pointer-events:none}.pie-labels{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;margin-top:17px;font-size:9px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}.blue{background:var(--blue)}.green{background:var(--green)}.orange{background:var(--orange)}.red{background:var(--red)}.chart-card{margin-top:14px;padding:8px 12px 14px;min-height:300px}.chart-head{color:#777;height:20px}.bar-chart{height:230px;display:flex}.y-axis{width:112px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;padding:4px 8px 33px 0;color:#555;font-size:8px}.plot{position:relative;flex:1;height:100%;overflow:hidden}.gridlines{position:absolute;inset:0 0 32px;display:flex;flex-direction:column;justify-content:space-between}.gridlines i{border-top:1px solid #e6e6e6;width:100%}.bars{position:absolute;inset:0 0 32px;display:flex;align-items:flex-end;justify-content:space-around;padding:0 3%;gap:3%}.bar-group{height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative;flex:1;max-width:190px;gap:0}.bar{width:42%;max-width:62px;min-width:12px;border-radius:4px 4px 0 0;z-index:2}.bar.budget{background:var(--blue)}.bar.actual{background:var(--green)}.bar-group label{position:absolute;top:calc(100% + 8px);white-space:nowrap;font-size:8px;color:#333}.legend{text-align:center;margin-top:4px;font-size:9px}.legend span{margin:0 5px}.statusbar{position:fixed;bottom:0;right:0;background:#fff;border:1px solid #ddd;border-radius:7px 0 0 0;padding:7px 10px;font-size:9px;z-index:30;color:#555}.statusbar span{margin-left:15px}@media(max-width:1050px){.dashboard-grid{grid-template-columns:1fr}.pie-card{min-height:280px}.content{max-width:none}.sidebar{width:165px;flex-basis:165px}}@media(max-width:760px){.sidebar{position:fixed;left:-280px;width:240px;transition:left .2s;box-shadow:4px 0 18px rgba(0,0,0,.08)}.sidebar.open{left:0}.menu-btn{display:block;font-size:20px;padding:4px}.content{padding:18px 10px 70px}.page-head{gap:12px}.page-head h1{font-size:19px}.dashboard-grid{grid-template-columns:1fr}.pie-card{min-height:300px}.pie-chart{width:190px;height:190px}.chart-card{overflow:hidden}.bar-chart{height:255px}.y-axis{width:75px;font-size:7px}.bar-group label{font-size:7px;writing-mode:vertical-rl;transform:rotate(180deg);top:calc(100% + 3px)}.statusbar{left:0;right:0;border-radius:0;text-align:center}.statusbar span{margin-left:8px}.topbar{padding:0 8px}}@media(max-width:480px){.top-actions .select-btn{display:none}.page-head{align-items:flex-start}.filter-btn{font-size:9px}.pie-labels{font-size:8px}.table-card table{font-size:8px}.table-card th,.table-card td{padding:5px}.statusbar{font-size:7px;white-space:nowrap;overflow:hidden}.statusbar span{margin-left:5px}.bar-group label{font-size:6px}}

/* =========================
   Interactive chart tooltips
   ========================= */
.chart-tooltip {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .96);
  color: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  font-size: 12px;
  line-height: 1.5;
}
.chart-tooltip.show { opacity: 1; transform: translateY(0); }
.chart-tooltip strong { display: block; margin-bottom: 5px; font-size: 13px; }
.chart-tooltip span { display: block; white-space: nowrap; }
.tooltip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}
.tooltip-dot.budget { background: #3b82f6; }
.tooltip-dot.actual { background: #22c55e; }

/* SVG pie chart */
.pie-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 280px);
  height: auto;
  overflow: visible;
}
.pie-slice {
  cursor: pointer;
  pointer-events: auto;
  stroke: #fff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}
.pie-slice:hover,
.pie-slice.active {
  transform: scale(1.045);
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, .22));
}
.pie-svg .pie-center-title {
  font-size: 8px;
  font-weight: 700;
  fill: #64748b;
  letter-spacing: 1px;
}
.pie-svg .pie-center-value {
  font-size: 8px;
  font-weight: 700;
  fill: #0f172a;
}

/* Bar chart hover state */
.bar-group {
  position: relative;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: background .15s ease, transform .15s ease;
}
.bar-group:hover,
.bar-group.hovered,
.bar-group:focus-visible {
  background: rgba(59, 130, 246, .06);
  outline: none;
  transform: translateY(-2px);
}
.bar-group .bar {
  transition: filter .15s ease, opacity .15s ease;
}
.bar-group:hover .bar,
.bar-group.hovered .bar,
.bar-group:focus-visible .bar {
  filter: brightness(.94) saturate(1.15);
}

@media (max-width: 760px) {
  .chart-tooltip {
    min-width: 190px;
    max-width: calc(100vw - 24px);
    font-size: 11px;
  }
}