/* Dashboard refinement using Unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   Scope these tokens to the workspace; Share Studio retains its export themes. */
:root[data-workspace=dashboard] {
  --bg: #141415;
  --fg: #ededed;
  --muted: #a1a1a6;
  --dim: #929299;
  --line: rgba(237, 237, 237, .1);
  --surface: #1b1b1d;
  --hover: #232325;
  --button: #ededed;
  --button-text: #171717;
  --change-up: #91c9a7;
  --change-down: #e5a397;
  --dashboard-ease: cubic-bezier(.22, 1, .36, 1);
}
:root[data-workspace=dashboard][data-theme=pearl] {
  --bg: #fafafa;
  --fg: #202022;
  --muted: #5e5e64;
  --dim: #6d6d73;
  --line: rgba(32, 32, 34, .1);
  --surface: #fff;
  --hover: #f0f0f2;
  --button: #202022;
  --button-text: #fff;
  --change-up: #30724e;
  --change-down: #a34338;
}
:root[data-workspace=dashboard][data-wallpaper=false] #ambient-canvas { visibility: hidden; }
:root[data-workspace=dashboard] .app-header {
  max-width: 1440px;
  min-height: 72px;
  padding: 16px 32px;
  gap: 24px;
}
:root[data-workspace=dashboard] .brand { font-size: 18px; letter-spacing: 0; gap: 12px; }
:root[data-workspace=dashboard] .brand-mark { width: 28px !important; height: 28px !important; }
:root[data-workspace=dashboard] .navigation { gap: 24px; font-size: 14px; }
:root[data-workspace=dashboard] .nav-link { padding: 8px 0; }
:root[data-workspace=dashboard] .demo-badge { padding: 4px 8px; background: none; border: 0; }
:root[data-workspace=dashboard] .button { border-radius: 8px; gap: 8px; padding: 8px 16px; min-height: 40px; font-size: 14px; }
:root[data-workspace=dashboard] .icon { width: 18px; height: 18px; }
:root[data-workspace=dashboard] .icon path { stroke-width: 1.5; }
:root[data-workspace=dashboard] .icon-button { border-radius: 8px; width: 40px; height: 40px; }
.content.dashboard-content { max-width: 1440px; padding: 24px 32px 48px; min-height: calc(100svh - 72px); }
.dashboard .project-bar { gap: 12px; margin-bottom: 16px; }
.dashboard .project-pills { gap: 8px; padding: 4px; margin-left: -4px; }
.dashboard .project-pill { height: 36px; padding: 0 12px 0 8px; gap: 8px; border-radius: 8px; background: none; border-color: transparent; }
.dashboard .project-pill.selected { background: var(--hover); color: var(--fg); border-color: var(--line); }
.dashboard .project-pill:hover { background: var(--hover); border-color: var(--line); }
.dashboard .project-monogram,.dashboard .project-count { width: 24px; height: 24px; border-radius: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; background: var(--hover); color: var(--muted); }
.dashboard .project-pill.selected .project-count,.dashboard .project-pill.selected .project-monogram { color: var(--accent); background: none; }
.dashboard .project-pill.add { padding: 0 12px; margin-left: 8px; }
.dashboard .project-pill.add:before { left: -8px; top: 8px; bottom: 8px; }
.dashboard .project-manage { border-radius: 8px; width: 36px; height: 36px; min-width: 36px; }
.dashboard .dashboard-toolbar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.dashboard .period-control { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: none; overflow: visible; }
.dashboard .period-option { height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--muted); }
.dashboard .period-option.selected { background: var(--hover); color: var(--fg); font-weight: 500; }
.dashboard .period-option:hover { color: var(--fg); background: var(--hover); }
.dashboard .period-context { gap: 4px; flex-direction: column; align-items: flex-start; }
.dashboard .period-context .date-label { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.dashboard .period-context .timezone { font-size: 12px; padding: 0; border: 0; }
.dashboard .toolbar-actions { gap: 8px; margin-left: auto; }
.dashboard .freshness { margin-right: 8px; font-size: 12px; }
.dashboard .toolbar-button,.dashboard .customize-menu>.select-trigger { width: 36px; min-height: 36px; height: 36px; border-radius: 8px; border-color: var(--line); background: none; }
.dashboard .metric-board.focus-board { margin: 32px 0 0; }
.dashboard .metric-card.focus-hero { padding: 0; }
.dashboard .focus-hero .metric-label { margin: 0; min-height: 28px; font-size: 18px; letter-spacing: 0; color: var(--muted); }
.dashboard .focus-board .focus-hero .metric-value { margin: 8px 0 0; font-size: clamp(48px, 7vw, 88px); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; max-width: 100%; }
.dashboard .focus-hero .comparison-row { margin-top: 12px; gap: 8px; }
.dashboard .focus-hero .comparison { font-size: 20px; letter-spacing: 0; }
.dashboard .focus-hero .comparison-caption { font-size: 13px; }
.dashboard .focus-board .metric-card-heading { margin-top: 12px; min-height: 24px; }
.dashboard .focus-board .metric-provider { min-height: 24px; gap: 8px; font-size: 12px; }
.dashboard .focus-board .metric-provider-name { display: inline; }
.dashboard .focus-board .metric-provider .provider-mark { filter: grayscale(1); color: var(--muted); }
.dashboard .focus-hero .tile-history { margin-top: 24px; padding-top: 0; }
.dashboard .focus-hero .chart-plot { height: clamp(200px, 26vh, 300px); }
.dashboard .chart-endpoint { width: 6px; height: 6px; margin: -3px 0 0 -3px; box-shadow: none; }
.dashboard .chart-dates { padding: 0 12px; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dashboard .focus-grid { margin-top: 32px; }
.dashboard .metric-board .focus-grid>* { padding: 24px 32px; }
.dashboard .focus-item .metric-label { margin: 0; min-height: 24px; color: var(--muted); font-size: 14px; letter-spacing: 0; }
.dashboard .focus-board .focus-item .metric-value { margin: 8px 0 0; font-size: clamp(32px, 3.5vw, 48px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.dashboard .focus-item .comparison-row { margin-top: 12px; gap: 4px 8px; }
.dashboard .focus-item .comparison { font-size: 16px; letter-spacing: 0; }
.dashboard .focus-item .comparison-caption { font-size: 12px; }
.dashboard .focus-item .trend { --accent: var(--muted); }
.dashboard .focus-grid .metric-add-tile { gap: 8px; font-size: 14px; color: var(--muted); }
.dashboard .detail-panel.breakdown-drawer { padding: 24px 24px 32px; background: var(--surface); backdrop-filter: none; }
.dashboard .drawer-title { font-size: 18px; font-weight: 500; }
.dashboard .drawer-metrics { gap: 8px; margin: 24px 0; }
.dashboard .drawer-metric { height: 36px; padding: 0 12px; border-radius: 8px; }
.dashboard .drawer-total { font-size: 40px; margin: 8px 0; letter-spacing: -.02em; }
.dashboard .breakdown-row { padding: 16px 0; }
.dashboard .select-menu-panel { background: var(--surface); border-radius: 12px; backdrop-filter: none; }
.dashboard .select-menu-panel button,.dashboard .select-option { border-radius: 6px; }
.dashboard button,.dashboard summary { transition: color 160ms var(--dashboard-ease), background-color 160ms var(--dashboard-ease), border-color 160ms var(--dashboard-ease); }
@media(max-width:1100px) {
  .dashboard .dashboard-toolbar { grid-template-columns: auto 1fr; }
  .dashboard .toolbar-actions { grid-column: 2; grid-row: 1; }
  .dashboard .period-context { grid-column: 1/-1; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
}
@media(min-width:761px) and (max-width:1000px) {
  .dashboard .metric-board .focus-grid>* { padding: 24px; }
  .dashboard .metric-board .focus-grid>:nth-child(3n+1) { padding-left: 24px; }
  .dashboard .metric-board .focus-grid>:nth-child(2n+1) { padding-left: 0; }
}
@media(max-width:760px) {
  :root[data-workspace=dashboard] .app-header { padding: 16px 20px; gap: 12px; flex-wrap: wrap; }
  :root[data-workspace=dashboard] .brand { font-size: 16px; gap: 8px; }
  :root[data-workspace=dashboard] .app-header:not(.landing-header) .navigation { gap: 24px; }
  :root[data-workspace=dashboard] .app-header:not(.landing-header):not(.studio-header)>.button { margin-left: 0; min-height: 36px; padding: 8px 12px; border-radius: 8px; }
  .content.dashboard-content { padding: 24px 20px 40px; }
  .dashboard .dashboard-toolbar { display: flex; gap: 12px; padding-bottom: 20px; }
  .dashboard .period-control { width: 100%; overflow-x: auto; }
  .dashboard .period-option { height: 36px; flex: 1; padding: 0 8px; }
  .dashboard .period-context { width: 100%; gap: 4px 12px; }
  .dashboard .toolbar-actions { width: 100%; }
  .dashboard .metric-board.focus-board { margin-top: 24px; }
  .dashboard .focus-board .focus-hero .metric-value { font-size: clamp(36px, 11vw, 64px); letter-spacing: -.03em; }
  .dashboard .focus-hero .comparison-row { flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
  .dashboard .focus-hero .comparison { font-size: 18px; }
  .dashboard .focus-hero .chart-plot { height: 180px; }
  .dashboard .focus-grid { margin-top: 24px; }
  .dashboard .metric-board .focus-grid>*,.dashboard .metric-board .focus-grid>:nth-child(3n+1),.dashboard .metric-board .focus-grid>:nth-child(2n+1) { padding: 24px 0; }
  .dashboard .focus-board .focus-item .metric-value { font-size: 40px; }
  .dashboard .focus-grid .metric-add-tile { min-height: 72px; }
}
@media(prefers-reduced-motion:reduce) {
  .dashboard button,.dashboard summary { transition: none; }
}