/* ============================================
   Component: Dashboard frame
   View: layouts/dashboard.html.erb
   Stimulus: none
   ============================================ */
/* A role's dashboard: the dashboards to switch between (exec and admin), whose dashboard it is,
   its tab bar, then the tab at its level, In Depth or Deeper, with the way back. */
.dashboard-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.selector-label {
  color: var(--color-muted);
  font-size: var(--font-size-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.selector-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-muted);
  text-decoration: none;
}

.selector-link:hover { color: var(--color-text); }

.selector-link.active {
  color: var(--color-text);
  font-weight: 600;
}

/* Tabs wider than the page wrap onto the bar's next row, as the dashboard selector's links do,
   so every tab is in sight on a phone (PHONE-01, #514). */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.tab-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}

/* A ring is drawn inside the tab, so it never covers a tab beside it or the row below. */
.tab-link:focus-visible { outline-offset: -2px; }

.tab-link:hover { color: var(--color-text); }

.tab-link.active {
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
  font-weight: 600;
}

/* In Depth and Deeper: a tab other than the Summary, and a page beneath a tab */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  margin-bottom: var(--spacing-md);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.back-link:hover { color: var(--color-text); }

.tab-level {
  color: var(--color-muted);
  font-size: var(--font-size-2xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tab-empty { color: var(--color-muted); }