/* Chart SVG text elements */
.chart-axis-tick { font-size: 10px; fill: var(--grey-2); }
.chart-axis-title { font-size: 11px; fill: var(--grey); }
.chart-data-label { font-size: 11px; fill: var(--grey); }
.chart-legend { font-size: 11px; color: var(--grey); }
.chart-title { font-size: 14px; font-weight: 600; color: var(--grey); }
.chart-value { font-size: 14px; font-weight: 700; }
.donut-center { font-size: 14px; font-weight: 700; fill: var(--grey); }
.chart-legend-item { font-size: 11px; color: var(--grey); }
.chart-legend-color { width: 12px; height: 12px; border-radius: 2px; }
.chart-value { font-size: 14px; font-weight: 700; }
.stat-value { font-size: 16px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--grey-2); }

/* Chart containers */
.chart-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.chart-wrap { overflow-x: auto; }
.chart-bar { border-radius: 2px 2px 0 0; }
.chart-bar.secondary { background: var(--secondary); }

/* Legend items */
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-legend-color { width: 12px; height: 12px; border-radius: 2px; }

/* Horizontal bar charts */
.hbar-chart { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.hbar-label { width: 140px; font-size: 12px; color: var(--grey); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { flex: 1; height: 20px; background: var(--line); border-radius: 4px; overflow: hidden; position: relative; min-width: 0; }
.hbar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.hbar-count { width: 50px; text-align: right; font-size: 12px; font-weight: 600; color: var(--grey); white-space: nowrap; }
.hbar-pct { width: 45px; text-align: right; font-size: 11px; color: var(--grey-2); white-space: nowrap; }

/* Aging charts */
.aging-chart { display: flex; flex-direction: column; gap: 10px; }
.aging-row { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.aging-label { width: 100px; font-size: 12px; font-weight: 600; color: var(--grey); white-space: nowrap; }
.aging-track { flex: 1; height: 24px; background: var(--line); border-radius: 4px; overflow: hidden; position: relative; min-width: 0; }
.aging-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.aging-count { width: 82px; text-align: right; font-size: 12px; font-weight: 600; color: var(--grey); white-space: nowrap; }

/* Alert panels */
.alerts-panel { display: flex; flex-direction: column; gap: 8px; }
.alert-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--radius); background: #fff; }
.alert-card.high { border-left-color: var(--danger); }
.alert-card.medium { border-left-color: var(--warn); }
.alert-card.low { border-left-color: var(--ok); }
.alert-card.drillable { cursor: pointer; }
.alert-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--danger); flex-shrink: 0; background: var(--danger)20; }
.alert-content { flex: 1; min-width: 0; }
.alert-title { font-size: 13px; font-weight: 600; color: var(--grey); margin-bottom: 2px; }
.alert-desc { font-size: 12px; color: var(--grey-2); }
.alert-count { font-size: 18px; font-weight: 700; color: var(--danger); flex-shrink: 0; margin-left: 8px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; padding: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--grey-2); font-weight: 600; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
tbody td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
tbody tr:hover { background: #fafafa; }
tbody tr.clickable { cursor: pointer; }