/* dashboards page styles (page-specific only; shared patterns live in app.css). */
.bd-name { min-width: 200px; max-width: 260px; }
.wb-table td.bd-sh, .wb-table th.bd-sh { max-width: 180px; white-space: normal; }
/* widgets on a 12-column grid; --w is the widget's width in columns */
.bd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.bd-w { grid-column: span var(--w, 6); display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 14px; gap: 10px; }
.bd-wh { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.bd-wh b { font-size: var(--font-body); font-weight: 600; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-wh small { display: block; font-size: var(--text-xs); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-wb { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bd-wb .hbars { padding: 0; }
.bd-wb .tw { max-height: 260px; overflow: auto; }
.bd-num b { display: block; font-family: var(--font-display, var(--font-sans)); font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.bd-num small { font-size: var(--text-xs); color: var(--fg-3); }
.bd-donut { display: flex; align-items: center; gap: 18px; }
.bd-donut .legend { flex-direction: column; gap: 6px; padding: 0; list-style: none; margin: 0; }
.bd-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 18px 8px; color: var(--fg-2); border: 1px dashed var(--border-default); border-radius: var(--radius); background: var(--bg-muted); }
.bd-locked small { color: var(--fg-3); font-size: var(--text-xs); max-width: 280px; }
@media (max-width: 900px) { .bd-w { grid-column: span 12; } }
/* the dashboard as the design draws it: number tiles (kpi markup) and charts as sections */
.bd-cell { grid-column: span var(--w, 6); min-width: 0; }
.bd-cell.kpi { align-self: start; }
.bd-cell.kpi .bd-wb { flex-direction: row; justify-content: flex-start; min-height: 30px; }
.bd-chart { padding: 12px 14px 14px; min-height: 120px; display: flex; flex-direction: column; }
.bd-klock { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: var(--text-sm); }
/* the compact preview on a dashboard's Overview: title and value only */
.bd-grid.sm { gap: 8px; }
.bd-grid.sm .bd-w { padding: 10px 12px; gap: 6px; min-height: 64px; }
.bd-grid.sm .bd-wh b { font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); white-space: normal; }
.bd-grid.sm .bd-num b { font-size: 20px; }
.bd-grid.sm .bd-num small, .bd-grid.sm .hbars .v { display: none; }
.bd-grid.sm .chart .ax, .bd-grid.sm .chart .gl { display: none; }
.bd-grid.sm .hbars .l { display: none; }
.bd-grid.sm .hbars { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.bd-grid.sm .hbars .t { height: 6px; }
.bd-checks { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) { .bd-cell { grid-column: span 12; } }
.bd-grid:not(.sm) { row-gap: var(--pg-gap, 24px); }

/* Allowed roles: the line under a restricted dashboard's name, and the picker's role list */
.bd-limit { display: inline-flex; align-items: center; gap: 4px; font-size: calc(var(--font-body) - 1px); color: var(--info-fg); white-space: normal; }
.bd-allow { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0 0 26px; }
.bd-allow[hidden] { display: none; }